Cascading Style Sheets/Inheritance Rules

Summary

The term CSS cascade refers to the decision process, the software within web browsers that decides which of the many cascading style sheet (CSS) styles to apply to each part of a web page. It is complex because there are many places that styles are written. There are errors, conflicts, and duplicates to contend with, not to mention the hierarchy of browser, user, and author rights that always exists. Nonetheless, the browser's software has to decide which style to use for every format on the page, and has to build a reasonable page even when no useful styles have been provided.

This page provides both an overview and a detailed example of a basic cascading process, and although it is capable of imparting detailed knowledge in the process, is not specifically intended to teach the making of web-pages or their style-sheets.

Web File Basics

Before describing the workings of the cascade, essentially just a part of the browser's functions, it might be as well to recall the basic features of the browser's surroundings.

A web page is the result of opening a certain text file with an .htm suffix. The file can be written in a simple text editor. It resides on a distant computer that works as a server, but can also reside in some folder of the local personal computer (PC). When its address is supplied to the browser, the file is downloaded to the browser cache, a temporary storage place on the PC. The .htm file is sometimes referred to as the web-document.
The web-document has markings in it to help with its formatting, and it is the job of the web browser to apply the styles. The web-document has pairs of markers called tags that surround the text that is intended for formatting. The tags indirectly identify the formats by saying what kind of page structure it is to be; for example, lists (<li></li>), main headings (<h2></h2>), sub headings (<h3></h3>), ordinary paragraphs (<p></p>), or perhaps table cells (<td></td>) . All of these different elements of the page can have different formats.
The tags are a part of the language HTML, Hypertext Markup Language, although other languages can be used. The tag names in the web page, for example the p in <p>, are listed in style-sheets, alone or with other terms, and it is these style-sheet selectors that list the descriptions of the intended formats. That is to say, the browser can find the correct style-sheet selector to format an element because their names are predictably similar. The document element is said to be the intended target for that selector's styles. The file type that lists these formats is called a Cascading Style Sheet (CSS).
A style-sheet is just a text file with a .css suffix, and can be written in a simple text editor. The author style-sheet is most often found within the same folder as the web-document itself, wheresoever that may be. In any case, the name and address of the style-sheet is provided by an entry in the web-document, so it is downloaded to the browser cache soon after the document itself. In fact, there could be several style-sheets listed there, and each would be imported and processed for its styles before taking the next, and so on.
The PC user can change styles too. but his user style-sheet resides on the local computer. The browser merges this sheet with all of the other styles, so that both sets of styles could affect some part of the page. Of course, the user styles affect only the local display and are not seen by others.
There are other places where styles are to be found. They are sometimes written into the head section of the web-document, and as in-line styles within the tags on the page. The browser also has its own style-sheet, the user-client sheet, to provide the basic layout when other style-sheets are missing. Sometimes the default settings of the browser and built-in style-sheets can also impose on the outcome. All of these sources' styles are merged by the browser.
The author styles are formed from three sources . These are; the styles written directly into the web-document's head section, the linked style-sheets referenced within the head section, and the in-line styles within the main content of the page. Sometimes listings in such linked style-sheets can themselves import more style-sheets.
Some styles can have more importance than others. Styles written in any of the style locations, including those on the document itself, can have special !important markings to distinguish them from normal styles. These markings allow an author or user to override normal styles. This feature is of particular use in testing or to assert built-in browser styles over those of others. There are also different ranks within both the !important and normal styles, set by where they were found, their so-called sources (more later).
Some styles have more specificity than others. The extent to which a style-sheet selector lacks generality, or has a narrow definition, is referred to as specificity. For example, some paragraphs in the document might simply be a part of the document body, and their paragraph styles applied for the general case. Some others might need special formats because they are paragraphs located within say, a table cell. The browser can detect this more specific tag layout and give priority to the selector that best matches it. Specificity is important in the cascade's decision-making, and its rules have been developed to a considerable extent (more later).
Style-sheet formats have some common features.. Figure 1 shows a typical style-block layout that might exist in a style-sheet. In it, a selector is the main label for a set of style declarations, each of which is comprised of a property and a value. In the example, a style-sheet's selector called div ul has two style declarations; one property for line-height has a value of 1.8em; another property for background has a value of darkgreen. The number of possible selectors is not limited to single tag names, since, as in the example, these can be compounded to denote the nesting of one set of tags within another. In the example, this selector applies its styles to every unordered list that is nested within a set of division (div) tags, but not to other examples of unordered lists that it finds. The introduction of classes and id's can add even greater specificity to selector use.
Web standards and specifications are managed by the World Wide Web Consortium (W3C), and others. For CSS styles, new standards are published periodically as recommendations. These standards are tested in the beta-versions of browsers, and the discovered descrepancies and deficiencies collated. Eventually a new recommendation is published. Various of the W3C tutorials and specifications can be found in the See Also links below.

The Cascade in Overview

Figure 1:   The CSS terminology for a typical style-sheet entry, a style rule.   It describes the format 
 to use for any unordered list nested within a pair of division block element tags.
 The grouping of declarations between the curly brackets is called a declaration block.

This section provides an intuitive rather than a detailed description of the cascade process. For those who already understand such things, it might be best to go directly to the section A Detailed Cascade Example where the work may be more to their liking. In any event, for those who need to learn or remind themselves about selectors and specificity, tutorials have been provided in the section CSS Tutorials. For those who intend to know more on the subject of HTML, there is an extensive external reference available at W3 Schools HTML, and for CSS there is W3 Schools CSS.

To continue, the browser travels the web page tag by tag with a view to determining their styles. To do so it first identifies the nest, or part of the document tree within which the tag lies. This helps the browser to check the validity of the selectors that it finds. It then searches through all of the style sources, style-sheets and the document itself, looking for selectors that could affect the tag in question, again, bearing in mind the tag layout. If a selector applies, its style properties are listed in the order that they are found, and the result is a long list of properties that apply to that particular tag. There may be many of these declared styles in the list, or none, depending on the work done by the various writers, and it is clear that most of the properties that could have be declared for that tag will still be absent.

Style declarations can have a special marking to give them added priority over normal declarations and they use the !Important keyword to identify them. They are called Important declarations. In sorting its lists the browser segregates the !important declarations from any normal declarations. The browser then recognizes the five Importance Ranks, or Importance Layers, of Figure 2, where rank 1 has the lowest importance and rank 5 has the highest.

**Figure 2: Cascade Importance Ranks for CSS Level 2**
rank 1	The Browser default styles Styles listed in the User Agent (UA) Style Sheet, or some equivalent implementation.
rank 2	The User Normal Style Declarations Those in the user style-sheet without an !Important marking. Normal declarations from site-specific and built-in style-sheets could also be merged here.
rank 3	The Author Normal Style Declarations Those in the author's set without an !Important marking. They comprise styles from the document head, linked style-sheets, and in-line styles.
rank 4	The Author !Important Style Declarations Those in the author's set with an !Important marking. They comprise styles from the document head, linked style-sheets, and in-line styles.
rank 5	The User !Important Style Declarations Those in the user style-sheet with an !Important marking. !Important declarations from site-specific and built-in style-sheets could also be merged here.

Each property entry on the list is marked with one of the five importance ranks depending upon the selector's source and whether or not it is a normal or important declaration. The items are also marked with their specificities, weighted values that reflect how narrow a scope is intended for their application. A note is made of each source location, a marking that identifies where it was found and its location within the style-sheet.

The set of data is then sorted to group all of the similar properties, then within any similar sets found, (for example, ten different font-sizes proposed), they are sorted further for highest importance. With any closely contested sets after these sorts, they are again sorted for highest specificity, to eventually isolate a value for each distinct property in the list. The last deciding sort in the event that any two declarations are still matched, is the source position in which they were found; that is to say, the one that was considered last for the listing will prevail. The graphic of Figure 3 depicts the cascade of styles involved in the resolution of formats for a single paragraph tag, its details being identical to those of the detailed example in a later section.

Having decided which formats apply to the particular tag, the browser repeats the process for each and every tag on the page, after which it applies all of the formats with its rendering engine.

An important point to emphasize is that in making its property lists, the browser always makes lists in the exact order that they were encountered in its travels from the top to the bottom of the web page, and from the top to the bottom of each style-sheet that it encounters while it is doing so. It also honors the styles sequence found in the heading of the web page when adding to its lists. This method has consequences for the browser's resolution of conflicts where source-order is the deciding factor. Recall again that all of this listing activity takes place for each tag-pair on the page.

After Cascading

When the cascade has run its course, the original set of declared styles will have been reduced to a set of cascaded styles, but many properties will not have been declared in the first place. In order for the browser to function correctly there must be a single value for every property that is considered essential for that element's formatting. The browser fills these large gaps with its default actions. For each essential property that is missing, it first tries to inherit a suitable value from a parent element, that is, from the tags that surround it; if that is not possible for some reason, the browser assigns an initial value. Property Initial values are preset in Property Definition Lists, at design time. The result of applying these defaults is to make a comprehensive set of specified values, that includes every property that is needed, for each tag under consideration.

The next stage is to make computed values from the specified values, by considering say, any relative sizes that have been quoted. For example a font-size of 1em needs to be converted to a value in pixels by relating it to some point of reference. With some further adjustments of the set, used values result, and these are tried in the rendering of the page. These might be further adjusted to accommodate constraints in layout or to round font sizes, at which point they are referred to as the actual values.

The Cascade in Detail

Figure 3. 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.

In order to understand the cascade process in more appropriate detail, an example section has been prepared below. In it, it is possible to study the source style-sheets themselves and the document used for the example. It has been assumed that the browser is attempting to resolve the styles for the document's first paragraph tag. The style-sheet declarations that apply to that tag have been highlighted in green to help the reader to follow the process.

All of the selected properties for that nest, their importance ranks, specificities, and positions found within the sources themselves have been entered into a sortable table on this page. It remains only for the reader to follow the various listings and to sort the table using the buttons on it, to see the process that resolves these selections.

Styles Sources for the Example

Local Web-page used for Testing

<!-- This is the web-page, the document htm file used for local testing, and the declarations that are associated with the first document paragraph are marked in green. -->

<!DOCTYPE html>
<html>
<head>

<title>My HTML Test Document</title>
  
<style type="text/css">
p {
<span style="background:palegreen;">font-size:2em;
font-family:courier;</span>
}
.toppara{<span style="background:palegreen;">
background:green;
border:1px solid lightgrey;</span>
}
</style>
<link rel="stylesheet" href="Main.css" type="text/css" media="screen">
</head>
<body>
    <div>
       <p <span style="background:palegreen;">id="para1" class="Tahoma mostparas toppara" </span> style="<span style="background:palegreen;">font-family:arial;padding:1.5em;</span>">
This is the top (first) paragraph and is styled as 30px Black Bold Normal Text in Tahoma with the browser's 1em 0 margins.   There is a beige background, a styled border, and 1.5em of text padding.</p>
    </div>
       <p id="para2" style="color:red;">This is the second paragraph and is styled as 30px Red Bold Italic Text in Garamond with the default browser 1em 0 margins. There is a white background and 10px of padding.</p>

</body>
</html>

User Style-sheet for Testing

/* This is User.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


p{
font-size: 30px !important;
}

.Tahoma{
font-family: Tahoma !important;
}


#para1{
font-family: Times;
color: blue; 
font-style: italic;
font-weight: normal;
}


#para2{
font-size:10pt;
color:white;
font-style:italic;
}

div{}

Author Style-sheet for Testing

/* This is Main.css, and the declarations that are associated with the first document paragraph are marked in #ffffcc.*/


#para1.Tahoma{
font-family:Calibri !important;
color:black !important;
font-style:normal !important;
}

p{
font-family:Garamond;  
font-size:20px;
font-weight:bold;
background:white;
padding:10px;
}

.mostparas{
background:beige;
}

Opera 10 Browser Style-sheet

/* This is the Opera browser's Client Style-sheet.   It is used when styles are not otherwise specified, and so has the lowest importance. The declarations that are associated with the first document paragraph, (just the ''p'' in this case), are marked in #ffffcc.*/

/*   Note that this CSS style-sheet is correct for Opera 10, and although the intention is unlikely to have much changed for later Opera versions, no data has been found for these; not CSS sheets or listings that describe their equivalent behavior.*/


/* Copyright 2010 Opera Software */

a {
	color: #00C;
	text-decoration: underline;
}

a:visited {
	color: #800080;
}

abbr {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

address {
	display: block;
	font-style: italic;
	padding-left: 2px;
	padding-right: 2px;
}

area {
	display: none;
}

audio {
	display: none;
}

audio[controls] {
	display: inline;
}

b {
	font-weight: bold;
}

base {
	display: none;
}

bdo {
	direction: rtl;
	unicode-bidi: bidi-override;
}

blockquote {
	display: block;
	margin: 1em 10px 1em 40px;
}

[dir=rtl] blockquote {
	margin: 1em 10px 1em 40px;
}

body {
	display: block;
	margin: 8px;
}

button {
	border-width: 2px;
	color: #000;
	display: inline-block;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px 8px;
	text-align: center;
	text-indent: 0;
	white-space: nowrap;
}

caption {
	display: table-caption;
	text-align: center;
}

cite {
	font-style: italic;
}

code {
	font-family: use-lang-def;
	font-size: 0.81em;
}

col {
	display: table-column;
}

colgroup {
	display: table-column-group;
}

datalist {
	display: none;
}

dd {
	margin: 0 0 0 40px;
}

[dir=rtl] dd {
	margin: 0 40px 0 0;
}

del {
	text-decoration: line-through;
}

dfn {
	font-style: italic;
}

div {
	display: block;
}

dl {
	display: block;
	margin: 1em 0;
}

dt {
	display: block;
}

em {
	font-style: italic;
}

fieldset {
	border-style: groove;
	border-width: 2px;
	display: block;
	margin-left: 2px;
	margin-right: 2px;
	padding: 0.33em 0.67em 0.75em;
}

form {
	display: block;
}

h1 {
	display: block;
	font-size: 2em;
	font-weight: bold;
	margin: 0.67em 0;
}

h2 {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0.83em 0;
}

h3 {
	display: block;
	font-size: 1.17em;
	font-weight: bold;
	margin: 1em 0;
}

h4 {
	display: block;
	font-weight: bold;
	margin: 1em 0;
}

h5 {
	display: block;
	font-size: 0.83em;
	font-weight: bold;
	margin: 1.67em 0;
}

h6 {
	display: block;
	font-size: 0.67em;
	font-weight: bold;
	margin: 2.33em 0;
}

head {
	display: none;
}

hr {
	border-style: inset;
	border-width: 1px;
	box-sizing: content-box;
	display: block;
	height: 0;
	margin: 10px 0;
	text-align: center;
}

html {
	display: block;
}

i {
	font-style: italic;
}

iframe {
	border-style: inset;
	border-width: 2px;
}

input {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

ins {
	text-decoration: underline;
}

kbd {
	font-family: use-lang-def;
	font-size: 0.81em;
}

keygen {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
}

li {
	display: list-item;
}

link {
	display: none;
}

menu {
	display: block;
	margin: 1em 0 1em 40px;
	padding-left: 2px;
	padding-right: 2px;
}

[dir=rtl] menu {
	margin: 1em 40px 1em 0;
}

meta {
	display: none;
}

noscript {
	display: none;
}

ol {
	padding: 0 40px 0 0;
}

optgroup {
	text-indent: 0;
}

option {
	text-indent: 0;
}

p {
	display: block;
	margin: 1em 0;
}

pre {
	display: block;
	font-family: use-lang-def;
	font-size: 0.81em;
	margin: 1em 0;
	white-space: pre;
}

q {
	quotes: "\"" "\"" "'" "'";
}

samp {
	font-family: use-lang-def;
	font-size: 0.81em;
}

script {
	display: none;
}

select {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	padding: 1px;
	text-align: default;
	text-indent: 0;
}

strong {
	font-weight: bold;
}

style {
	display: none;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

table {
	border-spacing: 2px;
	display: table;
	text-indent: 0;
}

tbody {
	display: table-row-group;
	vertical-align: middle;
}

td {
	display: table-cell;
	padding: 1px;
	vertical-align: inherit;
}

textarea {
	border-width: 2px;
	color: #000;
	font-family: use-lang-def;
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	padding: 1px;
	text-align: default;
	text-indent: 0;
	text-transform: none;
}

tfoot {
	display: table-footer-group;
	vertical-align: middle;
}

th {
	display: table-cell;
	font-weight: bold;
	padding: 1px;
	vertical-align: inherit;
}

thead {
	display: table-header-group;
	vertical-align: middle;
}

title {
	display: none;
}

tr {
	display: table-row;
	vertical-align: inherit;
}

ul {
	display: block;
	list-style-position: outside;
	list-style-type: disc;
	margin: 1em 0;
	padding: 0 0 0 40px;
}

[dir=rtl] ul {
	padding: 0 40px 0 0;
}

var {
	font-style: italic;
}

video {
	display: inline;
}

Cascade Sorting Table

Table 1 below has listed in it all of the properties that apply to the first paragraph tag in the example document, and they have been listed in the top to bottom order that they were found.

Firstly, the user style sheet user.css was listed from top to bottom. (1:1 to 1:6; six properties as the first source to consider).
Then the head styles, because they are located in the document above the style-sheet links.(2:1 to 2:4)
The author style-sheet was next, main.css; (these are marked as 2:5 to 2:13).
then the two in-line styles were added as items (2:14 to 2:15).
The browser's Client Style-sheet contributes too, so these have been added last of all (3:1 and 3:2).

These twenty-three items can be seen listed in Table 1.

To resolve which of these many competing styles are to result in use for the first paragraph, a sorting model that mimics the cascade's behavior can be used. Its effect is to sort the items:

first for property name
then for importance
then for specificity, in four steps
then, unnecessarily, for source order

Table 1 opens with the page in natural source order, and can be sorted by the reader to see how each step affects the cascade.

Upon successfully completing the sort, the items will be selected as if they comprised the set:

p{
 background:beige;
 border:1px solid lightgrey;
 color: black;
 display: block;
 font-family: Tahoma;
 font-size: 30px;
 font-style: normal;
 font-weight: bold;
 margin: 1em 0;
 padding:1.5em; 
}

To sort the set of listed styles to the qualifying few, first sort the Property column without the shift key, by pressing the arrow in its column heading, then after that, sort the remaining sortable columns from left to right, in the same way but while pressing the shift key. This brings the selections to the bottom or top of their distinct property sets, depending upon whether the user sorts ascending or descending respectively. To assist in first time use the items that will be selected are marked in blue.

**Table 1: Sortable Table to Resolve the CSS Cascade for the Example Paragraph Tag**
Declaration			Weighting
				Specificity
Property	Value	Selector	Importance	`style` attribute	ID selector	Class selector	Element selector	Source order
font-size	30px	p	(rank 5) user important	0	0	0	1	1:1
font-family	Tahoma	.Tahoma	(rank 5) user important	0	0	1	0	1:2
font-family	Times	#para1	(rank 2) user normal	0	1	0	0	1:3
color	blue	#para1	(rank 2) user normal	0	1	0	0	1:4
font-style	italic	#para1	(rank 2) user normal	0	1	0	0	1:5
font-weight	normal	#para1	(rank 2) user normal	0	1	0	0	1:6
font-size	2em	p	(rank 3) author normal	0	0	0	1	2:1
font-family	Courier	p	(rank 3) author normal	0	0	0	1	2:2
background	green	.toppara	(rank 3) author normal	0	0	1	0	2:3
border	1px solid lightgrey	.toppara	(rank 3) author normal	0	0	1	0	2:4
font-family	Calibri	#para1.Tahoma	(rank 4) author important	0	1	1	0	2:5
color	black	#para1.Tahoma	(rank 4) author important	0	1	1	0	2:6
font-style	normal	#para1.Tahoma	(rank 4) author important	0	1	1	0	2:7
font-family	Garamond	p	(rank 3) author normal	0	0	0	1	2:8
font-size	20px	p	(rank 3) author normal	0	0	0	1	2:9
font-weight	bold	p	(rank 3) author normal	0	0	0	1	2:10
background	white	p	(rank 3) author normal	0	0	0	1	2:11
padding	10px	p	(rank 3) author normal	0	0	0	1	2:12
background	beige	.mostparas	(rank 3) author normal	0	0	1	0	2:13
font-family	arial	p inline	(rank 3) author normal	1	0	0	0	2:14
padding	1.5em	p inline	(rank 3) author normal	1	0	0	0	2:15
Display	Block	p	(rank 1) browser client	0	0	0	1	3:1
Margin	1em 0	p	(rank 1) browser client	0	0	0	1	3:2

Some Conclusions

Notice in the correctly sorted table that most examples are selected on the basis of their rank order, or in other words, their importance.
The background properties however, are not resolved by importance or specificity, since these are the same for each of the background properties in the set. They are selected only by source-order, that is to say, the order in which they were listed.
The two listings for the padding property on the other hand, have equal importance but differ in specificity. The one from an in-line style is chosen on this basis..
Notice that in the above hierarchy 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 that is ranked above it in importance has set a value of its own. This is displayed by the graphic of Figure 3 in a more intuitively way than the sorting table, but it shows the same example.
Perhaps a less obvious point in regard to this selection process is that declarations with the !important marking do not need a high specificity to prevail. That is to say, although the !important declarations are sorted within their own source rankings for specificity, it is quite conceivable that one with a low specificity will be selected to represent its rank. Then because of the priorities of the ranked sources, the low-specificity item can prevail over one with much more specificity but less priority. This gives very wide scope to !important declarations, and because they do, it is essential to narrow their specificity as much as possible in use. For example, a normal declaration of high specificity in an author style-sheet:
```
 div table tr td p {color:red}   /* for a paragraph in a cell of a row of a table in a division block */
```
can nonetheless be overruled by a low specificity declaration:
```
p{color:green !important}       /* for a paragraph wheresoever found on the page */
```
As well as affecting the specific example, this latter declaration would assert itself over all paragraph declarations with a normal priority.
Generalizing from perhaps too little data, it might be possible to say that the more importance that is given to declarations by their rank positions, the more attention needs to be given to narrowing their specificity if they are not to become too overbearing in their scope.

CSS Tutorials

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. There is a listing on the use of style-sheet selectors, and an explanation of specificity and some other things.

For those who intend to study CSS by changing the content of style-sheets and web-documents, it may be as well to issue a standard reminder about the caching of files.

When a browser preference (option) is changed a browser re-start is most often needed before it can take effect.
When a web-page or a style sheet is changed, the expected changes are unlikely to be seen unless the browser cache is first cleared and the page re-loaded. Much confusion can result if this point is overlooked. The cache-clearing methods for each browser are different, but there is usually a feature within the browser's preferences (options). Sometimes drop-menu items provide for faster cache clearing, but at other times it may be necessary to set the options to clear the cache on closure, then restart the browser to display the change. For the Opera browser, the most convenient way to empty the browser cache is by the use of the drop-menu item Tools / Delete Private Data...

Selectors for Style-sheets

Basic Style-sheet Selector Use

Tag Selectors: Tag selectors are the simplest selectors. They are just the text-part of the HTML tag whose style is being defined. In general however, a selector is so-named because it is used to select or target a part of the web-page with its styles. It can also be compounded with other terms to provide for more selective targeting.

It is the left-most part of a style expression, up to but not including the first curly bracket.

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. If the styles were to apply only when the paragraph tags are nested within div tags, we could write the selector for that as:

div p {line-height:1.8em;}

Class Selectors: A class-selector is a selector that is allied with a class; that is, a complete set of styles. To use it the class name must be declared within the associated tag. It has more specificity than a simple tag selector, but less than an ID selector. The class can be used as many times as necessary throughout a page, and several classes can be declared within one element. In the style-sheet we could define the class with say;

.thetop {font-family: Arial;}

And to apply these styles to say, a paragraph tag in a document we can write the declaration in the document as:

<p class="thetop"> Some paragraph text </p>

When the following two classes are declared together in the same element, the styles of the two individually defined classes will be merged:

<div class="firstpara headings">The text</div>

If the selector is written as shown below, the styles will be applied only to elements where both classes are declared:

.firstpara.secondpara{}

ID Selectors: These should only be used once in a page, and only one can be declared within an element. They have the greatest specificity, second only to in-line styles. A typical id definition can be written in the style-sheet as:

#Tailpiece {color:gray;}

and we declare the ID for use in the document with say;

<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 selector will only apply to paragraph tags that are nested within division tags. For that we write:

div p {padding: 1em;}

and it would be applied when the tags in the document look something like this:

<div><p>The is the text</p></div>

Combining a few of the above ideas, here are the styles for the same nested paragraphs, but now one has declared a class and the other an ID:

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}

To select any element with the sub-string able in the value of its title attribute, we write:

[title*="able"] {color: red}

Other attributes might include alt, class, id, lang, style, title,and html attributes such as align, cellspacing ect.

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 that can access such features as the 'first-line' and 'last-line' of paragraphs, and that allow additional control in the page. For example, they also allow the targeting of the first cell in a row, or every even or odd row.

To make the first letter of all paragraphs bold, we could write:

p:first-letter {font-weight:bold}

The first of type pseudo element selects the first child element of its parent that matches the construct. For example, to make the entire first columns of all tables bold we could write the selector as:

table td:first-of-type{font-weight:bold;}

The last of type pseudo element selects the last child element of its parent that matches the construct. This selector draws a totals line above the last row of tables declaring the totals class:

table.totals tr:last-of-type{border-top:2px solid darkgrey;}

The nth child and nth of type pseudo elements can used to selectively target elements by pattern. This first example below colors every odd row of every table:

table tr:nth-child(odd) {background: #FFF;}

This next example colors every table's even rows.

table tr:nth-child(even){background:linen;}

The third example shows the general form for table row coloring; this case colors every third row starting with row number two:

table tr:nth-child(3n+2){background: grey;}

To color even columns, two pseudo elements can be compounded as follows. This example colors every even cell in every row of every table. Both of these parts could take more complex arguments.

table tr:nth-of-type(n) td:nth-of-type(even) {background:lightpink;}

Important styles: These are declarations in user, author, or any other style-sources with high priority. See page for details:e.g.

p{font-weight:bold !important;}

Selectors and Tag Nests

Nested elements are elements whose opening and closing tags are themselves bounded by a complete set of other tags. The examples below will make the matter clear. The html code below is used for demonstration. In it there are many nested tag-sets (representing elements). For example, the table is completely nested within a pair of division tags, and all of that is completely nested between a pair of body tags.

The notion of nesting is not limited to adjacent tag pairs. That is to say, in the above example, the table is also considered to be nested within the body tags, despite the fact that the division tags are located between them. In determining which selectors might apply to a particular tag in the document, the browser gives consideration to the nest in which the tag is located. In the example below it is assumed that the browser is attempting to find the relevant nested tags for the first heading tag, h2.

Figure 1: An HTML extract to show nested tag pairs.

<!--  Sample html code for the nesting example 
Go to the examples below for an explanation -->
  <body>
    <div>
        <h2>First Heading</h2>
        <p>First paragraph</p>
        <table>
          <th>Column 1 Heading</th><th>Column 2 Heading</th>
          <tr>
          <td>Cell 1 text</td><td>Cell 2 text</td>
         </tr>
        </table>
    </div>
    <h2>Second Heading</h2>
    <p class="class1">Second paragraph</p>
    <ol>
      <li id="id1">First list item text
      <li>Second list item text
    </ol>
  </body>

Usually, with practice, the web-page builder can see the relationships within the tag sets by simple inspection, but here the nested tag pairs will be listed and explained. In the extract above, the h2 tag that is nested within a division has four possible nestings, and these imply that there are four possible ways to write selectors that include that tag. That is to say, on its own or set at least somewhere between complete tag pairs.

In Figure 2 can be seen all of the possible selectors that could apply to the extract of Figure 1, with the exception of those that include the universal selector and the omitted root element <html>. Any selector that works at all can be made by joining a trail of selectors that ends with the target tag. The set that is produced should be space-separated, but need not include any more that is needed to obtain the required specificity, and any tags within the sequence could be omitted. The examples below show the simple selectors that might be written for the first heading tag of Figure 1:
The four case are:
1. The trivial case... The tag on its own... Selector h2 itself would contain a relevant styles listing, and this general selector affects the second heading as well.
<h2>First Heading</h2>
2. Nested within the div tags... Selector div h2 would contain a relevant styles listing, and because the second heading is not nested within a division, this selector affects only the first heading.
<div>
        <h2>First Heading</h2>
</div>
3. Nested within body and div tags... Selector body div h2 would contain a relevant styles listing, and again, because the second heading is not nested within a division, this selector affects only the first heading <body> <div> <h2>First Heading</h2> </div> </body>
4. Nested within body tags... Notice that even with intermediate tags ignored, that this is considered nesting too. Selector body h2 would also contain a relevant styles listing, and because both headings are nested in the body, it affects them both. <body> <h2>First Heading</h2> </body>
The addition of classes and id declarations to the target tag would allow for more specific targeting of styles, perhaps avoiding any confusions that might otherwise arise. Doing so also greatly increases the number of ways to specify selectors. The section below provides an example that includes such declarations. In the interests of learning, it lists a few of the selector formats that could be encountered for a typical paragraph tag, though not all of these are the best choices for doing so.

Selectors with Classes and Id's

Figure 3: An HTML extract for the example with declarations.

<body id="topid">
<p>textA</p> 
<div>
  <p id="someid" class="class1 class2" style="color:blue;">textB</p>
</div>
</body>

Figure 3 shows a fairly usual arrangement of tags where a paragraph is nested within a division tag set, and all of that is assumed to be within the body tags of the web-document. In addition, note that there are declarations within the paragraph tag; one id, two classes and an in-line style. The division tag has declared an id within it. The addition of these declarations allows a large number of variations in the available selectors for the second paragraph, though from the theoretical sixty-four variations, only about twenty or so will ever find much use.
Notice also that there is another paragraph tag, but it belongs to a different nest. It is simply nested within the body tags and has no connection with the division tag pair. When styles are written for paragraphs, some styles will affect both of these paragraphs and others will affect only one or the other.
Refer to Figure 3. Any or all of the following selectors could be used to list styles for the second of the two paragraphs, the one with all the declarations. A note is provided for the cases where the first paragraph tag would also be affected.

p

A general paragraph selector. Also affects the first paragraph. Specificity=1.

div p

For a paragraph within division tags. Specificity=2.

body p

For paragraphs within body tags, where there is optionally some tag(s) in between. Also affects the first paragraph. Specificity= at least 2.

body * p

For paragraphs within body tags, where there is necessarily some tag(s) in between. Also affects the first paragraph. Specificity=2.

body div p

For paragraphs within division tags and the division tags themselves within body tags. Specificity=3.

.class1

For any element that includes the declaration class= ”class1”. Specificity=10

.class2

For any element that includes the declaration class= ”class2”. Specificity=10

p.class1

For a paragraph that includes the declaration class= ”class1”. Specificity=11

p.class2

For a paragraph that includes the declaration class= ”class2”. Specificity=11

.class1.class2

For any element that has a declaration class= “class1 class2”, with both together. Specificity=20

p.class1.class2

For a paragraph that has a declaration class= “class1 class2”, with both together. Specificity=21

div p.class1

For a paragraph with declaration class="class1" that is nested within division tags. Specificity=12

div p.class2

For a paragraph with declaration class="class2" that is nested within division tags. Specificity=12

div p.class1.class2

For a paragraph with declaration class="class1 class2" that is nested within division tags. Specificity=22

body div p.class1

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1”. Specificity=13.

body div p.class2

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class2”. Specificity=13.

body div p.class1.class2

For a paragraph that nests within division tags and the division tags themselves nest within body tags, and where the paragraph has a declaration class= “class1 class2”. Specificity=23.

body p.class1

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1”. Specificity=12.

body p.class2

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class2”. Specificity=12.

body p.class1.class2

For a paragraph nested within body tags, whether or not there are tags in between, and where there is also a paragraph declaration class= “class1 class2”. Specificity=22.

#someid

For any element with a declaration id= “someid”. Can be declared only once on the page and an element can list only one of them. Specificity=100

#topid p

For a paragraph that is nested within any element with a declaration id= “topid”. Optionally, there could be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects both paragraphs in this case. Specificity=at least 101

#topid * p

For a paragraph that is nested within any element with a declaration id= “topid”. Necessarily, there must be a tag in between these two. (Note that changing the last term allows many selectors and definitions). Affects only the second paragraph here. Specificity=101

*

Every element that is capable of displaying the added styles. Affects both paragraphs. Specificity =0

An in-line style within the paragraph tag

Where a paragraph contains a style declaration. Specificity=1000

Calculate Specificity

Style Declaration Specificity

Specificity is 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).

Specificity - Calculated Examples

p { }	Total=1, because there is only one simple tag element for the selector.
div p { }	Total=2, because there are two tag elements (2).
p.topsection { }	Total=11, because there is one tag element (1), plus one class (10).
#toppara { }	Total=100, because there is one ID selector (100)
div table p#green { }	Total=103, because there are three tag selectors (3), plus one ID (100).
style="float:left;"	Total=1000, because there is an inline style (1000)
a:hover { }	Total=11, because there is one tag element (1), plus one pseudo-class (10).
p:first-line { }	Total=2, because there is one tag element (1), plus one pseudo-element(1).
p[title] { }	Total=11, because there is one tag element (1), plus one attribute(10).

Inheritance of Styles

The inheritance of styles means the use of styles from a parent element when suitable styles have not been specified for the child element. The inheritance of styles takes place after the cascade, filling in the missing property values where possible, and when this cannot be done, by applying initial values, default values for the CSS properties themselves. Note the following points:

A parent element is any element whose tags totally enclose another set of tags, the tags of the so-called child element.
Inheritance takes place from a parent element to a child element, if at all, and can be transferred to any depth of nesting where the child of one becomes the parent of the next.
The calculated values of the previously established cascaded values are inherited and not the properties themselves. Because the cascaded values no longer have any importance rank or specificity associated with them, these factors have no bearing on inheritance either.
If the child element has a relevant style specified for it then the parent cannot pass styles to it by inheritance.
Even an HTML attribute can block inheritance if it exists as a relevant style in the child element. This occurs because attributes are given equivalent CSS formats to act in the cascade. They do so within the browser style-sheet.
The initial values of CSS properties do not take part in the cascade. After the cascade, if no style was specified, then an attempt is made to solve the problem by inheritance, then if that is still not possible, the initial value as found in the CSS Property Definition Table is used. Reasons why an initial value may be taken include:
- The property is not specified and cannot in any case be inherited
- The property value is present but it's value is set to initial .
<!DOCTYPE html> for HTML5 Standard is assumed. These notes will apply to web-documents whose top-line entry matches the one here. For certain other doctypes the inheritance of property values might fail entirely.

The examples below help to explain the basic points.

Inheritance takes place as a part of default actions, after the cascaded values have been resolved. This assumption makes the writing of examples difficult. Therefore, the reader should assume that the styles shown in the examples below have already been resolved by the cascade as being valid for these elements.

Simple Inheritance

<!-- Figure 1 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div>   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 1. In the case above the paragraph font-size and line-height will be the same as for the body tag. In this case the div tag inherits from the body tag since the div has no such properties specified. The paragraph inherits from the div for the same reason.

When specified at a given level, relative line-height is always calculated as a multiple of the same element's calculated font-size, but where line-height is inherited, the calculated value of line-height of its parent is used. The next example illustrates this. Relative font-size is always calculated as a multiple of the parent's calculated font-size.

The line height will be applied as a value as close as possible to its calculated 24px, (16px x 1.5).

Inheritance with Relative Values

<!-- Figure 2 -->
<html>
   <body style="font-size:16px; line-height:1.5em;"> 
      <div style="font-size:1.25em; line-height: 1.6em;">   
        <p style="font-size:1.5em;">  /* inherits calculated line-height value as 32px */               
              This is the test paragraph
        </p>
      </div>
   </body>
</html>

Refer to Figure 2. In this slightly more complex case the div's calculated font-size is 20px and based on this, the font-size for the paragraph is calculated to be 30px, (16px x 1.25 X 1.5 = 30px)

The line-height for the paragraph is inherited from the div element, since it has no such style of its own, but it is not the 1.6em that is inherited but the calculated value of line-height as it exists for the div.

The paragraph's font-size is then 30px and the line-height becomes a mere 32px, (16px x 1.25 x 1.6 = 32px).

The Use of the Initial Value

<!-- Figure 4 -->
<!-- Assume that the browser default font-size is 16px  -->
<html>
   <body style="font-size:1.5em;"> 
      <div style="font-family:Garamond; font-size:1.5em;">   
        <p>This is the test paragraph</p>
      </div>
   </body>
</html>

Refer to Figure 4. In this example the paragraph's text will be styled in Garamond face, with font-size 36px. Attempts by the div level to inherit a specific value for the font size fails, since neither div or body tags hold a font-size measurement. The initial value however, as set by the browser's default options is 16px and this value is taken by the body tag to make its calculated value 24px. In turn, the div tag inherits 24px and then calcuates its own to be 36px. The paragraph inherits the values Garamond and the 36px from the div tag.

Systematic Deduction of Inherited Value

Figure 5: A methodical approach to determining inherited values.

The estimation of inherited values is complex for a web user, but it is rarely needed where styles are fully specified. For a browser, the matter needs to be a more methodical process.

Refer to Figure 5 for a strategy chart for such a process. After the cascade has run its course, the inheritance run then starts at the outermost tag of the document tree and works inward toward the target tag. The outermost tag that could contain a style is the html tag, the next is the body tag, and so on, and any of these tags could be required to contribute styles through inheritance.

Recall that inheritance can propagate from the parent element to the child element only if the child element has no cascaded style for that property of its own. When there is no such style but inheritance is still not possible, then the initial value for that property is taken instead. For example, this might happen in an HTML element that has no font-size declared, either in style-sheets or on the page. The initial value for font-size would be used, and might even be inherited by nested elements. All CSS properties have initial values as defaults, written into a Property Definition Table as a part of the browser's design process.

With such a model either the cascaded, inherited, or initial values will be assigned during any one iteration of the loop. In a practical situation there would not be a single run but several, not just to the deepest target, but including all of the side runs also. Nor would there be just one CSS property that is of interest, but rather all of the properties that can apply to that element. The scenario that perhaps serves best to understand the scope of what is done, is to imagine dozens of properties being considered at the same time at every iteration, then several more passes to get the rest.

Errors and Other Things

Errors, Comments, and White-space

Style-sheet Errors

When a style-sheet finds an error, it tends to ignore the feature in which it is found.

If the selector is illegal : This might happen if some character in it is not permitted by the CSS standard. If that happens then all of the styles in the declaration block associated with it are ignored. Parsing continues with the next valid selector.
If the declaration block is malformed: For example, there might be a missing opening bracket. When this happens the entire declaration block is ignored. Parsing continues with the next valid selector.
If an illegal property is found: For example, there might be a misspelling. The entire declaration is ignored. Parsing continues with the next valid declaration in the same declaration block, or the next selector.
If there is an illegal value : As in the property case, the entire declaration is ignored and the parsing continues with the next valid declaration in the same declaration block, or the next selector.
If a semicolon is missing from the last declaration in a declaration block: The styles are unaffected.
If a semicolon is missing from any other declaration in a declaration block: The style with the missing semicolon and the one that follows it will be ignored. Parsing continues with the next valid declaration after those two, or the next selector.

In-line Style Errors

In-line styles are parsed in the same way as style-sheets, so the second of two contesting styles applies. Problems mostly arise when the parentheses are missing:

Removing the parenthesis from the end of the block: This can cause a paragraph to vanish completely! This can be demonstrated using the in-line style for the first paragraph of the example in the main page.
Removing the leading parenthesis: This causes more strange behavior - the first declaration of the two is applied but not the second.
If two in-line style blocks exist: The second is ignored.
A missing semicolon at other than the end of the declaration block: This causes the declarations on both sides of the missing semicolon to be ignored.
A missing semicolon at the end of the last declaration: Has no effect on the styles.

Comments in Style-sheets

Comments can be added to the style-sheet as follows:

 /*  This is my style-sheet user.css              
 These are comments and they are ignored by the parser. 
 Notice that the outside bounding characters are forward slashes,
 and that there are asterisks on the inside of each  */

p{
font-size: 30px;   /* this is also a valid comment */
}

/* comment characters can also be used to temporarily disable css styles for testing */

Comments in HTML Document Pages

Comments for HTML are different from the ones for CSS style-sheets. Comments are added to HTML with:

 <!--  This is an HTML comment and it is ignored by the parser. -->
 <!--   Notice the form of the leading and end symbols   -->

White-space in CSS and HTML

White-space in style-sheets is largely ignored, so the layout can be spaced for ease of reading. Here are a few of the more obvious points.

White-space can surround properties, values, selectors, declaration blocks, and whole style-rules.
Individual words such as in properties, values, and selectors, should not be broken with space or line breaks.
Line breaks are not permitted within individual style declarations, though breaks between complete declarations are to be expected.

Declarations should not be broken with line breaks. The need for this rarely arises when a neat layout has been adopted.

The URL Path

When a style-sheet is referenced in the head section of a web-document, there are certain assumptions that can be made:

If no path other than the file name is given, the browser can assume that the style-sheet is to be found in the same folder as the web-document itself.
If a full path is given, in the case of Opera, spaces are tolerated in the folder names. In the event that a browser objects to spaces, then replacing the spaces with %20 will solve it.
A local path can be given for a style-sheet on the local computer.

About @import

Any number of style-sheets can be added to a web-page by making a separate link reference for each in the head section of the page. With the @import directive, additional style-sheets can be added to the linked style-sheet itself.

That is to say, any of the style-sheets listed in the head section of the document can themselves import further style-sheets. In practice this means placing a separate @import directive for each additional style-sheet, at the top of the linked style-sheet. For example: these three additional sheets will be merged with the one in which they are mentioned:

@import "first.css";
@import "second.css";
@import url('http://help.opera.com/css/styles.css');

/*   This is main.css, the sheet referenced in the web-page's head section */

body{
font-size:1em;
}

/*    etc...   */

Note the following:

There can be no typing above the import directives, but a blank line is permitted.
The parentheses are optional for Opera but some browsers like Internet Explorer might expect them.
A semi-colon after each import directive is essential.
The style-sheets will run in sequence "after" the sheet in which they are listed.
Entries without a path will be assumed to be located in the same folder as the web-document itself.
Optionally, the url format can be used to import a known style-sheet. See the third example above, and notice that it has single quotes.

HTML Attributes

Default Styles

Before the introduction of CSS style-sheets the formatting of web page elements was carried out with so-called HTML attributes. These are basic style rules, and the set differs for each HTML element. In the absence of any author and user CSS styles, the formatting of a web page is handled by a combination of:

The browser's default CSS style-sheet, (or built-in style set).
Any HTML attribute inheritance or CSS inheritance that may still apply.
Settings in the browser's preferences (options).
The HTML elements' attribute default values.
HTML attribute values purposely written into the HTML tags.

The formats STYLE=, ID= and CLASS= are themselves HTML attributes that allow the assignment of CSS styles to HTML tags. That is to say, when we write in-line styles into an HTML tag, or declare an id or class, we use HTML attributes to do it.

Although the above list has only one CSS source mentioned (the browser's default style-sheet), it is convenient to think of most of these items as comprising the default browser set. In fact, some developer utilities such as Opera Dragonfly list the equivalent CSS properties of added HTML attributes as if they had originated in the browser's default style-sheet. For example, where there is an attribute entry align=center, it is implied as having been written in the default style-sheet as text-align:center. Additionally, the same utility lists font details from the browser preference settings as though they had also originated as CSS code within the browser's default style-sheet. Most of the time this will not pose any problems for understanding, but it is as well to bear it in mind where there is confusion.

Attribute Inheritance

Attribute values as well as CSS values can be propegated to child levels by inheritance. For example, align=center within a tag at any parent level will affect paragraphs at levels far below, assuming that the paragraph has no such style of its own.

Attribute Priorities

Because HTML attributes and CSS styles might still 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.

Because of these priorities it may be incorrect for developer tools like Opera Dragonfly to treat attributes as though they were part of the browser's default style-sheet. Clearly even a default browser's CSS style should override an attribute. These priorities are difficult to test in the absence of access to a browser's default sheet, but fortunately the number of situations where confusion might arise are becoming vanishingly small.

Attribute Disuse

Until recently, some HTML attributes had been easier to apply than CSS, but increasingly, CSS styles are being introduced to fill the gaps. For example, the alignment of block elements at a page's center with the HTML attribute expression align=center can now be done with the CSS declaration margin:auto, and recent versions of CSS now allow for the convenient merging of table cells. For those who do not have access to the style-sheet (users of Wiki), and who need to apply padding for table cells, there seems to be no substitute for the table-level HTML attribute cellpadding=length, or endlessly adding padding to every cell. With each new version of HTML, various attributes fall into disuse, for example, the attribute align becomes unavailable in HTML5.

Although the CSS cascade applies only to the resolution of CSS styles, unless regard is also given to these additional default sources, the user will be denied a full understanding. Listings of HTML attributes and their element defaults are to be found in texts on HTML code itself, and will be found to vary between the HTML versions.