HTML and CSS Reference
In-Depth Information
Style Precedence and Specifi city
Many factors determine how the importance of each style is calculated. But as a general
rule of thumb,
all other things being equal, the more specifi c style is applied instead of
the more general
. Thus, a style applied to a specifi c paragraph is given more importance
than a general style applied to an entire Web page, and a style applied to a section of
text within that paragraph has more importance than the style for the entire paragraph.
For example, the following set of style rules would set the text color of the Web page to
black, except for text within the
header
element:
body {color: black;}
header {color: red;}
Specifi city is only a concern when two or more styles confl ict. If the style rules involve
different properties, there is no confl ict and both rules are applied. If two style rules have
equal specifi city, and thus equal importance, then the one that is defi ned last in the style
sheet is the one used.
Style Inheritance
An additional factor in applying a style sheet is that properties are passed from a parent
element to its children in a process known as
style inheritance
. For example, to set the
text color of a page to blue, you could apply the style
body {color: blue;}
and every element nested within the
body
element (which is every element on the Web
page) would inherit this style. This means that the text of every heading, every paragraph,
every numbered list, and so forth would be displayed in blue unless a different text color
were defi ned for those specifi c elements. Thus, the style rules
body {color: blue;}
h1 {text-align: center;}
would result in the
h1
heading text appearing in blue and centered even though only the
text alignment is specifi cally set within the style rule for the
h1
element.
Not all properties are inherited. For example, the style property above that defi nes the
text color for the page body has no meaning if applied to an inline image.
The fi nal rendering of any page element thus becomes the result of multiple style
sheets and multiple style rules. You may have to track a set of styles as they are passed
from one style sheet to another. For example, browsers typically display all
h1
headings
in a large bold black font and left-aligned on the page. The following rule applied within
an external style sheet modifi es the color of
h1
headings on the Web site, but does noth-
ing to change the default settings for size, weight, or alignment:
h1 {color: red;}
The combination of the internal and external style sheets results in all
h1
headings
being displayed in a large bold red font and left-aligned on the page. However, if a par-
ticular heading is formatted with the inline style
<h1 style=”text-align: center;”>Sunny Acres</h1>
then that
h1
heading will be centered, displayed in red (defi ned in the external style
sheet), and rendered in a large bold font (defi ned in the browser's default style sheet). The
fi nal appearance is thus a result of a combination of several styles drawn from multiple
sources. Many Web browsers now include developer tools to allow page designers to
track each style back to its source.
