Further CSS Topics

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

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 ...

Get Dreamweaver in a Nutshell now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.