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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
