Accessibility
 
Home > Products > Dreamweaver > Support > Using Cascading Style Sheets
Dreamweaver Icon Macromedia Dreamweaver Support Center - Using Cascading Style Sheets
Creating a class style

Now that you've defined styles for a few individual HTML tags and one combination of tags, examine the footer in the basic.html file. Is there a specific tag or combination of tags that describes it? It contains a link, and the footer itself is a paragraph, but both the P tag and the A tag could be used elsewhere in the document. There are three other P -tagged paragraphs in basic.html that probably shouldn't have the same appearance as the footer, and not all of the footer is a link. Therefore, neither a tag style nor a selector style will work for the footer.

Instead, mark this particular paragraph as one that should be styled in a certain way. CSS allows for this type of marking with class styles. You can distinguish a class style from other CSS styles by its name: a class style begins with a dot (for example, .footer , .green , or .runInHead ). When you create a class style, you don't need to put a dot at the beginning of the name, though; Dreamweaver does that for you automatically.

To create a class style:

1 If the Edit Style Sheet dialog box is not showing, click the Open Style Sheet button in the CSS Style palette to open it.
2 Click New, select the Make Custom Style (class) option, and type footer in the text field. Click OK.
3 From the Font pop-up menu, select Arial, Helvetica, sans-serif.
4 From the Size pop-up menus, select 9 and points.
5 Click OK.
Clicking Apply has no visible result in the Document window because you have only defined the class style thus far. You haven't yet designated which tags or ranges of text the style will apply to.
6 In the Edit Style Sheet dialog box, click Done.
To apply a class style:

1 Click anywhere in the footer text (for example, between the words "Visit" and "the").
2 In the tag selector at the bottom of the Document window, click the <p> tag.
The entire footer is selected.
3 In the CSS Style palette, click footer . (If the Auto Apply checkbox isn't selected, click the Apply button.)

The footer text appears in 9-point Arial. (It appears in Helvetica if Arial is not available on your system, or the default sans-serif font if neither Helvetica nor Arial is available.)
In the above procedure you selected an entire paragraph and applied a class style to it. If you open the HTML Source inspector (Window > HTML Source), you can see that Dreamweaver added a class="footer" attribute to the footer's P tag. You can also apply the footer style to any other tag on the page, and the text enclosed by that instance of that tag will take on the attributes of the footer class.

For example, if you click anywhere in the text "Some paragraphs," click the <h2> in the tag selector, and then apply the footer style using the CSS Style palette, the text changes size to 9 points. The size specified in the footer style overrides the size specified in the H2 tag style. (Technically the font specified in footer overrides the font specified in H2 as well, but since both are the same there is no visible effect in the Document window. If you were to edit the footer style and change the font to Times New Roman, Times, serif, you would see that "Some paragraphs" appears in the font specified in footer .) The text is still green because there is no color attribute specified in footer .

There are some cases when you want to apply a class style to a range of text inside a tag rather than to the entire text defined by that tag. For example, if a writer named Lori is working on a document with several colleagues, she can mark her changes by creating two styles called editsLori and removeLori . She might set the color attribute of both styles to red, and the decoration attribute of removeLori to strikethrough. When she adds words to the document, she can select the additions and apply the editsLori style; when she thinks some text should be removed, she can select it and apply the removeLori style. In each case, Dreamweaver inserts SPAN tags, with CLASS="editsLori" or CLASS="removeLori" attributes, around the selected text.

If Lori's colleagues agree with the changes, they can place the insertion point anywhere in each edited area, click the <span> tag in the tag selector to select the entire edit, and either click (none) in the CSS Style palette to return the text to the default paragraph style, or press Delete to remove the selected text.

To Table of Contents Back to Previous document Forward to next document