HTML in 10 Steps or Less- P18 ppsx

To define a font-sizeproperty, click the pop-up menu beside the Size field to select a unit of measure and then enter a value in the field.. To define a line-heightproperty, click the po

Defining CSS Font Properties

The HTML Tools Palette provides a means of editing Cascading Style Sheet code, whether the code is inline, embedded, or in an external style sheet doc-ument To modify CSS <font>tag properties, follow these steps

1. Place the cursor in the current document at the point you want to insert the style definition Click the CSS button and choose Font from the submenu to open the Font dialog box (see Figure 146-1)

Figure 146-1: The Font dialog box

2. Enter a selector of your choice in the Selector field

3. To specify a colorproperty, click the color picker and select a color from the color palette

4. To define a font-sizeproperty, click the pop-up menu beside the Size field to select a unit of measure and then enter a value in the field

5. To define a line-heightproperty, click the pop-up menu beside the Line Height field to select a unit of measure and enter a value in the field

6. To define a font-familyproperty, enter a value in the Font Family field

note

• If you initially place the

cursor within an existing

style declaration, the

corresponding selector

appears in the Selector

field and the properties

you define are added to

the existing declaration.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• The best unit of measure for cross-platform usage

is pixels.

• Define font family property just as you would the face

attribute of the <font>

tag — for example, in a comma-delimited list of three or more font names, like “Arial, Helvetica, sans-serif”

7. To define a font-styleproperty, choose Italic, Oblique, or Normal

from the Style pop-up menu The Default value leaves the property undefined

8. To define a font-weightproperty, choose a value from the Weight

pop-up menu The Default value leaves the property undefined

9. To define a font-variantproperty, choose Small-Caps or Normal

from the Variant pop-up menu The Default value leaves the prop-erty undefined

10. When you’ve completed you choices, click the Apply button to insert

the style declaration (see Figure 146-2)

Figure 146-2: A completed style definition in the document window

cross-reference

• To learn more about Cascading Style Sheets, go to the book’s Web site at www.wiley com/compbooks/ 10simplestepsorless.

Defining CSS Text Properties

BBEdit’s CSS editing tools allow you to adjust text properties in CSS, which affect the physical characteristics of the text itself — spacing of characters, words, and lines as well as alignment and indentation Defining these properties

in BBEdit is simply a matter of accessing the appropriate dialog box and entering your chosen values

1. Place the cursor in the current document at the point you want to insert the style definition Click the CSS button and choose Text from the submenu to open the Text dialog box (see Figure 147-1)

Figure 147-1: The Text dialog box

2. Enter a selector of your choice in the Selector field

3. To define a text-indentproperty, click the pop-up menu beside the Text Indent field to select a unit of measure, and then enter a value in the field

4. To define a text-alignproperty, choose a value from the Alignment pop-up menu

5. To define a vertical-alignproperty, choose a value from the cor-responding pop-up menu, or select a percentage from the menu and enter a numeric value in the field

notes

• If you initially place the

cursor within an existing

style declaration, the

corre-sponding selector appears

in the Selector field and

the properties you define

are added to the existing

declaration.

• For some reason, BBEdit

duplicates the

line-height property in both

the Font and Text dialog

boxes To define it here,

select a unit of

measure-ment and enter a value in

the Line Height field.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• The best unit of measure for cross-platform usage

is pixels.

6. To define a text-transformproperty, choose a value from the

transformation pop-up menu

7. To define word-spacingand letter-spacingproperties, select a

unit of measure from their respective pop-up menus and enter a value in their fields

8. To define a white-spaceproperty, choose a value from the White

Space pop-up menu

9. To define a text-decorationproperty, select each of the check

boxes you want to include from those listed at the bottom of the dialog box

10. Click Apply to close the dialog box and insert the definition in the

current document (see Figure 147-2)

Figure 147-2: Text properties added to a style definition

cross-reference

• To learn more about Cascading Style Sheets, see Part 9.

Defining CSS Background Properties

In HTML you can assign a background color or image to several areas of the document, including various parts of a table (cells, rows, or the entire table) and layered content In CSS, by comparison, you can determine the background

of any element in the document including individual words, paragraphs, headings — anything If there’s a tag for it, you can modify its background

1. Place the cursor in the current document at the point you want

to insert the style definition Click the CSS button and choose Background from the submenu to open the Background dialog box (see Figure 148-1)

Figure 148-1: The Background dialog box

2. Enter a selector of your choice in the Selector field

3. To define a background-imageproperty, click the File button to browse your hard drive for an image file you want to use

4. To define a background-colorproperty, click the dialog box’s color picker and choose a color from the palette

note

• If you initially place the

cursor within an existing

style declaration, the

corre-sponding selector appears

in the Selector field and

the properties you define

are added to the existing

declaration.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• Any image you intend to use in a Web site should

be copied into the local site’s root directory.

5. To control how a background image tiles, define a

background-repeatproperty by selecting a value from the Repeat pop-up menu

6. To specify the location of a background image, define a

background-positionproperty by entering Left and Top coordinates in the fields provided and specifying the unit of measure with the corre-sponding pop-up menus

7. To specify whether the background image is fixed or scrolls with the

browser window, define a background-attachmentproperty using the Attach pop-up menu

8. To insert the new definitions, click the Apply button The code is

written to the document (see Figure 148-2)

Figure 148-2: Background definitions in the document window

cross-reference

• To learn more about Cascading Style Sheets and the background properties, see Part 9.

Defining CSS Padding and Margin Properties

BBEdit makes it easy to define padding and margin properties in CSS You do

it all in the same dialog box

1. To define padding properties, place the cursor in the current docu-ment at the point you want to insert the style definition Click the CSS button on the HTML Tools Palette and choose Padding from the submenu to open the Padding dialog box (see Figure 149-1)

Figure 149-1: The Padding dialog box

2. Enter the selector you’re defining the property for in the Selector field

notes

• If you initially place the

cur-sor within an existing style

declaration, the

corre-sponding selector appears

in the Selector field and

the properties you define

are added to the existing

declaration.

• BBEdit does not support

the properties

padding-top , padding-right ,

padding-bottom , or

padding-left Instead,

it uses the single padding

property, which accepts

four values to represent

these separate properties,

respectively ( padding:

top right bottom

left ) If you don’t want

to assign a padding value

to a particular side, you

must enter 0 in the

corre-sponding field.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

3. To supply an identical value for each of the four possible sides, type a

value in the first field and choose a unit of measure from the accom-panying pop-up menu

4. To define a value for any combination of sides, enter individual

values in each of the subsequent fields — top, right, bottom, or left — as indicated by the field’s icon on the left

5. To define margin properties, place the cursor in the current

docu-ment at the point you want to insert the style definition Click the CSS button on the HTML Tools Palette and choose Padding from the submenu to open the Padding dialog box (see Figure 149-2)

Figure 149-2: The Margins dialog box

6. As described just previously for the Padding dialog box, enter the

selec-tor in the Selecselec-tor field and type margin values in the fields provided

cross-reference

• To learn more about Cascading Style Sheet properties, see Part 9 For a discussion of CSS syntax, see the book’s Web site at www.wiley com/compbooks/ 10simplestepsorless.

Defining CSS Border Properties

Before CSS came into style, so to speak, the only HTML elements that could possess borders were tables and images Now any element can possess a bor-der You can determine the width of an element’s border, the border color, and the border style using BBEdit’s CSS border tools The properties defined for the selector are border-width, border-color, and border-style, respectively

1. Place the cursor in the current document at the point you want to insert the style definition

2. Click the CSS button on the HTML Tools Palette and choose Border from the submenu to open the Border dialog box (see Figure 150-1)

Figure 150-1: The Border dialog box

3. Enter the selector you’re defining the property for in the Selector field

note

• If you initially place the

cursor within an existing

style declaration, the

corre-sponding selector will

appear in the Selector

field and the properties

you define are added to

the existing declaration.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• To define values for all sides concurrently, use the first row of interface ele-ments To define values for any combination of sides, enter individual values in each of the subsequent fields — top, right, bottom,

or left, as indicated by the field’s icon on the left.

4. Use the fields on the left side of the dialog box to enter border-width

values, specifying units of measure with the pop-up menus directly to their right

5. To specify border-color values, click the color pickers and make

selections from the color palette To select one of the 16 predefined color names, use the pop-up menus to the right of the color pickers

6. To specify border-style values, make selections from the pop-up

menus on the extreme right side of the dialog box

7. To insert the values and close the dialog box, click the Apply button

The generated code is entered into the document (see Figure 150-2)

Figure 150-2: Border property style definitions applied to a page

cross-reference

• BBEdit’s color picker defaults to the Web-safe palette when first installed.

To learn how to change the color picker preferences, see Task 158.

Defining CSS Box Properties

The box model of Cascading Style Sheets surrounds every element by a kind of rectangular “bull’s-eye,” with four zones radiating out from a central area that holds the element itself — text, image, table, or whatever This central area is

known as the content area The next zone out from this is the padding area (gov-erned by padding properties covered in Task 149), followed by the border area (Task 150), and then the margin area (Task 149 again) Instead of bundling the

box properties into a single dialog box, BBEdit breaks them up for easier access but leaves the last five box properties (width, height, float, clear, and

display) to themselves

1. Place the cursor in the current document at the point you want to insert the style definition Click the CSS button on the HTML Tools Palette and choose Box from the submenu to open the Box dialog box (see Figure 151-1)

Figure 151-1: The Box dialog box

2. Enter the selector you’re defining the property for in the Selector field

3. To specify a widthproperty, enter a value in the Width field and choose a unit of measure from the pop-up menu

notes

• If you initially place the

cursor within an existing

style declaration, the

corresponding selector

appears in the Selector

field and the properties

you define are added to

the existing declaration.

• If the element you assign a

width or height to requires

more space than the

val-ues allow, the element will

override your settings.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• Dreamweaver generates style sheet code using the Style Definition dialog box, which provides a single interface for defining all style properties To learn more, see Part 15.

4. To specify a heightproperty, enter a value in the Height field and

choose a unit of measure from its pop-up menu

5. To specify a floatvalue, make a selection from the corresponding

pop-up menu

6. To specify a clearvalue, make a selection from the relevant pop-up

menu

7. To specify a displayvalue, make a selection from the pop-up menu

8. To close the dialog box, click the Apply button The generated code

is inserted into the document (see Figure 151-2)

Figure 151-2: Box property definitions

Validating HTML

BBEdit has a feature that debugs your HTML syntax and link references This prevents you from creating code with errors or broken links that will affect the look of your page when you publish it to the Web You can validate HTML

on an individual document or on an entire folder or site

1. To validate the current document’s code, click the Check Syntax but-ton on the HTML Tools Palette If BBEdit finds any errors, the HTML Syntax Errors panel (see Figure 152-1) appears

Figure 152-1: When BBEdit encounters errors, it displays the HTML Syntax Errors panel

in the code window

2. Click the warning or error in the upper portion of the dialog box to see the corresponding line of code displayed in the lower portion

note

• In BBEdit, a warning

indi-cates when the displayed

code won’t necessarily

cause a browser error but

is not syntactically correct.

An error indicates when

code will produce a real

browser error.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

• Along with various syntax checks, BBEdit checks links

in the document, folder, and site Run these checks from the Check button submenu They operate identically to the syntax-checking discussed in these steps If a hyperlink, image reference, or other attribute that accepts a pathname value comes

up unresolved (because there’s no corresponding file or the pathname is incorrect), BBEdit opens the HTML Link Errors dialog box (identical to the Syntax Error dialog box) Simply double-click the error to open the document and make the necessary edits.

3. To make corrections to the code, double-click the error or warning

to jump to the document containing the document The line is high-lighted in the document window

4. To check the syntax of all documents in a given folder, click the

Check button on the HTML Tools Palette and choose Folder Syntax from the submenu to display the Check Folder Syntax dialog box (see Figure 152-2)

Figure 152-2: The Check Folder Syntax dialog box

5. By default the dialog box defaults to the folder containing the

currently active document To select a different folder, click the pop-up menu arrow to the right of the dialog box and choose Other This opens the Choose a Folder dialog box in which you locate your folder

6. Click the Check button in the Check Folder Syntax dialog box

Errors appear in the HTML Syntax Errors dialog box Click to see the referenced code in the lower portion, and double-click to open the specified document at the indicated line to edit it

7. To check an entire site’s syntax, choose Site Syntax from the Check

button’s submenu to display the Check Site Syntax dialog box It too defaults to the site of the currently active document To switch sites, use the same pop-up menu mentioned in Step 5 Click the Check button in the Check Site Syntax dialog box to display errors in the HTML Syntax Errors dialog box as we previously discussed

cross-reference

• Macromedia Dreamweaver checks links automatically every time you rename a document or move a file.

To learn more about Dreamweaver, see Part 15.