Applying Styles

Most styles take effect immediately in the current document and in any other documents linked to an external style sheet. If you redefine a tag, for example, acronym , then any time you use the acronym tag, the style is applied. Pseudo-class selectors such as a:link also are immediately applied to the selected elements in any linked documents.

Other styles are differentyour document doesn't use them until you add them to an element. For instance, after you define a style rule for a class, you must then apply that class to text in the document, and the same goes for ids.

To apply a style to a class:

1.

In a document, select the text to which you want the style to apply. or Place the cursor anywhere in a paragraph to apply the class to the entire paragraph. or Select a tag with the tag selector at the lower left of the document window.

2.

Do one of the following: In the CSS Styles panel, select All mode, then right-click the name of the style you want to apply, and choose Apply from the contextual menu ( Figure 5.34 ). Figure 5.34. Use the contextual menu to apply a class style rule. or In the Property Inspector, choose the style you want to apply from the Style pop-up menu ( Figure 5.35 ). Figure 5.35. Use the Style pop-up menu on the Property Inspector to apply a class style rule. or In the document, right-click the selected text, then in the pop-up menu, choose CSS Styles and then the style you want to apply. or Choose Text > CSS Styles, and in the submenu choose the style you want to apply ( Figure 5.36 ). Figure 5.36. A third way to apply a class style rule is to choose the menu Text > CSS Styles and then choose from the submenu.

External, Internal, and Inline: Look Ma, It's the Cascade

Styles can be external, internal, or inline. An external style resides in a separate style sheet file, one with a name that usually ends in . css . An internal style lives inside each individual Web page that needs it, located within style tags inside the document's head . And finally, there are inline styles; they live within the HTML tags themselves , and only apply to whatever's inside that tag.

Style rules cascade . This means that while multiple styles can cover a particular element, there are rules to determine which style takes precedence. The order of the cascade is first external, then internal (meaning in the document head), and then inline. When style rules conflict, the laws of the cascade determine how the conflict is settled.

In general, the closer a rule is to the element getting styled, the more power the rule has in the battle of conflicting style rules. The whole idea is a lot easier to understand with a specific example.

Let's look at the selector p . Suppose in your external style sheet you redefined p to be black, Arial, and 100% in size . Every p element in your document will be black, Arial, and 100%. No conflict there.

Into your conflict-free life comes a need to have just one document that uses your attached external style sheet display paragraphs that are black, Arial, and 90% in size. You know how to create a style for just one document, and you write an internal style making the p 90%. Now you have a conflict. Is a p element going to follow the rule in the external style or the rule in the internal style? The cascade goes from external to internal, so the internal rule is closer and has the power to overrule the external rule in this conflict. Conflict solved . Any p element in this one document will be 90% in size.

But you want one paragraph to be red, not black. So you write a class rule and apply it inline to the paragraph. Now you have an inline style and a new conflict. The cascade goes from external to internal to inline, so the inline style has the power to overrule both the internal rule and the external rule. Conflict solved. Any p element in this one class will be red.

To remove a style from a class:

1.	Select the text to which the class was applied. The tag selector in the lower left of the document indicates the presence of a class with a period; for example, <p.current> means that the current class has been applied to this <p> tag ( Figure 5.37 ). Figure 5.37. It's easy to identify elements with classes applied in the tag selector bar. The element has a period in the name, for example <li.current> .
2.	Do one of the following: In the Property Inspector, choose None from the Style pop-up menu. or In the document, right-click the selected text. In the pop-up menu, choose CSS Styles and then None ( Figure 5.38 ). Figure 5.38. Removing a class is as simple as choosing None from the CSS Styles submenu. or Choose Text > CSS Styles, and in the submenu choose None.
3.	The class is no longer applied to the selected text. However, the style is still available in the style sheet.

To apply a style to an id:

1.	In a document, select the text or tag to which you want to add an id .
2.	Do one of the following: In the CSS Styles panel, select All mode, then right-click the name of the style you want to apply, and select Apply from the context menu (Figure 5.34). or Right-click the element in the tag selector, and choose Set ID from the contextual menu ( Figure 5.39 ). Figure 5.39. Even the tag selector has a pop-up menu, giving you an easy way to add an id . or If the selected element is a div , use the Property Inspector to choose an id to apply from the pop-up menu ( Figure 5.40 ). Figure 5.40. The Property Inspector can be used to add an id , but only for divs.
3.	Check the tag selector to verify that the id has been applied by looking for the name of the tag followed by a # followed by the name of the id .

Tips

• When you remove a class from the selected text, it's still available to be applied elsewhere. Removing the class from the tag doesn't remove the rule itself from your page.

• If you select some text that isn't inside a container (a paragraph or div , for example), and apply a style, Dreamweaver will wrap a new span tag around that text and apply the new style to the span .

• If the pop-up menu in the Property Inspector doesn't show the id you want, it may be because that id is used elsewhere on the page. An id must be unique on the page, so if you want to move it from one place to another, remove it from the first place before attempting to apply it to the second.