HTML5 & CSS3 For Dummies
Book image
Explore Book Buy On Amazon

Understanding the rules of inheritance in CSS3 helps you create interesting sites that require a minimum of maintenance. By following these rules, when maintenance is required, you normally have to make just one change, rather than changing hundreds of items individually. It pays to experiment, though, so you can understand the full effects of inheritance and the effects of using multiple styles together.

  1. Create a new HTML5 file with your text editor.

    Your editor may not support HTML5 files. Any text file will do.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
<html>
<head>
 <title>Inheritance Example</title>
 <style>
 p
 {
  font-family: Arial, Helvetica, sans-serif;
  color: Blue;
  background-color: Yellow;
  margin: 0;
  font-style: italic;
  font-size: medium;
 }
 div p
 {
  font-style: italic;
  font-size: larger;
 }
 </style>
</head>
<body>
 <h1>An Example of CSS Inheritance</h1>
 <p>A paragraph outside a
 <span style="font-family: monospace">
  <div></span>.</p>
 <div id="Container"
  style="text-align: left;">
 <p>A paragraph inside a container.</p>
 </div>
</body>
</html>

    This page contains a number of inline styles, which always have the highest inheritance precedence. For example, the provides a font-family of monospace for the

    tag part of the sentence. You could accomplish the same thing by assigning the a class attribute for code, but this example uses the inline style instead.

    The

    uses an inline style to set the text-align style to left. Because the default style sets the alignment to left, you won’t see any difference. However, if another style change modifies the text alignment, this style will take effect and prevent movement of this paragraph.

    The internal style modifications all appear within the

About This Article

This article can be found in the category: