ONLINEPROOFINGSERVICE.COM

file transfer - www.onlineproofingservice.com

Menu


Chapter 8: Cascading Style Sheets 217 Conflicting styles Be careful when you apply more than one style to the same element (something thats


easier to do than you may realize). This advice holds true for CSS styles as well as style attributes applied via HTML, such as font-styling properties. The styles may conflict, and because browsers arent all consistent in the way in which they display styles, the results can be inconsistent and undesirable. For the most part, Netscape and Internet Explorer display all attributes applied to an element, even if theyre from different style rules, as long as the styles dont conflict. If they do conflict, browsers prioritize styles depending on how the styles have been defined and the order in which they appear. The method for determining this priority is what cascading is all about. Heres an example to help you get the idea. You define a custom style named .headline with red text thats not bolded, and you apply it to a block of text on the page. Then you decide that you want that text to be bold, so you apply the bold tag independently by selecting it from the Properties inspector. You have now used two different types of styles. Because they dont conflict, all of them take effect, and your text becomes bold and red. If, however, you apply another color to the same block of text - blue, for example - using the Properties inspector, you have a conflict. Understanding how browsers handle these conflicts is important. The basic guideline is that CSS rules get the highest priority, followed by HTML presentation attributes (for example, align, color, face, and bgcolor), followed by the browser default settings (font type and font size, for example). CSS rules always get the highest priority in any scenario, and internal style sheets get priority over external style sheets. When two CSS styles conflict, priority is determined through the order of cascade. Although this concept can get complex, one guideline to follow is that the style that was listed most recently usually has priority. But instead of bending your brain to figure out how rules cascade, you generally should avoid creating styles that conflict. Either go back and redefine an existing style, apply regular HTML tags individually, or create a new style. Remember that you can use the Duplicate option by right-clicking (Control+click on a Mac) a style in the CSS panel to create a new style with the attributes of one that already exists, and then make minor alterations. (For more on editing existing styles, see the following section.) In cases where you do end up with conflicting styles, the best practice is to view your page in a Web browser to see how the style looks to the user. Although Dreamweaver 8 has greatly improved its rendering of CSS, Dreamweaver still doesnt always replicate the browser display perfectly. 218 Part III: Advancing Your Site Editing an existing style You can change the attributes of any style after you have created it by editing its style definitions. This capability is a major advantage of Cascading Style Sheets: You can make global changes to a page or even to an entire Web site by changing a style you applied to multiple elements through the use of an external style sheet. Be aware, however, that everything you defined with that style changes when you make your edit. Remember that you can also create new styles by duplicating an existing style and then altering it. Then, you can apply that new style without affecting elements that are already formatted on your pages with the original version of the style. To edit an existing style, follow these steps: 1. Click the CSS button in the Properties inspector.