10.8 Further CSS Topics | Dreamweaver in a Nutshell

In the following sections, we've collected some important topics that provide advanced information for interested readers.

10.8.1 Cascading and Inheritance

Cascading stylesheets allow you to establish a hierarchy of styles. Styles are inherited from surrounding tags. For example, if you apply a CSS style using a body type selector, the style affects everything within the <body> tag of the document. If you then apply separate styles to, say, <p> tags within the body, they'll be formatted using a combination of the specified styles.

Consider Example 10-5. It shows an embedded stylesheet that defines type selectors for the <body> and <p> tags and a class selector ( .pgraph ). Note that the pgraph style is applied to a <p> element in the HTML document.

Example 10-5. An embedded stylesheet defining stylized text within an HTML document

 <html><head><style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif;         color: #0000FF}  p { font-size: 10pt} .pgraph { font-family: "Times New Roman", Times, serif;            font-size: 12pt; font-style: italic} a:link { background-color: #003399} --> </style></head> <body bgcolor="#FFFFFF"> <p class="pgraph">This is pgraph text</p> <p>But this text isn't!</p> </body></html>

In Example 10-5, what format will be used for the text, "But this text isn't!" enclosed in <p> tags? It will be 10pt, blue, Arial because it inherits the font and color from the body style rule and uses the point size defined in the p style rule.

What about the format of the text, "This is pgraph text"? It will be 12pt, italic, blue, Times New Roman. The font-family and font-size declarations in the .pgraph style rule override those in the body and p style rules, and the italic style is added on top. Because the .pgraph rule doesn't define its own color, it inherits the text color defined in the body rule.

This example illustrates two important principles and gives us a chance to explain a few more:

Formatting styles are inherited as described in the preceding scenario.
When attributes do not conflict, they are all applied.
When attributes do conflict, the innermost tag's attributes have precedence . Conflicting properties are not "averaged" together. For example, if there are two color attributes, the innermost overrides the otherthe two colors are not combined or blended.
Type selectors (such as body and p ) redefine the attributes of all tags in the page (or for all pages that use the shared external stylesheet) automatically.
Properties defined in class selectors (i.e., CSS styles such as .pgraph ) always override matching (conflicting) properties defined in type selectors. This hierarchy allows type selectors to be applied universally but permits the use of class selectors for exceptions.
If two style rules have the same precedence, the last one applied wins. For example, if two stylesheets define conflicting rules, the last applied stylesheet overrides earlier stylesheets. Styles within the embedded stylesheet take precedence over styles in external stylesheets.
HTML formatting applied using, for example, the Text Size menu or the Property inspector trumps CSS styles. The HTML font size specified here would override the CSS property of a similar name :
```
 <p class="pgraph">This is <font size="7">pgraph</font> text</p> 
```

I've glossed over some intricacies such as using inline styles and the !important modifier, but this overview should help you considerably.

Remember, you can attach multiple external stylesheets to a single HMTL document using multiple <link> statements.

 <link rel="stylesheet" href="mysheet1.css" type="text/css"> <link rel="stylesheet" href="mysheet2.css" type="text/css">

Using the @import directive, an external stylesheet can even refer to a different external stylesheet (see Section 10.3.2 earlier in the chapter for details on the difference between <link> and @import ).

Dreamweaver tries to prohibit you from creating conflicting style rules, although you can do so by attaching pre-existing external stylesheets. If you use multiple stylesheets in the same document, try to avoid defining redundant or conflicting styles. Otherwise , the styles of the last loaded external stylesheet take precedence over those from earlier external stylesheets (and the embedded styles take precedence over external styles).

10.8.2 CSS Element Selection Patterns

You can use the Use CSS Selector option in the New Style dialog box (see Figure 10-5) to enter the CSS selectors shown in Table 10-11.

These selectors allow you to define styles that are applied to a tag only when it appears inside another tag, or styles that are applied only when a certain attribute is set within a tag.

Unless otherwise stated, these selectors are supported in NN4, NN6, IE4, and IE5.x on both Macintosh and Windows.

Table 10-11. CSS element selector patterns

Pattern	Selector	Matches	Example
*	Universal	Any element.	`* {color: red}`
`elem`	Type or Element	Elements named `elem.`	`p {color: red}`
. `classname`	Class	Any element with a `class` equal to `classname` ..	`.pgraph {color : red}`
# `idname`	ID	Any element with an `id` equal to `idname` . Buggy in NN4 and IE4/5.x.	`#pgraph {color : red}`
`parent` `descend`	Descendant	Elements named `descend` within elements named `parent.`	`div p {color: red}`
`parent` > `child`	Child	Elements named `child` that are direct children of elements named `parent.`	`div>p {color: red}`
`first` + `second`	Adjacent	Elements named `second` immediately preceded by elements named `first` .	`div + p {color: red}`
`elem` [ `attrib` ]	Attribute	Elements named `elem` containing the attribute `attrib.`	`div[align] {color: red}`
`elem` [ `attrib` = `value` ]	Attribute value	Elements named `elem` containing `attrib` set to precisely `value` .	`div[align="left"] {color:red}`
`elem` [ `attrib` ~= `value` ]	Attribute single value	Elements named `elem` containing `attrib` set to a space-separated list of values containing word `value.`	`img[alt~="Fig"] {margin:5px}`
`elem` [ `attrib` = `value` ]	Attribute hyphenated value	Elements named `elem` containing `attrib` set to hyphenated words starting with `value` . First supported in NN6 and IE5.	`img[alt="Fig"] {margin:5px}`

In addition to the prefab pseudo-classes, discussed earlier under Section 10.4.3.1, you can use the Use CSS Selector option in the New Style dialog box (see Figure 10-5) to enter the CSS pseudo-classes shown in Table 10-12.

Table 10-12. CSS element pseudo-classes

Pattern	Pseudo-class	Matches	Example
`elem` :first-child	`:first-child`	`elem` (when it is the first child element of its parent)	`div:p {color: red}`
`elem` :link `elem` :visited	`Link`	`elem` (if it is the source of a visited or unvisited hyperlink)	`a:link {color: red}` `a:visited {color: red}`
`elem` :active `ele m` :hover `elem` :focus	`Dynamic`	`elem` (when the user clicks a link, rolls over a link, or gives focus to an element)	`a:active {color: red}a:hover {color: red}a:focus {color: red}`
`elem` :lang( `x` )	`:lang( )`	`elem` (if it is in the human language specified by `x` )	`div:lang(en)`

10.8.3 Downloading Fonts with CSS2

To enforce the use of the same font for all operating systems, you can use the @font-face CSS rule. The src attribute can be used to download fonts. (Such a technique may be overkill for small amounts of text. You can also use Flash Text for fancy fonts, which Flash can embed seamlessly. However, Flash is impractical for large amounts of text and Flash text is not automatically indexed by search engines.)

Example 10-6 shows a sample stylesheet that uses two @font-face rules.

Example 10-6. Downloading a font using a stylesheet

 <style type="text/css" media="screen, print">       @font-face { font-family: "comic sans";                    src: url(http://mysite.com/fonts/comicsans)}       @font-face { font-family: "jester";                    font-weight: bold;                    font-style: italic}       h1 {font-family: "comic sans"}       h2 {font-family: "jester", serif} </style>

When a browser encounters a stylesheet, it processes the rules that control the rendering of each heading. In Example 10-6, the h1 and h2 type selectors set <h1> elements to the Comic Sans font and set <h2> elements to Jester.

Web browsers supporting CSS2 (IE5.5, NN6, or later) examine the @font-face rules to find the closest matching font. In Example 10-6, a CSS2-compatible browser downloads Comic Sans from the specified URL if the font isn't already installed locally. On the other hand, if Jester isn't installed, the browser uses the rules to find the closest available font or uses synthesis to create a similar font from the provided descriptors. CSS2 allows agents to ignore any font-descriptor that is not recognized or to add custom descriptors to improve font substitution, matching, or synthesis.

Although the @font-face rule requires a CSS2-compatible browser, earlier browsers (prior to IE5.5 and NN6) are not affected adversely. A CSS1-capable browser uses the default sans serif font if Comic Sans is not installed, and it uses the default serif font if Jester is not installed.

That concludes the discussion of CSS in Dreamweaver. I hope you enjoyed the ride. The next chapter covers Dreamweaver's HTML styles, which are thankfully much simpler than CSS.