The term CSS cascade refers to the decision process, the software within web browsers that decides which of the many CSS (cascading style sheet) styles to apply to each part of a web page. It is complex because there are many places that styles are written, and there are errors, conflicts, and duplicates to contend with, not to mention the hierarchy of browser, user, and author rights that always exists. The browser's software has to decide which style to use for every format on the page.
There are several places that the software always looks for styles. The browser itself has the default styles located in its own client style-sheet, and these are used only when no other formats have been specified. User-styles are contained in style sheets within the user's computer. Author-styles arise from three locations and are treated as one category; styles written in the head section of the web-page, all of the imported style-sheets, and the in-line styles within the body-content of the page. In addition to these three categories, both the user and author styles can be marked in a way that gives them additional priority, the so-called important marking, and these can be considered as separate categories, with distinct priorities, making five in all. See the figures below for consolidation on these five main sources.
Web pages are text files, and the formats to apply are notified to the browser software by the addition of special pairs of markings called tags. For example <p> would denote that paragraph formats were required between that tag and its closing tag, </p>. When the software encounters such a tag, it looks for style declarations within the five category spaces, (those mentioned above), that contain the paragraph tag, and lists them in the order that it finds them. There is a full set of tags for every purpose and the software makes such lists for every tag-pair, or HTML element as they are called, that it finds on the web-page. Having made lists of the relevant styles for each element on the page, the software must then decide which of the many to apply.
Before the introduction of CSS style-sheets the formatting of web page elements was carried out with so-called HTML attributes. These are styling rules, specific for each HTML element, and they are themselves capable of formatting a page. They were, and are available for use in web pages, and can be added to tags in much the same way as CSS in-line styles. Some HTML attributes, (STYLE=, ID= and CLASS=), have been designed to interface with CSS; these allow the writing of in-line styles, and the declaration of IDs and CLASSES within the tags of the page.
Because HTML attributes and CSS styles might be found together in web pages it is as well to comment on their relative precedence in use. CSS values supersede simple HTML attribute values when they apply to the same style on the same element. In fact, it is only when no CSS style has been expressed that an HTML attribute could apply its formats.
Some other HTML attributes have long had no convenient equivalent in CSS, so are still much used. Examples include the display of block elements like tables at a page's center with the attribute expression align=center, and other attributes for the merging of table cells.
The CSS cascade applies only to the resolution of CSS styles, while listings of HTML attributes and their element defaults are to be found in texts on HTML code itself.
Figure 1: The CSS terminology for a typical styles block. It describes the format to use for an unordered list found within a division block element.
The cascade primarily makes use of the notion of precedence. That is to say, it depends on an in-built set of priorities at each of the main stages of the selection process. It does this in two main stages; it sets the sources (origins) of the styles into a prioritized list, for example, normal author's styles have more precedence than normal user styles, and the browser's defaults least of all. Then within these individual style-locations, some styles are given higher priority than others.
The browser works its way through all of the web-page's element-tags, one by one, and uses their tag-names to find any style declarations that might apply to them. Say the browser has come to a paragraph tag, a tag composed of a letter p within angled brackets. The browser checks all of the likely sources of styles for declarations written with the p inclusion, simple or compound (mentioned with other terms). These include user styles, and author styles, (itself comprised of downloaded style-sheets, head-styles, and in-line styles). Additionally, if there are class or id declarations within the tag, then their styles are found and included. The browser keeps the relevant styles that it finds in one of five categories according to where they were found, (so-called origins or sources).
An important point is that the browser always lists styles within a source category in the exact order that they were encountered in its travels from top to bottom of the web page, and from the top to the bottom of each style-sheet. It also honors the style sheet sequence found in the heading of the web page when adding to its lists. These latter facts have consequences for the browser's resolution of conflicts. Recall again that all of this listing activity takes place for each tag on the page.
Style declarations can have a special marking to give them added priority over normal declarations; they use the !Important keyword to identify them, and so they are called !Important declarations. In making the separate categories the browser segregates the !important declarations from any normal declarations to make the five origin-categories in total. Notice that the browser takes all of the head styles, the external style sheets and in-line styles as one composite set of author's styles. The browser recognizes the following source categories, in descending order of precedence, when searching for relevant styles.
Figure 2. A CSS styles cascade. Notice that the user's style declarations have the highest precedence provided that they carry an !Important marking. Notice also that sources with a lower precedence can impose on the outcome, but only if higher sources have not specified for that property.
The user's !Important style declarations. These style expressions consist of all user style-sheet entries with the !Important keyword appended to them. User style-sheets are local to the computer, and identified to the browser with a path statement in its settings.
The author's !Important style declarations. The three style sources attributable to the author are in the first instance treated as a single group. These are; in-line styles, document head styles, and linked style-sheets. Again, this set consists only of those declarations where the !Important keyword is added.
The author's Normal style declarations. Those in the author's set without an !Important marking.
The user's Normal style declarations. Those in the user style-sheet without an !Important marking.
The Browser default styles. Styles in the User Agent (UA) Style Sheet[1] and the selectable default settings of the browser..
Within each of these five origins (see the list above), the relevant styles are then assigned weights according to their specificity for the tag in question. Specificity in this context means the extent to which the style definition has narrow latitude; for example, when finding styles for a paragraph that is nested within some part of a table, a style-sheet entry that is written specially for that purpose would be given a higher specificity than a more general style entry for paragraphs; (more on this later). Continuing with the paragraph example, after filtering for specificity within each source-list there may still be several competing styles in some or all of the source-lists for the same paragraph, so the precedence of the origin levels themselves is used to decide which of them will be applied in this paragraph's final format.
Notice that in the above hierarchy that the user's styles with the !Important keyword marking are given the highest priority of all, and that they can only fail by omission. That is to say, other styles can be used but only when a format was not specified there. In general the styles selected to represent an origin-level in the cascade can only impose on the eventual outcome if no source above it in priority has set a value of its own. (Refer to Figure 1 for the structure of a typical style-block, and Figure 2 for a depiction of the final selection process.)
A selection of brief tutorials is given below. The intention is to provide short pieces that instruct in the basics of the subject matter, rather than indulging in lengthy discourse.
In general, a selector is the left-most part of a style expression, up to but not including the first curly bracket. It is sometimes just the text-part of the HTML tag whose style is being defined. It can also be compounded with other terms too, and a few examples of the most common tag selectors is given here. A simple style with a paragraph tag's selector looks like this:
p {font-size: 10pt;}
and the above style could be applied automatically to all simple paragraphs on a web-page. Sometimes the selectors are grouped to save typing; then the same styles can be made to apply to the entire comma-separated group, like this:
p, div, table, ul {padding: 1em}
When we intend to write declarations for every tag on the page, we can use the universal selector, the asterisk, like this:
* {font-family; Arial, Sans-serif}
We can also conditionally style paragraphs. Say that the styles must only apply when the paragraph tags are nested within div tags, we can write:
div p {line-height:1.8em;}
Class Selectors
A class-selector is a selector that is allied with a class. That is, the class name must be declared within the associated tag in the document for the styles to apply. It has more specificity than a simple selector, but less than an ID selector. The class can be used as many times as necessary throughout a page. In the style-sheet we write:
p.firstpara {font-family: Arial;}
And to apply these styles to a tag in a document we must write in the HTML text:
<p class="firstpara"> Some paragraph text goes here </p>
ID Selectors
These can only be used once in a page. They have the greatest specificity, second only to inline-styles. We can write in the style-sheet:
#Tailpiece {color:gray;}
and we call the ID styles into use on the HTML page by typing:
<div id="Tailpiece" >This is the text </div>
Contextual Selectors
These describe the styles to apply when tags are nested within one another. In this example the style will only be applied to paragraph tags within division tags. We write:
div p {padding: 1em;}
and we use it on a page with:
<div><p>The is the text</p></div>
or combining these ideas, here are the styles for classes and IDs in a paragraph that is nested within a div:
div p.firstpara {background:green}
div p#tailpiece {font-size:30pt}
Attribute Selectors
These are selectors that have an attribute in square brackets modifying their action in a conditional way. To color all items with a title of "CSS Work" we might write in the style-sheet:
[title=CSS Work] {color: blue}
Pseudo Classes
These are classes that condition behavior, like that of selecting links on the page. We might write:
a:active {color:purple}
Pseudo Elements
These are elements such as 'first-line' and 'last-line' that allow additional control in the page. To make the first letter of all paragraphs bold, we could write:
p:first-letter {font-weight:bold}
Important styles
These are declarations in user or author style-sheets with high priority. See page for details:e.g.
Specificity relates to the extent to which declarations lack generality; the extent to which they apply to a tag on the page as opposed to their applying to tags in general. The method of deciding such a matter has been developed to a considerable extent.
The method that is used calculates a weighted sum that represents the specificity. The way to calculate specificity is as follows:
For any given style-sheet entry, examine its selector, for example, ''div.p''. The selector is sometimes simple, having only one element, or like this, complex, with more than one. Construct a value for its specificity by adding to a total as follows:
For a universal selector (*) or an inherited value, add zero to the specificity total.
For an in-line style, add 1000 to the total. These are found only on the document.
For every ID selector mentioned, add 100 to the total.
For every class, pseudo-class, or attribute, add 10 to the total.
For every simple tag element and pseudo-element, add 1 to the total.
The highest value of specificity among competing style declarations within any one level results in its representing that level in the overall cascade. (See the graphic within the main page).
This drop-box provides a worked example for the resolution of styles, starting from inspection of the HTML entry and proceeding through specificity estimates to the displayed style choices.
A Test Web-page
It is assumed that the browser is attempting to resolve the styles for the paragraph tag in the body-section of the HTML page-listing below.
<!-- This is the test web-page - to resolve <p> styles -->
<html>
<head>
<title>Test_the_Precedence</title>
<style type="text/css">
p {font-size:2em;font-family:courier;}
</style>
<link rel="stylesheet" href="Ext_Author.css" type="text/css" media="screen">
On inspection of the paragraph tag above, it is apparent that it might be affected by any or all of the styles defined for the tag, the ID 'bigpara', the class 'TahomaClass', the inline-style, or any relevant styles found that relate to nesting the paragraph tag itself.(<head>, <body>, or <div>). In addition to the linked style-sheet that is referenced in the document, there is always the default style-sheet of the browser, and it could have a high-precedence user style-sheet too.
Style Origins to Consider
In fact, the possible style sources or origins are fivefold, and styles relevant to this paragraph tag might be found in any of them. The styles found in these places might contradict one another, or might be mis-spelled, and some usually are; the cascade's methods must resolve any confusions that writers might make. The origins of styles to consider are listed here, in order of descending precedence:
The user's !Important style declarations. These style expressions consist of all user style-sheet entries with the !Important keyword appended to them.
The author's !Important style declarations. The three style sources attributable to the author are in the first instance treated as a single group. These are; in-line styles, document head styles, and linked style-sheets. Again, this set consists only of those declarations where the !Important keyword is added.
The author's Normal style declarations. Those in the author's set without an !Important marking.
The user's Normal style declarations. Those in the user style-sheet without an !Important marking.
The Browser default styles. Styles in the browser's user agent style-sheet and the user-selectable default settings of the browser..
Within each of the above categories (origins), the relevant styles for the paragraph are located, but are not permitted to overlap or cross category boundaries. Then, still within their own categories the styles are filtered to find a set with the highest specificity. (See the drop-box in the main page on specificity.) For example, there might be several declarations for the tag's color at each level, but only one color value can be returned from each category. In this way each category performs selection at its own level before further resolution of these results in the cascade.
Of course, not every category will find a color style, because it might not have been specified. Some will find competing values of equal specificity, and duplicate entries.
Assume for now that all of the relevant styles have been found, then separated to place them in their precedence categories (origins). These relevant style declarations are listed below. Notice that the entries are color-banded to separate the categories, and that the items of greatest specificity have been marked. The selected styles from each category are displayed on the graphic that follows the listing.
The Relevant Styles to Filter
/* From the browser UA style-sheet defaults */
p
{
margin: 1em 0; (max margin specificity= 1)
}
/* From the user's normal declarations */
div p
{
font-family: Times; (max font-family specificity= 2)
font-style: italic; (max font-style specificity= 2)
font-weight: normal (max font-weight specificity= 2)
}
div
{
color: blue; (max color specificity= 1)
font-family: garamond;
}
div p.times
{
font-family: Arial;
}
/* From the author's normal declarations */
p (1 of 2 duplicates)
{
font-size: 2em;
font-family:courier;
}
p (2 of 2 duplicates)
{
font-family: Garamond; (max font-family specificity= 1)
font-weight: normal;
{
div p
{
font-weight: bold; (max font-weight specificity= 2)
}
div p.bigpara
{
font-size: 10px;
}
div p#bigpara
{
font-size: 16px;
}
<p style="font:size:20px;"> (max font-size specificity= 1000)
/* From the author's !Important declarations */
p
{
font-family: Calibri !important; (max font-family specificity= 1)
font-style: normal !important; (highest font-style specificity= 1)
color:blue !important;
}
div p
{
color:black !important; (max color specificity= 2)
}
/* From the user's !Important declarations */
p
{
font-size: 30px !important; (max font-size specificity= 1)
}
p.TahomaClass
{
font-family: Tahoma !important; (max font-family specificity= 11)
}
Summary of Selections
The styles now listed in each category are subjected to the precedences of the cascade to decide which of them should be used to display the text of the paragraph. When the specificity selections from the relevant styles are returned, they are related to their categories in the way of the graphic below.
The starting entries for these levels were found by first selecting for highest specificity, and by returning the latest of any duplicates with the same specificity. Notice that sources with a lower precedence can impose on the outcome, but only if higher sources have not specified for that property.
Notice from the graphic that the styles with greatest specificity found in the above panels are the ones shown at each level. They are further subject to the priority (or precedence) given to the categories themselves. In the graphic, it is clear that an origin can only influence the outcome if no origin with higher precedence than it has proposed a value. The selections use this algorithm until the style set for display is found. The process is repeated for the properties of every tag in the web-page.
The emergent formats for this example, reduce to a paragraph set that appears equivalent to:
When styles are written with errors in spelling, then the style-rule or the declaration is ignored in whole or in part, depending upon the extent of the error.
Other confusions can arise owing to the sequence of the browser's source handling. Not surprisingly, the browser processes the web page itself, its heading styles, the list of its referenced style-sheets, and each individual style-sheet, from the top down, and when there are contesting styles of equal specificity within a source level, (or indeed duplicates), then the ones encountered by the browser last will prevail. (Authors making a quick change to a style-sheet might therefore make it at the end of the last referenced sheet, or in a user sheet, rather than the one that is referenced first in the heading).
This further means that the choice between two competing styles with equal specificity might have variable outcomes, depending upon whether the document's head styles were written above the links to the style-sheets for importation, or below them on the page. It also means that when there are several linked, external style sheets listed in the head of the HTML document, that their sequence might be significant to the eventual format.
Although in-line styles are given such a high specificity, and always supersede other NORMAL author styles, they still cannot prevail over IMPORTANT user or IMPORTANT author styles.
The example has deliberately reduced the number of styles for the paragraph, since there would otherwise be too many properties to illustrate in graphics. The principles illustrated by the examples are however sound, and representative of the methods used by the browser in resolving the cascade.
