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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access