Creating a Style Rule for a Tag

A style rule begins with a selector . A selector can be a tag, an id , or a class . Everything you do to create new styles, apply styles, and edit styles starts with creating a rule.

To create a style rule for a tag:

1.	With a page open in Dreamweaver, click the New CSS Rule button in the CSS Styles panel. The New CSS Rule dialog appears ( Figure 5.5 ). Figure 5.5. If a tag is selected in the document, it may automatically appear in the Tag field in the New CSS Rule dialog.
2.	Complete the following: Selector Type: Choose Tag (redefines the look of a specific tag). Tag: Dreamweaver makes its best guess (based on your current selection or cursor placement when you clicked the New Style button) as to what tag you wanted this style to apply to. That tag automatically appears in the Tag field. If that tag isn't the one you wanted, select it using the pop-up menu (Figure 5.6). Figure 5.6. Any tag can be styledjust select the one you want. Define in: Select "This document only" to add the style to just the document you have open. The other options available here will be covered later in this chapter.
3.	Click OK, and the CSS Rule definition dialog appears ( Figure 5.7 ). Figure 5.7. Font rules are set in the Type category and the colors picked here are foreground (text) colors.
4.	Set properties in the eight categories as desired. Which category contains which field is covered in "Dreamweaver CSS Categories," next . If you want to see how something looks without dismissing the dialog, click Apply.
5.	Click OK, and the new rule will now be in effect.

Tips

• New rules can also be created by selecting text in the document window and choosing Text > CSS Styles > New.

• There's a lot more to the New CSS Rule dialog, but don't fret; its other options will be covered later in this chapter.

• Not familiar with classes and ids? What you'll need to know is covered in the sidebar "Choosing Between Classes and IDs," later in this chapter.

• This example creates an internal style: one where the style information is included inside the Web page itself. Internal styles are useful for testing, but in the long run, you'll want to make all your styles external , that is, in their own file. How to do that will be covered later in this chapter.

Choosing Between Divs and Spans

Divs and spans are generic containers. Div is short for division . A div is meant to hold a section of a page that you use and style as a block. Use divs to organize content into meaningful containers. You might structure your page with a div for the masthead, a div for the navigation, a div for the content, and a div for the footer. The way you choose to position the divs creates your layout. Divs for smaller blocks of content can be nested inside other divs. In Figure 5.8 , for example, the highlighted div #photofeature is inside the div #content , which is inside the div #container .

Figure 5.8. Divs can be nested, positioned, and styled individually. The tag selector indicates a named div with a # symbol, such as <div#photofeature> .

Span elements are for inline use. A span, for example, can enclose a letter, word, or phrase. With a style rule attached to the span, you achieve a distinctive presentation for an inline element.