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.
Create a new HTML5 file with your text editor.
Your editor may not support HTML5 files. Any text file will do.
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
The second style is more specific. It sets the characteristics for
tags that appear as a child of a
. Consequently, inheritance rules say that this style will take precedence when the rules of inheritance are met, which means the font-style and font-size styles will be different in this case.Save the file as Inheritance.HTML.
Load the Inheritance example into your browser.
You see the role that inheritance and cascading styles play.
Create a new CSS file with your text editor.
Your editor may not support CSS files. Any text file will do.
Type the following CSS style information.
body { text-align: center; color: DarkRed; background-color: Khaki; border: inset; border-color: Green; } h1 { border: outset; border-color: Brown; } p { text-decoration: underline; font-family: "Times New Roman", Times, serif; font-style: oblique; font-size: xx-large; }The
tag appears as the topmost object in a page, so the changes noted in the body style should affect everything not specifically overridden later. In this case, the example changes the text alignment to center and places a dark red border around any content. The background color is also changed. Finally, the style adds a green border around every object.The h1 style overrides any body styles. In this case, that means modifying the border styles.
The p style also overrides any body styles. However, there aren’t any properties that are the same in this case, so the p styles enhance the styles inherited from the body style.
Save the file as Inheritance.CSS.
Add the following code to the
area of the HTML file.<link rel="stylesheet" href="Inheritance.CSS" />
This code creates the link between the HTML file and the CSS file.
Save the HTML file and reload the page.
Notice that all the expected changes are in place. For example, the text is centered, except for the one paragraph that has an inline style overriding the centered text. The heading text is now in dark red — the paragraph text overrides that color selection, so it remains blue. Even though there is an external p style for the size of the text, the internal style overrides it.
You should notice something else about the example. The body contains an inset border of the correct color and the heading contains an outset border of the correct color, because it has overridden the default.
However, the paragraphs have no border. At one time,
tag changes affected the entire document and some of them still do. However, other changes affect only the body and not other block elements. Block elements don’t inherit some settings from the body style.Delete the h1 style from the Inheritance.CSS style sheet.
You can also comment out the h1 style by adding the starting (/*) and ending (*/) comment symbols to it like this:
/* Commented out to show block settings. h1 { border: outset; border-color: Brown; } */Save the CSS file and reload the page.
Notice that the heading now lacks a border. It turns out that the heading wasn’t overriding the body-level border — it was adding a new border. Never assume that a body style will carry through to other block-level styles — some settings simply don’t. When you find that your page doesn’t look as you expected it to look, try configuring the setting at a lower block level.
You may also see some style sheets that access the html style, which affects the tag that contains the
tag. It’s true: You can work with the html style to achieve some effects.Add the html style shown here to the Inheritance.CSS style sheet.
html { border: outset; border-color: Green; background-color: White; }Save the CSS file and reload the page.
You rarely have to rely on the html style because it simply isn’t necessary. The html block is a level above the body block, as shown by this example. The html block doesn’t give you access to anything that the body block can’t change in most cases, except for special effects like the one shown here.
