Inheritance describes situations where (X)HTML elements inherit stylistic properties from a
parent element. By not declaring a particular CSS value for the child element, that child element
may in some circumstances inherit the CSS value given to the parent element. Where CSS
cascades, so (X)HTML inherits.
Inheritance is both a blessing and a curse, and is another very powerful methodology that
is often misunderstood. It can cause confusion across multiple style sheets—especially when
debugging your CSS, and is something to be aware of from the start. On the plus side, it can be
embraced to minimize the size of style sheets and markup, and enable wholesale changes to
many CSS rules with minimal work. Generally, inheritance is always happening to your (X)HTML
elements, and in most cases intervention is only necessary to control the inherited values for a
specific reason.
parent element. By not declaring a particular CSS value for the child element, that child element
may in some circumstances inherit the CSS value given to the parent element. Where CSS
cascades, so (X)HTML inherits.
Inheritance is both a blessing and a curse, and is another very powerful methodology that
is often misunderstood. It can cause confusion across multiple style sheets—especially when
debugging your CSS, and is something to be aware of from the start. On the plus side, it can be
embraced to minimize the size of style sheets and markup, and enable wholesale changes to
many CSS rules with minimal work. Generally, inheritance is always happening to your (X)HTML
elements, and in most cases intervention is only necessary to control the inherited values for a
specific reason.
Parents and Children
To understand inheritance, it pays to think of some (X)HTML elements as parents, and the
elements they contain as children. A parent owns a child, and passes what he or she knows
down to the child. In CSS, inheritance works in a similar way, except that it hands down style
values, and not advice about education or the opposite sex.
Moving through (X)HTML markup, it is clear that some child elements act as parents to
other child elements and so on, and thus a containment hierarchy develops. This containment
hierarchy is also referred to as the tree.
So How Does Inheritance Work?
To illustrate inheritance, let’s stay with headings. The <h1> heading in this example is styled
with the following very simple rule:
/* Top-level heading */
h1 {
color:#333;
}
The rule is pretty simple, and you are right to assume that the heading will be rendered
dark gray. Now let’s assume that in the (X)HTML the markup dictates that a few of the words
should be emphasized using <em>:
<h1>This is the greatest heading <em>in the world</em></h1>
At this stage, no CSS rule exists to manipulate the <em> element. Therefore, the text within
the <em> element will inherit the color from the h1 rule (its parent element) and will therefore
also be dark gray. To overrule this inherited color, simply define <em> in the style sheet:
/* Make emphasized text shine brightly */
em {
color:#F00;
}
Now all emphasized text sitewide will be rendered in red, and the element is no longer
inheriting its color from any parent element. Note that unless otherwise defined in your em
selector, other declarations will still be inherited. Thus, if you want just your emphasized text
to be twice the font-size it currently is, declare that specific font-size in your em rule. If you
defined this rule in the p rule, all the text would grow to twice the size.
dark gray. Now let’s assume that in the (X)HTML the markup dictates that a few of the words
should be emphasized using <em>:
<h1>This is the greatest heading <em>in the world</em></h1>
At this stage, no CSS rule exists to manipulate the <em> element. Therefore, the text within
the <em> element will inherit the color from the h1 rule (its parent element) and will therefore
also be dark gray. To overrule this inherited color, simply define <em> in the style sheet:
/* Make emphasized text shine brightly */
em {
color:#F00;
}
Now all emphasized text sitewide will be rendered in red, and the element is no longer
inheriting its color from any parent element. Note that unless otherwise defined in your em
selector, other declarations will still be inherited. Thus, if you want just your emphasized text
to be twice the font-size it currently is, declare that specific font-size in your em rule. If you
defined this rule in the p rule, all the text would grow to twice the size.
Inheriting the Body
It is strongly recommended that all serious CSS designs begin with a <body> element declaration in
the main style sheet. The <body> element is more than just a requirement of a well-formatted
(X)HTML page, it is also the parent of every visible element in your template (i.e., not those
within the <head>, which concern meta information and other items not displayed by the browser),
and every element can inherit from it.
<body>
<h1>Absolutely everything else!</h1>
<p>Yep, every visible element is contained within the body.</p>
<p>And so on.</p>
</body>
Therefore it makes sense to define all default CSS using body as the first selector in the first
style sheet. Later in the book, the body selector will be used to define key elements such as a
margin for the page, the background color or tiled image, the default font and font color, and
so on, as in this example:
/* Define all main values for the web site */
body {
margin:10px;
font-family:Helvetica,Arial,sans-serif;
background:#CCC;
color:#000;
}
As a result of these declarations, every other rule in the CSS will inherit the values unless
specified otherwise. So all headers, paragraphs, lists, and other elements will be rendered with
black text (color: #000) using the first available font from the suggested options on the end
user’s machine (font-family: Helvetica, Arial, sans-serif;) unless the selector for each
child element specifies otherwise, or that child element is housed inside a more immediate
parent (such as a column or container) that contradicts the inherited values from body.
Note that some style properties are not inherited from the parent element—the background
property being the main example. The child element does not actually inherit the light
gray background (background: #CCC;), but rather the parent element’s background appears by
default. In other words, the child element can be thought of as having the inherited font color,
but it should not be assumed that it has the same background color.
child element specifies otherwise, or that child element is housed inside a more immediate
parent (such as a column or container) that contradicts the inherited values from body.
Note that some style properties are not inherited from the parent element—the background
property being the main example. The child element does not actually inherit the light
gray background (background: #CCC;), but rather the parent element’s background appears by
default. In other words, the child element can be thought of as having the inherited font color,
but it should not be assumed that it has the same background color.
**■Note It is worth remembering that all elements have a transparent background unless you specify otherwise.
A Word of Warning
Much like the cascade through multiple style sheets, inheritance can cause severe headaches if
you do not keep track of what is going on. Often, CSS is as much about what you don’t do as
what you do. The following is a classic example of how inheritance can cause confusion.
Let’s say you are using nested lists (that’s at least one list within another list). The markup
might be something like this three-level list:
<ul>
<li>Top level one</li>
<li>Top level two
<ul>
<li>Second level one</li>
<li>Second level two
<ul>
<li>Third level one</li>
<li>Third level two</li>
</ul>
</li>
<li>Second level three</li>
</ul>
</li>
<li>Top level three</li>
</ul>
You might then apply some basic CSS to that list to control font-size, as follows:
/* Font size for list elements */
li {
font-size:2em;
}
Your first thought might be that this selector would ensure that all text will be 2em in size,
but this is not the case. Each nested list will inherit the font-size value from the one above, and
as the em is a relative measurement (more on that later in the “Ems” section), this will result in the text size being doubled with every nested list. So, a list item within another list will inherit
the font-size rule and become twice as big as its parent.
In Chapter 6, you will learn all about lists and how to apply CSS correctly to avoid such a
hazard, but this is a fine example of how inheritance can cause problems. The flip side of this
is that there will be many times where such powerful inheritance can also be used to do the
work of several targeted selectors, and it’s all about knowing when it’s happening and when it
needs to be tamed.
**■Caution “Where on earth did that underline come from?” Inheritance can confuse anyone working
across multiple style sheets. Be very careful not to duplicate an existing selector unwittingly. If in doubt,
search your style sheets and ensure there won’t be a conflict. It pays to develop your own system of control
here, perhaps noting all ID/class names you’ve used in a separate text file or notepad.
No comments:
Post a Comment