CSS Tutorial

1. Introduction

HTML is the web language in which markup is used to; 1.) add content to a web page, and 2.) impart structural information upon the content. The structural information that markup imparts upon content includes; 1.) a structure type (e.g., heading, paragraph, etc.), and 2.) the demarcation of the starting and ending points for the application of the structure type.

HTML provides numerous elements for structuring content. The structure type associated with each element is unique and is intended for a specific purpose. A couple examples are listed below:

In the mid-1990's, a standard for attaching style to content did not exist and HTML was in its infancy. As a result, web pages/sites looked rather similar and unattractive and the future direction of style and HTML were open for discussion.

Also in the mid-1990's, a fierce competition for dominance in the emerging web browser market developed between Netscape and Microsoft and their respective web browsers, Netscape Navigator and Microsoft Internet Explorer. Known as the web browser war, its most conspicuous and polarizing battle centered around claims alleging Microsoft of monopolistic business practices with respect to bundling/integrating Microsoft Internet Explorer with Microsoft Windows 95 and Windows 98.

While most were preoccupied picking and defending sides in the impending antitrust lawsuit, another battle in the web browser war drew relatively little attention: Netscape and Microsoft, apparently sensing a void and an opportunity not only to appease the desire of authors and users for style, but to influence the future direction of style and HTML, started creating elements and attributes related to style and releasing versions of their web browsers that supported their own more or less proprietary versions of HTML.

Those with a nonpartisan interest in the future direction of style and HTML, however, recognized that the silent battle in the web browser war was creating three serious problems: 1.) HTML was morphing into a structure/style combination language; 2.) HTML was splitting into two distinct, web browser-specific languages; and 3.) style, instead of being a positive for authors, was becoming a negative for it had less to do with creating attractive web pages/sites than keeping track of the growing differences between Netscape Navigator and Microsoft Internet Explorer with respect to style.

Tim Berners-Lee, who invented the WWW in 1989 and wrote the first web browser and web server in 1990, along with others, founded the W3C in 1994. The W3C's mission is, To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. With respect to style and HTML, the W3C published the following Recommendations between December 1996 and May 2001:

Concerning style, the W3C described a new web language, CSS, in which: 1.) style is attached to content; 2.) the attachment of style to content is separate from the attachment of structure to content (i.e., although CSS and HTML act upon the same content, they are distinct web languages); and 3.) the application of style to content cascades.

Concerning HTML, the W3C Recommendations accomplished the following; 1.) CSS support was added, and 2.) elements and attributes related to style were first deprecated and then obsoleted from HTML as being replaced by CSS.

The W3C CSS1 and HTML 4.0 Recommendations provided a solution to the aforementioned problems arising from Netscape's and Microsoft's attempts not only to appease the desire of authors and users for style, but to influence the future direction of style and HTML. For the solution to become a reality, however, not only would authors need to implement the W3C CSS1 and HTML 4.0 Recommendations into their web pages/sites, but web browser vendors would need to implement the W3C CSS1 and HTML 4.0 Recommendations into their web browsers.

Authors applauded the W3C CSS1 and HTML 4.0 Recommendations; 1.) the distinction between style and structure made sense, 2.) most of the styles authors desired were accounted for, 3.) they were easy to learn and implement, and, 4.) most importantly, being standards, they promised an end to the growing differences between Netscape Navigator and Microsoft Internet Explorer with respect to style.

At the start of 1998, Microsoft Internet Explorer's support for the W3C CSS1 and HTML 4.0 Recommendations, albeit imperfect and partial, was superior to that of Netscape Navigator. But far more importantly, that Netscape Navigator's and Microsoft Internet Explorer's support for the W3C CSS1 and HTML 4.0 Recommendations differed only served to increase, by at least one order of magnitude, the differences between Netscape Navigator and Microsoft Internet Explorer with respect to style. As a result, authors eager to design cross-browser compatible web pages/sites implementing the W3C Recommendations anxiously awaited the next releases of Netscape Navigator to see if its support for the W3C Recommendations was closing the gap with Microsoft Internet Explorer.

In February 1998, in apparent acknowledgment that unless something drastic happened Microsoft was going to win the web browser war, Netscape formed the Mozilla Organization. The Mozilla Organization created the Mozilla Project whose goal was to develop community driven, open source, cross-platform software for the WWW, including a standards conforming web browser. Authors and users, particularly those intrigued by an open source alternative to Microsoft's proprietary software, welcomed this news. But when the Mozilla Project announced that their new web browser would have to be developed from scratch, and that, as a result, it would take considerably longer than initially anticipated for the new web browser to be released, all eyes refocused on the next releases of Netscape Navigator.

In May 1998, the W3C published its second CSS Recommendation, CSS2. Five months later, in October 1998, Netscape released Netscape Navigator 4.5. When it was determined that Netscape Navigator 4.5's support for the dated W3C CSS1 Recommendation was only slightly better than that of Netscape Navigator 4.0, it started to sink in that Netscape Navigator's poor support for the W3C CSS Recommendations was not likely to change.

In March 1999, Microsoft released Microsoft Internet Explorer 5.0. Microsoft Internet Explorer 5.0's vastly improved support for the W3C CSS Recommendations increased, by at least another level of magnitude, the differences between Netscape Navigator and Microsoft Internet Explorer with respect to style. The headaches this caused authors eager to design cross-browser compatible web pages/sites implementing the W3C Recommendations cannot be overstated: web pages/sites that appeared more or less as expected in Microsoft Internet Explorer 5.0 could very well appear completely discombobulated in Netscape Navigator 4.5. In fact, the gap between Netscape Navigator and Microsoft Internet Explorer with respect to style was now so large that many authors resorted to adding Best Viewed With Web Browser X logos to their web pages and/or using CSS and HTML hacks to trick web browsers into displaying their web pages a particular way. Moreover, and as it became apparent that the antitrust lawsuit against Microsoft was not going to drastically affect Microsoft Internet Explorer's newfound leading position in the web browser market, innumerable authors, including those who were pro-Netscape and/or anti-Microsoft, not only started denouncing Netscape Navigator, but anxiously awaited its market share to drop to low single digits so they could design web pages/sites implementing the W3C Recommendations without having to worry about Netscape Navigator compatibility.

Numerous factors played a role in Netscape Navigator's defeat to Microsoft Internet Explorer in the web browser war, and, therefore, what role Netscape Navigator's poor support for the W3C Recommendations played in its demise is debatable. One thing, however, is not debatable: the authoring community let it be known that if a web browser vendor wanted good standing with the authoring community, it better keep up with the competition in supporting the W3C Recommendations.

In December 2000, after over two years of development, the Mozilla Project released their web browser, named Mozilla. As promised, Mozilla's support for the W3C Recommendations was comparable to that of Microsoft Internet Explorer and authors and users finally had a standards conforming Netscape-affiliated alternative to Microsoft Internet Explorer.

2. Basics

2.1. Style Rules

A style rule is the basic CSS unit attached to content for the purpose of styling content. A style rule consists of a selector and a declaration block. Syntax:

selector {
  declaration block
}

A selector is the element(s), and/or class-name(s), and/or pseudo-class(es) to which a style rule applies. A selector is the bridge (i.e., common denominator or link) between a style rule and an HTML document via which style is attached to content.

A declaration block assigns one or more styles to a selector. A declaration block consists of one or more declarations, each declaration representing a style. Syntax:

/* Declaration block with three declarations. */
selector {
  declaration-one;
  declaration-two;
  declaration-three;
}

A declaration is a style. A declaration consists of a property and value pair. Syntax:

/* Style rule with three declarations (i.e., styles). */
selector {
  property-one: value-one;
  property-two: value-two;
  property-three: value-three;
}

A property is a characteristic of content defined by CSS. A value is a specific option of a characteristic that can be assigned to a property. For example, the color property is a characteristic of text, and the black value is a specific option of color that can be assigned to a property, such as color. The colon (:) character in the declaration assigns the value to the property, thereby defining a style. The semicolon (;) character designates the end of the declaration (i.e., style), after which another declaration (i.e., style) may follow inside the declaration block. The semicolon (;) character after the last or only declaration in the declaration block is optional.

A couple style rule examples:

/* Style rule with two declarations (i.e., styles). */
h1 {
  font-style: italic;
  text-decoration: underline;
}

/* Optional semicolon (;) character not used after the last/only declaration in the declaration block. */
.red {
  color: #f00
}

/* Optional semicolon (;) character used after the last/only declaration in the declaration block. */
:link {
  color: #000;
}

The selector is often used to refer to a style rule by name. For example:

/* Heading one or h1 style rule. */
h1 {
  font-style: italic;
  text-decoration: underline;
}

/* Red, dot red, or .red style rule. */
.red {
  color: #f00;
}

/* Link or :link style rule. */
:link {
  color: #000;
}

2.2. Comments

A CSS comment is text in a style sheet (embedded or external) that is not interpreted by, and, therefore, is ignored by, a user agent. Comments typically serve as a note/reminder (i.e., comment) about the surrounding, interpreted code. CSS comments are preceded by a forward slash and asterisk (/*) characters and followed by an asterisk and forward slash (*/) characters. CSS comments can be single line or multiple line. CSS comments cannot be nested. Syntax:

/* CSS comment in an embedded style sheet or an external style sheet. */

selector { declaration block } /* Single line CSS comment at the end of a line (recommended). */

/* Single line CSS comment at the start of a line (not recommended). */ selector { declaration block }

/* Single line CSS comment as the entire line. */

/* Multiple
 line CSS
 comment. */

/*
Multiple
line CSS
comment.
*/

/* Multiple line CSS
 * comment using an
 * asterisk (*) character
 * convention. */

/*
 * Multiple line CSS
 * comment using a different
 * asterisk (*) character
 * convention.
 */

/*Multiple line CSS
    comment

      *  following
no apparent

*
  convention.
    */

2.3. Grouping Selectors And Grouping Declarations

Grouping selectors and grouping declarations allow multiple style rules to be combined (i.e., grouped) into a single style rule. This reduces style sheet size.

Selectors with the same declaration block can be grouped into a comma-separated selector. For example:

p {
  color: #00f;
}
.blue {
  color: #00f;
}
:hover {
  color: #00f;
}

Is equivalent to:

p, .blue, :hover {
  color: #00f;
}

Conversely, declarations with the same selector can be grouped into a semicolon separated declaration block. For example:

h2 {
  font-style: italic;
}
h2 {
  text-decoration: underline;
}

Is equivalent to:

h2 {
  font-style: italic;
  text-decoration: underline;
}

2.4. Valid Properties, Values, And The Handling Of Invalid Styles

The W3C CSS Recommendations define the valid properties for each element and group of related elements. For example, for the h1 and p block-level elements, the background-color and color properties are valid, but the vertical-align and empty-cells properties are invalid.

The W3C CSS Recommendations also define the valid values for each property and group of related properties. For example, for the margin-top and padding-top box model properties, the 7px and 0.5em values are valid, but the arial and italic values are invalid.

The W3C CSS Recommendations define a valid style as a declaration with a valid property, value, and syntax, and an invalid style as a declaration with an invalid property, value, or syntax. Moreover, conforming user agents are to respect valid styles and are to ignore invalid styles. In other words, validity occurs at the level of a style, not at the level of a style rule.

Consider, for example, the following style rules:

h1 {
  vertical-align: left; /* First declaration's property is invalid. */
  background-color: #000;
  color: #0f0;
}
h2 {
  font-family: arial;
  background-color: justify; /* Second declaration's value is invalid. */
  color: #0f0;
}
h3 {
  font-family: arial;
  background-color: #000;
  color="#0f0"; /* Third declaration's syntax is invalid. */
}

 /* All three declarations are invalid. */
h4 {
  vertical-align: left;
  background-color: justify;
  color="#0f0";
}

User agents are to interpret the style rules as:

h1 {
  background-color: #000;
  color: #0f0;
}
h2 {
  font-family: arial;
  color: #0f0;
}
h3 {
  font-family: arial;
  background-color: #000;
}
h4 {}

2.5. The HTML Document Tree And The Inheritance Of Style

The HTML document tree is a diagram of the elements that constitute an HTML document. The diagram is similar in shape to a tree in that it has a root and branches. By convention, though, the root is placed at the top of the diagram.

Suppose, for example, that an HTML document has the following source code:

<html>
 <body>
  <h1>Heading 1 With Some Text <em>Emphasized</em></h1>
  <p>Paragraph with some text <b>bold</b> and <i>italic</i>.</p>
 </body>
</html>

Its HTML document tree is:

     Document Tree                Root Of

          html              Entire HTML Document
           |                        ||
           |                       \  /
           |                        \/
          body                   Content
          / \                       ||
         /   \                     \  /
       h1     p                     \/
       |     / \
       |    /   \
      em   b     i

The html element is the root (i.e., origin) of the HTML document, itself. The body element is the root of content.

An HTML document tree depicts and is frequently used to define the terms, parent, child, sibling, ancestor, descendant, and inheritance.

A parent is an element in the same branch as, and one level above, another element in the HTML document tree. For example, in the HTML document tree above: 1.) the html element is the parent of the body element; 2.) the body element is the parent of the h1 and p elements; 3.) the h1 element is the parent of the em element; and 4.) the p element is the parent of the b and i elements. But, for example: 1.) the h1 element is not the parent of the b and i elements because the h1 element, and the b and i elements, are not in the same branch of the HTML document tree; and 2.) the body element is not the parent of the em, b, and i elements because the body element is more than one level above the em, b, and i elements in the HTML document tree.

Conversely, a child is an element in the same branch as, and one level below, another element in the HTML document tree. For example, in the HTML document tree above: 1.) the body element is the child of the html element; 2.) the h1 and p elements are the children of the body element; 3.) the em element is the child of the h1 element; and 4.) the b and i elements are the children of the p element. But, for example: 1.) the b and i elements are not the children of the h1 element because the b and i elements, and the h1 element, are not in the same branch of the HTML document tree; and 2.) the em, b, and i elements are not the children of the body element because the em, b, and i elements are more than one level below the body element in the HTML document tree.

Siblings are two or more elements one level below the same element in the HTML document tree. For example, in the HTML document tree above: 1.) the h1 and p elements are siblings of the body element; and 2.) the b and i elements are siblings of the p element. But, for example, the em and b elements are not siblings because the em and b elements are more than one level below the same element in the HTML document tree.

According to the definitions for parent, child, and sibling; 1.) a parent can have one or more children, 2.) a child has only one parent, and 3.) siblings are the children of the same parent. In other words, looking at the source code; 1.) a parent contains (i.e., encloses) one or more children, 2.) a child is contained within a single parent, and 3.) siblings are two or more children contained within the same parent.

An ancestor is an element in the same branch as, and one or more levels above, another element in the HTML document tree. For example, in the HTML document tree above: 1.) the html element is the ancestor of the body, h1, p, em, b, and i elements; 2.) the body element is the ancestor of the h1, p, em, b, and i elements; 3.) the h1 element is the ancestor of the em element; and 4.) the p element is the ancestor of the b and i elements. But, for example, the h1 element is not the ancestor of the b and i elements because the h1 element, and the b and i elements, are not in the same branch of the HTML document tree.

Conversely, a descendant is an element in the same branch as, and one or more levels below, another element in the HTML document tree. For example, in the document tree above: 1.) the body element is the descendant of the html element; 2.) the h1 and p elements are the descendants of the body and html elements; 3.) the em element is the descendant of the h1, body, and html elements; and 4.) the b and i elements are the descendants of the p, body, and html elements. But, for example, the b and i elements are not the descendants of the h1 element because the b and i elements, and the h1 element, are not in the same branch of the HTML document tree.

According to the definitions for ancestor and descendant: 1.) ancestors include an element's parent, its parent's parent, its parent's parent's parent, etc.; and 2.) descendants includes an element's children, its children's children, and its children's children's children, etc.

One of the most important aspects of CSS is inheritance. Inheritance is the transferring of style from ancestors to descendants and the receiving of style by descendants from ancestors.

The W3C CSS Recommendations define which properties are inheritable and which are not inheritable. In other words, inheritance occurs at the level of a style, not at the level of a style rule. For the most part, whether or not a style is inheritable follows simple logic. For example, it makes sense that font-family, font-variant, font-style, font-weight, and font-size font property styles are inheritable, but that margin, padding, and border box model property styles are not inheritable. An inheritable style is inherited only if its property is valid for the descendant(s).

Consider, for example, the following code:

<p>Paragraph with some text <b>bold</b> and <i>italic</i>.</p>

Suppose, for example, that you want the entire paragraph, including the bold and italic text, styled color: red. One way to accomplish this is to assign the color: red style to all three elements, p, b, and i. An easier way to accomplish this is to take advantage of inheritance. Notice in this example that the p element is the parent of the b and i elements. Moreover, the color property is inheritable and is valid for the b and i elements. Therefore, taking advantage of inheritance, the entire paragraph, including the bold and italic text, can be styled color: red simply by assigning the color: red style to the p parent element.

2.6. !important Styles

As described in the cascade's rules for resolving style conflicts (below), by default, when style conflicts occur, author styles override user styles. To allow user styles to override author styles, the W3C CSS Recommendations define !important styles. Author styles and user styles can be marked !important. !important styles override normal (i.e., non-!important) styles, and !important user styles override !important author styles.

The marking of !important occurs at the level of a style, not at the level of a style rule. To mark a style !important, add !important or ! important just inside the style declaration ending semicolon (;). For example, in the following style rule, the font-family: arial, padding: 0px, and border: 2px red solid styles are marked !important:

body {
  font-family: arial !important;
  font-size: 15px;
  padding: 0px ! important;
  background-color: #eee;
  border: 2px #f00 solid !important;
}

A style with a shorthand property marked !important marks all of its subproperties !important.

2.7. Style Rule Syntax And Conventions

• The order of style rules in a style sheet does not matter except for the order of style rules with pseudo-classes as selectors.
  Due to the cascade's rules for resolving style conflicts (below), specifically, if two styles have the same weight and origin, the latter specified wins, it is strongly recommended that style rules with pseudo-classes as selectors are listed in your style sheets in the following order: :link before :visited before :hover before :active, and :focus optional but typically after :hover or :active. If they are listed in a different order, a style assigned to a pseudo-class listed earlier in your style sheets might not be applied to content as expected because it is being overridden by a style assigned to a pseudo-class listed later in your style sheets.
• Elements and pseudo-classes are not case-sensitive. For example, body and BODY are equivalent and :link and :LINK are equivalent.
• The value assigned to the class attribute, which corresponds to the class-name selector:
  • Are case-sensitive. For example, class='red' and .RED are not equivalent.
  • Can contain letters (A-Za-z), digits (0-9), and the underscore (_) and hyphen (-) characters. Spaces and line breaks are not allowed.
  • The first character must be a letter (A-Za-z). The first character cannot be a digit (0-9) or the underscore (_) or hyphen (-) characters.
  • Use a single word or multiple concatenated words that preferably describe the content, not the style. For example, if keywords are to be styled background-color: yellow, use class="keyword" and .keyword, not class="yellow" and .yellow. The reason for describing the content instead of the style is that if you decide to change the style for keywords to, for example, background-color: green, then the value assigned to the class attribute, which corresponds to the class-name selector, would no longer reflect the style, which could be confusing.
• Class-names are preceded by a period (.) character.
• Pseudo-classes are preceded by a colon (:) character.
• Properties and values are not case-sensitive. For example, font-family: arial and FONT-FAMILY: ARIAL are equivalent.
• Spaces and line breaks before and after declarations, properties, values, and !important are optional. For example, {font-family:arial!important;font-size:2em} and { font-family : arial
!important ;
font-size : 2em } are equivalent.
• Declarations are separated by a semicolon (;) character.
• The order of declarations does not matter.
• A semicolon (;) character after a declaration block's last or only declaration is optional. For example, { font-family: arial } and { font-family: arial; } are equivalent.
• Properties and values are separated by a colon (:) character.
• A space between ! and important is optional. For example, !important and ! important are equivalent.
• A common convention for writing style rules places the selector and opening left curly bracket ({) character on the first line, each style on its own line indented by two space ( ) characters (shown) or a tab, and the closing right curly bracket (}) character on the last line:

  selector {
    property-one: value-one;
    property-two: value-two;
    property-three: value-three;
  }
  

3. Creating Style Rules And Attaching Styles To Content

A style rule is the basic CSS unit attached to content for the purpose of styling content. A style rule consists of a selector and a declaration block. Syntax:

selector {
  declaration block
}

A selector is the element(s), and/or class-name(s), and/or pseudo-class(es) to which a style rule applies. A selector is the bridge (i.e., common denominator or link) between a style rule and an HTML document via which style is attached to content.

A declaration block assigns one or more styles to a selector. A declaration block consists of one or more declarations, each declaration representing a style. Syntax:

/* Declaration block with three declarations. */
selector {
  declaration-one;
  declaration-two;
  declaration-three;
}

A declaration is a style. A declaration consists of a property and value pair. Syntax:

/* Style rule with three declarations (i.e., styles). */
selector {
  property-one: value-one;
  property-two: value-two;
  property-three: value-three;
}

A property is a characteristic of content defined by CSS. A value is a specific option of a characteristic that can be assigned to a property. For example, the property, color, is a characteristic of text, and the value, black, is a specific option of color that can be assigned to a property, such as color. The colon (:) character in the declaration assigns the value to the property, thereby defining a style. The semicolon (;) character designates the end of the declaration (i.e., style), after which another declaration (i.e., style) may follow inside the declaration block. The semicolon (;) character after the last or only declaration in the declaration block is optional.

3.1. Elements As Selectors

An element is an HTML structure type attached to content through the use of markup. Elements, including the body element and all of its descendants, can serve as selectors.

3.1.1. The Body Element As Selector And Defining A Default Style For A Web Page/Site

The body element is the root (i.e., origin) and ancestor of all content. Due to inheritance, the styles attached to the body element that are inheritable and valid for its descendants are inherited by its descendants, and, therefore, define a default style for a web page/site.

To maximize the benefit of inheritance, the body style rule should be assigned the styles desired for the majority of a web page's/site's content. With the styles for the majority of content accounted for by the body style rule, the only remaining style rules needed are for the minority of content whose styles are to deviate from the web page's/site's default style.

A style rule with the body element as selector. Syntax:

body {
  declaration block
}

Suppose, for example, that you want the majority of a web page's/site's content styled font-family: arial, background-color: lightgrey, color: black, and font-size: 16px. The following style rule provides this:

body {
  font-family: arial;
  background-color: lightgrey;
  color: black;
  font-size: 16px;
}

To attach the styles to content, use the body element in markup. Syntax:

<body>content</body>

The styles attached to content:

<body>
 body styled via the body style rule.
 <h1>h1 styled via the body style rule.</h1>
 <p>p styled via the body style rule.</p>
</body>

The styles applied to content: 3.1.1. The Body Element As Selector And Defining A Default Style For A Web Page/Site (learnwebcoding.com).

3.1.2. Elements Other Than The Body Element As Selectors

Elements other than the body element not only can inherit styles from the body style rule, but can serve as selectors themselves.

A style rule with an element other than the body element as selector. Syntax:

element {
  declaration block
}

Suppose, for example, that in addition to wanting the majority of a web page's/site's content styled font-family: arial, background-color: lightgrey, color: black, and font-size: 16px, you also want h1 headings styled font-style: italic and paragraphs styled margin-left: 20px. The following style rules provide this:

body {
  font-family: arial;
  background-color: lightgrey;
  color: black;
  font-size: 16px;
}
h1 {
  font-style: italic;
}
p {
  margin-left: 20px;
}

To attach the styles to content, use the elements in markup. Syntax:

<element>content</element>

The styles attached to content:

<body>
 body styled via the body style rule.
 <h1>h1 styled via the body and h1 style rules.</h1>
 <p>p styled via the body and p style rules.</p>
</body>

The styles applied to content: 3.1.2. Elements Other Than The Body Element As Selectors (learnwebcoding.com).

3.2. Class-Names As Selectors

Style rules with elements as selectors bind elements and styles to one another. As a result, using elements as selectors is rather restrictive for styling content in that an element's style is fixed. To provide flexibility for styling content, the W3C HTML 4.0 Recommendation defines the class attribute and the W3C CSS1 Recommendation defines the value assigned to it, class-name, as a selector.

Class-name is an author declared name that; 1.) is assigned as the value to a class attribute, and 2.) is used as a selector. Style rules with class-names as selectors separate elements and styles from one another by placing an intermediary, the class-name value/selector, between them. As a result, using class-names as selectors provides the following flexibility for styling content; 1.) different instances of the same element (e.g., different instances of the div element) can have a different style attached to it, and, conversely, 2.) a single style can be attached to different instances of different elements.

A style rule with class-name as selector. Syntax:

.class-name {
  declaration block
}

Suppose, for example, that in addition to wanting the majority of a web page's/site's content styled font-family: arial, background-color: lightgrey, color: black, and font-size 16px, h1 headings styled font-style: italic, and paragraphs styled margin-left: 20px, you also want some of the h1 headings and paragraphs styled color: red or color: blue. The following style rules provide this:

body {
  font-family: arial;
  background-color: lightgrey;
  color: black;
  font-size: 16px;
}
h1 {
  font-style: italic;
}
p {
  margin-left: 20px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}

To attach the styles to content, use the h1 and p elements with the class attribute assigned the class-name in markup. Syntax:

<element class="class-name">content</element>

An element with the class attribute assigned a class-name in markup is known as a classed element. All of the descendants of the body element can be classed.

The styles attached to content:

<body>
 body styled via the body style rule.
 <h1>h1 styled via the body and h1 style rules.</h1>
 <p>p styled via the body and p style rules.</p>
 <h1 class="red">h1 styled via the body, h1, and .red style rules.</h1>
 <p class="red">p styled via the body, p, and .red style rules.</p>
 <h1 class="blue">h1 styled via the body, h1, and .blue style rules.</h1>
 <p class="blue">p styled via the body, p, and .blue style rules.</p>
</body>

The styles applied to content: 3.2. Class-Names As Selectors (learnwebcoding.com).

Suppose, for example, that you want text styled with all possible combinations of background-color: yellow, margin-left: 20px, and border: 1px solid black. There are two ways to accomplish this.

The first is to create a style rule for each possible combination of styles. The following style rules, seven total, provide this:

.background-color { background-color: yellow; }
.background-color-margin-left { background-color: yellow; margin-left: 20px; }
.background-color-border { background-color: yellow; border: 1px solid black; }
.background-color-margin-left-border { background-color: yellow; margin-left: 20px; border: 1px solid black; }
.margin-left { margin-left: 20px; }
.margin-left-border { margin-left: 20px; border: 1px solid black; }
.border { border: 1px solid black; }

The styles attached to content:

<p class="background-color">p styled via the .background-color style rule.</p>
<p class="background-color-margin-left">p styled via the .background-color-margin-left style rule.</p>
<p class="background-color-border">p styled via the .background-color-border style rule.</p>
<p class="background-color-margin-left-border">p styled via the .background-color-margin-left-border style rule.</p>
<p class="margin-left">p styled via the .margin-left style rule.</p>
<p class="margin-left-border">p styled via the .margin-left-border style rule.</p>
<p class="border">p styled via the .border style rule.</p>

The styles applied to content: 3.2. Class-Names Representing Multiple Styles As Selectors (learnwebcoding.com).

The second is to take advantage that the class attribute can be assigned multiple space separated class-names in markup. Syntax:

<element class="class-name-one class-name-two class-name-three">content</element>

When the class attribute is assigned multiple class-names, all of the styles associated with all of the assigned class-names are applied to the content. Taking advantage of this, instead of creating a style rule for each possible combination of styles, it is only necessary to create a style rule for each individual style. The following style rules, only three total, provide this:

.background-color {
  background-color: yellow;
}
.margin-left {
  margin-left: 20px;
}
.border {
  border: 1px solid black;
}

The styles attached to content:

<p class="background-color">p styled via the .background-color style rule.</p>
<p class="background-color margin-left">p styled via the .background-color and .margin-left style rules.</p>
<p class="background-color border">p styled via the .background-color and .border style rules.</p>
<p class="background-color margin-left border">p styled via the .background-color, .margin-left, and .border style rules.</p>
<p class="margin-left">p styled via the .margin-left style rule.</p>
<p class="margin-left border">p styled via the .margin-left and .border style rules.</p>
<p class="border">p styled via the .border style rule.</p>

The styles applied to content: 3.2. Class-Names Representing Single Styles As Selectors (learnwebcoding.com).

3.2.1. Classing The Generic Inline Span Element And The Generic Block-Level Div Element

The W3C HTML Recommendations define two generic elements; 1.) a generic inline element, span, and 2.) a generic block-level element, div. Generic, in this context, means stripped of all style except that required to define the span element as an inline element and the div element as a block-level element. In other words, the span element is a minimally structured inline element, and the div element is a minimally structured block-level element.

Being blank canvases, so to speak, the span and div elements are well suited for styling content when removing the structural information from a structured (i.e., nongeneric) element is counterproductive or cannot be accomplished to satisfaction.

Suppose, for example, that you want keywords styled background-color: yellow. The following style rule provides this:

.keyword {
  background-color: yellow;
}

Classing the generic inline span element is well suited for styling keywords. To class the span element, use the span element with the class attribute assigned the class-name in markup. The style attached to content:

<p>The keyword in this sentence is <span class="keyword">me</span> styled via the .keyword style rule.</p>

The style applied to content: 3.2.1. Classing The Generic Inline Span Element (learnwebcoding.com).

Suppose, for example, that you want to create a tableless three column web page layout. The following style rules provide this (background-color and height added solely for aesthetics):

.sidebar-left {
  float: left;
  width: 20%;
  background-color: #fcc;
  height: 500px;
}
.main {
  float: left;
  width: 60%;
  background-color: #cfc;
  height: 500px;
}
.sidebar-right {
  float: left;
  width: 20%;
  background-color: #ccf;
  height: 500px;
}

Classing the generic block-level div element is well suited for creating a tableless multicolumn web page layout. To class the div element, use the div element with the class attribute assigned the class-name in markup. The styles attached to content:

<div class="sidebar-left">Left sidebar styled via the .sidebar-left style rule.</div>
<div class="main">Main section styled via the .main style rule.</div>
<div class="sidebar-right">Right sidebar styled via the .sidebar-right style rule.</div>

The styles applied to content: 3.2.1. Classing The Generic Block-Level Div Element (learnwebcoding.com).

3.3. Pseudo-Classes As Selectors

The W3C CSS Recommendations define a mechanism for attaching style to content based on the content's state with respect to user interaction with the content. This mechanism, reminiscent of the class attribute, but HTML independent, uses selectors known as pseudo-classes. The W3C CSS2 Recommendation divides pseudo-classes into two types; 1.) link pseudo-classes, and 2.) dynamic pseudo-classes.

The W3C CSS2 Recommendation defines two link pseudo-classes. The link pseudo-classes attach style to links based on the link's state with respect to user interaction with the links as follows:

The W3C CSS2 Recommendation defines three dynamic pseudo-classes. The dynamic pseudo-classes attach style to content (which, by default, includes links) based on the content's state with respect to user interaction with the content as follows:

Style rules with pseudo-classes as selectors. Syntax:

:link {
  declaration block
}
:visited {
  declaration block
}
:hover {
  declaration block
}
:focus {
  declaration block
}
:active {
  declaration block
}

Which, because user agents attach the pseudo-classes to links by default, are equivalent to:

a:link {
  declaration block
}
a:visited {
  declaration block
}
a:hover {
  declaration block
}
a:focus {
  declaration block
}
a:active {
  declaration block
}

To assign a style to all links regardless their state, either assign the style to each pseudo-class, or assign the style to the a element.

Suppose, for example, that you want all links styled font-style: italic, unvisited links styled text-decoration: underline, visited links styled color: silver and text-decoration: underline, hover links styled color: silver and text-decoration: none, and active links styled color: lime and text-decoration: none. The following style rules provide this:

a {
  font-style: italic;
}
a:link {
  text-decoration: underline;
}
a:visited {
  color: silver;
  text-decoration: underline;
}
a:hover {
  color: silver;
  text-decoration: none;
}
a:active {
  color: lime;
  text-decoration: none;
}

To attach the styles to content, use the a element with the href attribute assigned the URI value in markup. Syntax:

<a href="URI">Link text.</a>

The styles attached to content:

<a href="dummy_web_document01.html">Link 1 styled via the a, a:link, a:visited, a:hover, and a:active style rules.</a>
<a href="dummy_web_document02.html">Link 2 styled via the a, a:link, a:visited, a:hover, and a:active style rules.</a>
<a href="dummy_web_document03.html">Link 3 styled via the a, a:link, a:visited, a:hover, and a:active style rules.</a>

The styles applied to content: 3.3. Pseudo-Classes As Selectors (learnwebcoding.com).

As described in class-names as selectors (above), all of the descendants of the body element can be classed. This includes links styled with the pseudo-classes.

Suppose, for example, that in addition to wanting all links styled font-style: italic, unvisited links styled text-decoration: underline, visited links styled color: silver and text-decoration: underline, hover links styled color: silver and text-decoration: none, and active links styled color: lime and text-decoration: none, you also want the unvisited links styled color: black, color: red, or color: blue. The following style rules provide this:

a { font-style: italic; }
a:link { text-decoration: underline; }
a:visited { color: silver; text-decoration: underline; }
a:hover { color: silver; text-decoration: none; }
a:active { color: lime; text-decoration: none; }
.black { color: black; }
.red { color: red; }
.blue { color: blue; }

To attach the styles to content, use the a element with; 1.) the href attribute assigned the URI value in markup, and 2.) the class attribute assigned the class-name in markup. Syntax:

<a href="URI" class="class-name">Link text.</a>

The styles attached to content:

<a href="dummy_web_document04.html" class="black">Link 4 styled via the a, a:link, a:visited, a:hover, a:active, and .black style rules.</a>
<a href="dummy_web_document05.html" class="black">Link 5 styled via the a, a:link, a:visited, a:hover, a:active, and .black style rules.</a>
<a href="dummy_web_document06.html" class="black">Link 6 styled via the a, a:link, a:visited, a:hover, a:active, and .black style rules.</a>
<a href="dummy_web_document07.html" class="red">Link 7 styled via the a, a:link, a:visited, a:hover, a:active, and .red style rules.</a>
<a href="dummy_web_document08.html" class="red">Link 8 styled via the a, a:link, a:visited, a:hover, a:active, and .red style rules.</a>
<a href="dummy_web_document09.html" class="red">Link 9 styled via the a, a:link, a:visited, a:hover, a:active, and .red style rules.</a>
<a href="dummy_web_document10.html" class="blue">Link 10 styled via the a, a:link, a:visited, a:hover, a:active, and .blue style rules.</a>
<a href="dummy_web_document11.html" class="blue">Link 11 styled via the a, a:link, a:visited, a:hover, a:active, and .blue style rules.</a>
<a href="dummy_web_document12.html" class="blue">Link 12 styled via the a, a:link, a:visited, a:hover, a:active, and .blue style rules.</a>

The styles applied to content: 3.3. Pseudo-Classes And Class-Names As Selectors (learnwebcoding.com).

3.4. Inline Styles

An inline style is a style attached to content via the style attribute assigned a value whose syntax mimics that of a declaration block, minus the braces.

An inline style. Syntax:

<element style="property: value">content</element>

Suppose, for example, that you want a paragraph styled text-align: center, font-size: 50px, and margin-top: 100px. The following inline style accomplishes this:

<p style="text-align: center; font-size: 50px; margin-top: 100px">p styled via an inline style.</p>

The styles applied to content: 3.4. Inline Styles (learnwebcoding.com).

4. Style Sheets

A style sheet is a collection of style rules. The W3C HTML and CSS Recommendations define three types of style sheets; 1.) embedded style sheets, 2.) external style sheets, and 3.) imported style sheets. All three types of style sheets can simultaneously style content.

4.1. Embedded Style Sheets

An embedded style sheet is a collection of style rules located inside (i.e., embedded within) an HTML document. Specifically, an embedded style sheet is one or more style rules inside <style type="text/css"></style> tags placed in the <head></head> section of an HTML document. Syntax:

<html>
 <head>
  <title></title>
  <style type="text/css">
  ...list style rules here...
  </style>
 </head>
 <body>
  ...content here...
 </body>
</html>

The styles of an embedded style sheet are available to style, and are only available to style, the content of the HTML document in which the embedded style sheet is located.

4.2. External Style Sheets

An external style sheet is collection of style rules located outside (i.e., external to) an HTML document. Specifically, an external style sheet is one or more style rules in a text file having a .css file extension.

For the styles of an external style sheet to style content, the external style sheet must be associated with (i.e., linked to) an HTML document. To link an external style sheet to an HTML document, add the line, <link rel="stylesheet" type="text/css" href="anyFileName.css" />, where the value assigned to the href attribute is an absolute or relative path to an external style sheet, anyFileName.css, to the <head></head> section of an HTML document as follows:

<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="anyFileName.css" />
 </head>
 <body>
  ...content here...
 </body>
</html>

An external style sheet can be linked to multiple HTML documents, including those of an entire web site. To link an external style sheet to multiple HTML documents, add the line, <link rel="stylesheet" type="text/css" href="anyFileName.css" />, where the value assigned to the href attribute is an absolute or relative path to an external style sheet, anyFileName.css, to the <head></head> section of each HTML document.

Conversely, multiple external style sheets can be linked to an HTML document. To link multiple external style sheets to an HTML document, add the line, <link rel="stylesheet" type="text/css" href="anyFileName.css" />, where the value assigned to the href attribute is an absolute or relative path to an external style sheet, anyFileName.css, to the <head></head> section of an HTML document for each external style sheet to be linked. In the following example, three external style sheets, anyFileNameOne.css, anyFileNameTwo.css, and anyFileNameThree.css, are linked to an HTML document:

<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="anyFileNameOne.css" />
  <link rel="stylesheet" type="text/css" href="anyFileNameTwo.css" />
  <link rel="stylesheet" type="text/css" href="anyFileNameThree.css" />
 </head>
 <body>
  ...content here...
 </body>
</html>

The styles of an external style sheet are available to style the content of each HTML document to which the external style sheet is linked.

4.3. The Advantage Of External Style Sheets Over Embedded Style Sheets

Suppose, for example, that your web site has 50 web pages and you want the majority of the web site's content styled font-family: arial. A body style rule assigned the font-family: arial style provides this.

Implementing this style sitewide with embedded style sheets involves creating an embedded style sheet containing the body style rule, and then pasting the embedded style sheet into the <head></head> section of each of the web site's 50 web pages. Implementing this style sitewide with external style sheets involves creating an external style sheet, anyFileName.css, containing the body style rule, and than pasting the line, <link rel="stylesheet" type="text/css" href="anyFileName.css" />, where the value assigned to the href attribute is an absolute or relative path to the external style sheet, anyFileName.css, into the <head></head> section of each of the web site's 50 web pages. Hence, the amount of work required to implement the style sitewide with external style sheets or embedded style sheets is roughly the same.

But what if you decide to change the majority of the web site's content from font-family: arial to font-family: verdana? With embedded style sheets, because styles are embedded within each web page, this change would involve editing each of the web site's 50 web pages. With external style sheets, because styles are centrally located in a single file, this change would involve editing just one file, the external style sheet, anyFileName.css. Hence, the advantage of external style sheets over embedded style sheets: editing styles sitewide is much easier with external style sheets than embedded style sheets.

4.4. Imported Style Sheets

An imported style sheet is an external style sheet inserted (i.e., imported) into an embedded style sheet, external style sheet, or imported style sheet. Only external style sheets can be imported. The W3C CSS Recommendations define an @import statement that: 1.) indicates an absolute or relative path to the external style sheet, anyFileName.css, to be imported; and 2.) indicates where the imported style sheet is to be inserted, which is in the place of the @import statement, itself. Syntax:

@import "anyFileName.css";

Which is equivalent to:

@import url("anyFileName.css");

Multiple external style sheets can be imported into a style sheet. To import multiple external style sheets into a style sheet, create an @import statement for each external style sheet to be imported.

The @import statements function only if they are listed at the top of a style sheet. In other words, user agents are to respect @import statements listed at the top of a style sheet and are to ignore @import statements listed in a style sheet after a style rule. Consider, for example, the five @import statements in the following embedded style sheet:

<html>
 <head>
  <title></title>
  <style type="text/css">
  @import "anyFileNameOne.css"; /* Functions. */
  @import "anyFileNameTwo.css"; /* Functions. */
  body {
    font-family: arial;
    background-color: #fff;
    color: #000;
    font-size: 15px;
  }
  h1 {
    text-decoration: underline;
  }
  @import "anyFileNameThree.css"; /* Ignored. */
  p {
    margin-left: 20px;
  }
  .red {
    color: #f00;
  }
  @import "anyFileNameFour.css"; /* Ignored. */
  @import "anyFileNameFive.css"; /* Ignored. */
  .blue {
    color: #00f;
  }
  </style>
 </head>
 <body>
  ...content here...
 </body>
</html>

The first and second @import statements above are listed at the top of the style sheet and, therefore, function. The third, fourth, and fifth @import statements above are listed after a style rule (the body style rule) and, therefore, are ignored.

An imported style sheet can have one or more external style sheets imported into it, which can have one or more external style sheets imported into it, which can have one or more external style sheets imported into it, etc.

5. User Agent Styles, Author Styles, And User Styles

The W3C CSS Recommendations define three sources of style; 1.) user agents, 2.) authors, and 3.) users. All three sources of style can simultaneously style content.

5.1. User Agent Styles

Few, including those who consider themselves CSS and/or HTML experts, realize that user agents have a style sheet built into them whose styles: 1.) define and provide the structure types associated with HTML elements; 2.) are merged with author styles, if present, and user styles, if present, in styling content; and 3.) in the absence of author styles and user styles, are the only (i.e., default) styles applied to content; hence, the term, user agent default styles, which is frequently shortened to user agent styles.

Of all the valid properties for a given element, user agent styles use only those required to impart a basic structure type upon an element. In this respect, it can be said that HTML is a web language in which a minimum of styles, defined and provided by user agents, crudely layout (i.e., structure) content, and CSS is a web language in which additional styles, defined and provided by authors and users, refine the layout/presentation (i.e., style) of content.

The W3C CSS2 Recommendation includes a default style sheet for HTML 4 (w3.org) that user agent vendors are encouraged to implement. User agent vendors, however, are free to create their own user agent styles. For example, the user agent styles of Opera 6 - 8 appear to include an ~8 pixel padding assigned to its body style rule, and the user agent styles of Internet Explorer 5 - 7 appear to include an ~5 pixel padding top assigned to its list style types disc, circle, square, and none. User agents whose user agent styles differ significantly from the norm, however, have a negative impact on cross-browser compatibility and are denounced by authors and users. Accordingly, the differences between user agent styles have gradually decreased over time.

Besides acquiring user agent styles from their built-in style sheet, most user agents acquire additional user agent styles from their Options/Preferences. These additional user agent styles, which users can change, typically include fonts and colors for the body element and the link pseudo-classes. For example, in Firefox 30, click Menu | Options | Content. The Fonts & Colors fieldset appears:

5.2. Author Styles

Author styles are styles written by an author. As illustrated below, author styles include embedded style sheets, external style sheets, imported styles sheets, and inline styles:

       Embedded   External   Imported
       Style      Style      Style       Inline
       Sheets     Sheets     Sheets      Styles
              \       \         /       /
                 \     \       /     /
                    \   \     /   /
                       \ \   / /
                          \ /
                           |
                           |
                           |
                     Author Styles

5.3. User Styles

User styles are styles written by a user. As illustrated below, user styles include external style sheets and imported style sheets:

                External         Imported
                Style            Style
                Sheets           Sheets
                      \         /
                        \     /
                          \ /
                           |
                           |
                           |
                      User Styles

User styles allow users, particularly those with accessibility requirements, to style content. User styles require a user agent whose Options/Preferences allow the user to link their own external style sheet to content. For example, in Opera 12.17, click Menu | Settings | Preferences | Advanced | Content | Style Options. The My style sheet field appears:

6. The Cascade

The most important but least understood aspect of CSS is the cascade. The cascade is a component of a user agent. In short, for each web page, the cascade: 1.) processes author styles, if present, into an author styles list, and user styles, if present, into a user styles list; 2.) merges the user agent styles, author styles list, if present, and user style list, if present; 3.) resolves style conflicts; and 4.) creates a master style sheet whose styles the user agent's rendering engine applies to content in the web browser window.

The cascade also: 1.) allows user agent styles, author styles, and user styles to simultaneously style content; 2.) allows author styles and user styles to be partial styles (i.e., author styles and user styles need only assign the styles to add to, or change from, the user agents styles); 3.) provides modularity (i.e., authors, instead of needing to create a single large style sheet encompassing an entire web page/site, can think of their web pages/sites as consisting of sections (i.e., modules) each getting its own module-specific style sheet); and 4.) provides author/user balance (i.e., a mechanism for author styles to override user styles and, conversely, for user styles to override author styles).

The W3C CSS Recommendations define the cascade. User agent vendors, however, are free to create their own version of the cascade. User agents whose version of the cascade differs significantly from the norm, however, have a negative impact on cross-browser compatibility and are denounced by authors and users. Accordingly, the differences between user agent versions of the cascade have gradually decreased over time.

Perhaps some of the misunderstandings about the cascade comes from the W3C's own language. Consider, for example, the following two sentences describing one of the cascade's rules for resolving style conflicts, where reader means user, and UA's default values and the default style sheet mean user agent styles:

Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. - W3C CSS1 Recommendation.

The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. - W3C CSS2 Recommendation.

The problem with the W3C language above is that the cascade performs overriding at the level of a style, not at the level of a style sheet as the W3C language above suggests. In fact, if the cascade performed overriding at the level of a style sheet, as the W3C language above suggests, then author styles and user style would cancel out the user agent styles that define and provide the structure types associated with HTML elements, and, as a result, author styles and user styles could not be partial styles for they would need to include the user agent styles they just cancelled out.

Similarly, consider the following two sentences describing another one of the cascade's rules for resolving style conflicts, where rules means style rules:

Sort by order specified: if two rules have the same weight, the latter specified wins. - W3C CSS1 Recommendation.

Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. - W3C CSS2 Recommendation.

The problem with the W3C language above is that the cascade picks winners at the level of a style, not at the level of a style rule as the W3C language above suggests. In fact, if the cascade picked winners at the level of a style rule, as the W3C language above suggests, then author styles and user styles would cancel out the user agent styles that define and provide the structure types associated with HTML elements, and, as a result, author styles and user styles could not be partial styles for they would need to include the user agent styles they just cancelled out.

Besides the misunderstandings about the cascade that might arise from the W3C's own language, many who consider themselves CSS experts spread misconceptions about the cascade. The most common misconception about the cascade is that the styles of embedded style sheets, being closer to content, necessarily override the styles of external style sheets, which are further from content.

The cascade is not that difficult to understand. It is unfortunate, though, the poor language and misconceptions that have been associated with it. So, before starting, it is strongly recommended that you disabuse yourself of any preconceived notions about the cascade so that a clear understanding can be built unencumbered from scratch.

6.1. Overview Of The Cascade

The following diagrams provide an overview of the cascade. For each web page, the cascade: 1.) processes author styles, if present, into an author styles list, and user styles, if present, into a user styles list; 2.) merges the user agent styles, author styles list, if present, and user style list, if present; 3.) resolves style conflicts; and 4.) creates a master style sheet.

6.1.1. The Cascade By Diagram: Author Styles Present And User Styles Present

                      Author      User
                      Styles      Styles
                        |           |
                        |           |
                        |           |
        User          Author      User
        Agent         Styles      Styles
        Styles        List        List
               \        |        /
                 \      |      /
                   \    |    /
                     \  |  /
                       \|/
              Resolve Style Conflicts
                        |
                        |
                        |
                Master Style Sheet

6.1.2. The Cascade By Diagram: Author Styles Present And User Styles Absent

                              Author
                              Styles
                                |
                                |
                                |
            User              Author
            Agent             Styles
            Styles            List
                   \         /
                     \     /
                       \ /
              Resolve Style Conflicts
                        |
                        |
                        |
                Master Style Sheet

6.1.3. The Cascade By Diagram: Author Styles Absent And User Styles Present

                              User
                              Styles
                                |
                                |
                                |
            User              User
            Agent             Styles
            Styles            List
                   \         /
                     \     /
                       \ /
              Resolve Style Conflicts
                        |
                        |
                        |
                Master Style Sheet

6.1.4. The Cascade By Diagram: Author Styles Absent And User Styles Absent

                      User
                      Agent
                      Styles
                        |
                        |
                        |
                Master Style Sheet

6.2. The Cascade Processing Author Styles Into An Author Styles List And User Styles Into A User Styles List

For each web page, the cascade processes author styles, if present, into an author styles list, and user styles, if present, into a user styles list. As described in the cascade's rules for resolving style conflicts (below), the order of the styles in the author styles list and user styles list plays a role in how the cascade resolves style conflicts. Therefore, it is important to understand how the cascade processes author styles into an author styles list and user styles into a user styles list.

For the cascade processing author styles into an author styles list, think of the cascade as creating a giant embedded style sheet for each web page, replacing any links to external style sheets with the external style sheets, themselves, and replacing any @import statements with the external style sheets to be imported, themselves. For the cascade processing user styles into a user styles list, think of the cascade as creating a giant external style sheet, replacing any @import statements with the external style sheets to be imported, themselves.

Suppose, for example, that a web page has the following source code:

<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="extOne.css" />
  <style type="text/css">
   @import "impTwo.css";
   style rule k
   style rule l
   style rule m
  </style>
  <link rel="stylesheet" type="text/css" href="extTwo.css" />
 </head>
 <body>
  ...content here...
 </body>
</html>

And suppose that the external style sheets, extOne.css and extTwo.css, and imported style sheets, impOne.css, impTwo.css, and impThree.css, are:

extOne.css:

@import "impOne.css";
style rule d
style rule e

extTwo.css:

style rule n
style rule o
style rule p

impOne.css:

style rule a
style rule b
style rule c

impTwo.css:

@import "impThree.css";
style rule i
style rule j

impThree.css:

style rule f
style rule g
style rule h

To process the author styles into an author styles list, parse the web page's source code and replace the links to the external style sheets with the external style sheets, themselves, and replace the @import statements with the external style sheets to be imported, themselves, as shown below:

<html>
 <head>
  <title></title>
                                                                                      /style rule a
                                                               /@import "impOne.css";( style rule b
                                                              /                       \style rule c
  <link rel="stylesheet" type="text/css" href="extOne.css" />(  style rule d
                                                              \ style rule e
  <style type="text/css">
                                                   /style rule f
                          /@import "impThree.css";( style rule g
                         /                         \style rule h
   @import "impTwo.css";(  style rule i
                         \ style rule j
   style rule k
   style rule l
   style rule m
  </style>
                                                              /style rule n
  <link rel="stylesheet" type="text/css" href="extTwo.css" />( style rule o
                                                              \style rule p
 </head>
 <body>
  ...content here...
 </body>
</html>

Extracting the author styles line by line from top to bottom, the author styles list is:

style rule a
style rule b
style rule c
style rule d
style rule e
style rule f
style rule g
style rule h
style rule i
style rule j
style rule k
style rule l
style rule m
style rule n
style rule o
style rule p

6.3. The Cascade Merging The User Agent Styles, Author Styles List, User Styles List, And The Definition Of A Style Conflict

For each web page, the cascade merges (i.e., combines) the user agent styles, author styles list, if present, and user styles list, if present. That the cascade merges the user agent styles, author styles list, if present, and user styles list, if present: 1.) allows user agent styles, author styles, and user styles to simultaneously style content; and 2.) allows author styles and user styles to be partial styles (i.e., author styles and user styles need only assign the styles to add to, or change from, the user agent styles).

When merging the user agent styles, author styles list, if present, and user styles list, if present, the cascade also checks for and resolves style conflicts. A style conflict is two or more styles attached to content in the same web page having the same selector, the same property, but different values. In other words, style conflicts occur at the level of a style, not at the level of a style rule or style sheet. Style conflicts can occur: 1.) between the user agent styles, and/or author styles list, and/or user styles list; and 2.) within the author styles list and/or user styles list. Style conflicts can cause styles to not be applied to content as expected. Therefore, it is important to clearly understand the definition of a style conflict.

6.3.1. Styles With The Same Property, The Same Value, But Different Selectors: No Style Conflict

Consider, for example, the following style rules:

h1 {
  font-family: arial;
  margin-left: 1em;
}
h2 {
  font-family: arial;
  margin-left: 1em;
}

There are four styles above; 2 x font-family; arial, and 2 x margin-left: 1em. The two font-family; arial styles have the same property, the same value, but different selectors. The two margin-left: 1em styles have the same property, the same value, but different selectors. Styles with the same property, the same value, but different selectors do not have a style conflict.

6.3.2. Styles With The Same Selector, But Different Properties: No Style Conflict

Consider, for example, the following style rules:

body {
  font-family: "times new roman";
  font-size: 16px;
}
body {
  background-color: #fff;
}
body {
  color: #000;
}

There are four styles above; 1.) font-family: "times new roman", 2.) font-size: 16px, 3.) background-color: #fff, and 4.) color: #000. The styles have the same selector, but different properties. Styles with the same selector, but different properties do not have a style conflict. Moreover, their declarations can be grouped into a semicolon separated declaration block as follows:

body {
  font-family: "times new roman";
  font-size: 16px;
  background-color: #fff;
  color: #000;
}

6.3.3. Styles With The Same Selector, The Same Property, And The Same Value: No Style Conflict

Consider, for example, the following style rules:

a:visited {
  background-color: transparent;
  color: #000;
}
a:visited {
  background-color: transparent;
  color: #000;
}

There are four styles above; 2 x background-color: transparent, and 2 x color: #000. The two background-color: transparent styles have the same selector, the same property, and the same value. The two color: #000 styles have the same selector, the same property, and the same value. Styles with the same selector, the same property, and the same value do not have a style conflict. Rather, the styles are in duplicate and their declarations can be grouped into a semicolon separated declaration block, eliminating the duplicate styles, as follows:

a:visited {
  background-color: transparent;
  color: #000;
}

6.3.4. Styles With The Same Selector, The Same Property, But Different Values: Style Conflict

Consider, for example, the following style rules:

.special {
  font-family: tahoma;
  color: #000;
  font-size: 26px;
  border: 1px #000 solid;
}
.special {
  font-family: verdana;
  color: #000;
  border-width: 2px;
}
.special {
  font-family: consolas;
  font-size: 2em;
  border-color: #00f;
}
.special {
  font-family: courier;
  color: #fff;
  font-size: 2em;
  border-style: dotted;
}

There are sixteen styles above; 4 x font-family, 3 x color, 3 x font-size, 2 x border-width, 2 x border-color, and 2 x border-style. The four font-family styles have the same selector, the same property, but four different values. The three color styles have the same selector, the same property, but two different values. The three font-size styles have the same selector, the same property, but two different values. The two border-width styles have the same selector, the same property, but two different values. The two border-color styles have the same selector, the same property, but two different values. The two border-style styles have the same selector, the same property, but two different values. Styles with the same selector, the same property, but different values (regardless how many different values) have a style conflict. Moreover, until the cascade resolves the style conflicts, the .special style rule is essentially as follows:

.special {
  font-family: ???;
  color: ???;
  font-size: ???;
  border: ??? ??? ???;
}

6.4. The Cascade's Rules For Resolving Style Conflicts

The cascade resolves style conflicts. To resolve a style conflict is to assign a style, from those attached to content in the same web page having the same selector, the same property, but different values, to a selector. In other words, just as style conflicts occur at the level of a style, not at the level of a style rule or style sheet, style conflicts are resolved at the level of a style, not at the level of a style rule or style sheet. The styles that the cascade assigns to selectors to resolve style conflicts are said to override (i.e., to overwrite, to suppress, to prevail over, to win over) the styles not assigned.

The W3C CSS2 Recommendation defines the following rules for the cascade to resolve style conflicts:

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question. - W3C CSS2 Recommendation.
   Translation: Process author styles, if present, into an author styles list, and user styles, if present, into a user styles list. Then merge the user agent styles, author styles list, if present, and user styles list, if present, and find the style conflicts.
2. The primary sort of the declarations is by weight and origin: for normal declarations, author style sheets override user style sheets which override the default style sheet. For '!important' declarations, user style sheets override author style sheets which override the default style sheet. '!important' declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it. - W3C CSS2 Recommendation.
   Translation: First try to resolve style conflicts based on the weight and origin of the conflicting styles, where weight means whether a style is marked !important or is normal (i.e., non-!important), and origin means whether a style is a user agent style, author style, or user style. For normal styles, author styles override user styles which override user agent styles. For !important styles, user styles override author styles which override user agent styles. Regardless of origin, !important styles override normal styles. The origin of the styles of an imported style sheet is the same as the origin of the style sheet with the @import statement.
   That author styles can override user styles and, conversely, user styles can override author styles, defines author/user balance. The combination of marking styles !important, and the cascade's rule for resolving style conflicts based on the weight of the conflicting styles, provides the mechanism for author/user balance.
3. The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. - W3C CSS2 Recommendation.
4. Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself. - W3C CSS2 Recommendation.
   Translation: If conflicting styles have the same weight and origin, and, therefore, cannot be resolved by rule 2 above, then the styles listed later in the author styles list override the styles listed earlier in the author styles list, and the styles listed later in the user styles list override the styles listed earlier in the user styles list. Reflecting that @import statements function only if they are listed at the top of a style sheet, and that @import statements indicate where the imported style sheets are to be inserted, which is in the place of the @import statements, themselves, the styles of an imported style sheet are listed earlier than the styles of the style sheet with the @import statement.

6.5. The Firefox 30 Cascade In Action

For the Firefox 30 cascade in action example that follows: 1.) the user agent is Firefox 30; 2.) author styles are present and include an embedded style sheet and an external style sheet, but user styles are absent; and 3.) the selectors are limited to the body, h1, p, and a elements, the :link, :visited, and :hover pseudo-classes, and a couple class-names.

6.5.1. Approximating The Firefox 30 User Agent Styles

The Firefox 30 user agent styles appear to be based on the Firefox built-in style sheet html.css (hg.mozilla.org) file. Therefore, for the selectors in this example, the user agent styles from the Firefox 30 built in style sheet are:

body {
  display: block;
  margin: 8px;
}
h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0;
}
p {
  display: block;
  margin: 1em 0;
}

Like most user agents, Firefox 30 acquires additional user agent styles from its Options/Preferences. In Firefox 30, click Menu | Options | Content. The Fonts & Colors fieldset appears: For the selectors in this example, the user agent styles from the Firefox 30 Options are:

body {
  font-family: "times new roman";
  font-size: 16px;
  background-color: #fff;
  color: #000;
}
a {
  text-decoration: underline;
}
:link {
  color: #00e;
}
:visited {
  color: #551a8b;
}

Merging the user agent styles from the Firefox 30 built-in style sheet and from the Firefox 30 Options results in the following approximation of the Firefox 30 user agent styles for the selectors in this example:

body { display: block; margin: 8px; font-family: "times new roman"; font-size: 16px; background-color: #fff; color: #000; }
h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; }
p { display: block; margin: 1em 0; }
a { text-decoration: underline; }
:link { color: #00e; }
:visited { color: #551a8b; }

6.5.2. The Firefox 30 Cascade Processing Author Styles Into An Author Styles List

For each web page, the cascade processes author styles, if present, into an author styles list, and user styles, if present, into a user styles list. In this example, author styles are present and include an embedded style sheet and an external style sheet, but user styles are absent. Therefore, in this example, the Firefox 30 cascade processes author styles into an author styles list, but no user styles list is generated.

Suppose that the source code for the web page in this example is as follows:

<html>
 <head>
  <title></title>
  <style type="text/css">
   body { font-family: arial, verdana, "times new roman"; font-size: 12px; background-color: #eee; }
   h1 { text-decoration: underline; }
   p { margin-left: 1em; }
   a { font-style: italic; background-color: #fff; text-decoration: underline; }
   a:link { color: red; }
   a:visited { color: grey; }
   .special { font-size: 12px; font-family: "times new roman"; border: 2px #0000ff solid; padding: 0px 6px; margin-right: 10%; }
  </style>
  <link rel="stylesheet" type="text/css" href="cascade_in_action_external_style_sheet.css" />
 </head>
 <body>
  <div class="special">div .special</div>
  <h1>Heading 1</h1>
  <p>paragraph</p>
  <a href="cascade_in_action_dummy_web_document1.html">Link 1</a><br />
  <a href="cascade_in_action_dummy_web_document2.html">Link 2</a><br />
  <a href="cascade_in_action_dummy_web_document3.html">Link 3</a><br />
  <h1>Heading 1</h1>
  <p>paragraph</p>
  <p class="special">paragraph .special</p>
  <p class="green">paragraph .green</p>
 </body>
</html>

And suppose that the external style sheet in this example, cascade_in_action_external_style_sheet.css, is:

body { font-family: tahoma, "myriad web"; font-size: 20px; }
h1 { font-style: italic; }
a { background-color: transparent; }
a:hover { color: maroon; }
.special { font-size: 14px; background-color: #fff; padding-top: 6px; padding-bottom: 6px; }
.green { color: #008000; }

The Firefox 30 cascade processes the author styles in this example (i.e., the embedded style sheet and external style sheet above) into the following author styles list:

body { font-family: arial, verdana, "times new roman"; font-size: 12px; background-color: #eee; }
h1 { text-decoration: underline; }
p { margin-left: 1em; }
a { font-style: italic; background-color: #fff; text-decoration: underline; }
a:link { color: red; }
a:visited { color: grey; }
.special { font-size: 12px; font-family: "times new roman"; border: 2px #0000ff solid; padding: 0px 6px; margin-right: 10%; }
body { font-family: tahoma, "myriad web"; font-size: 20px; }
h1 { font-style: italic; }
a { background-color: transparent; }
a:hover { color: maroon; }
.special { font-size: 14px; background-color: #fff; padding-top: 6px; padding-bottom: 6px; }
.green { color: #008000; }

6.5.3. The Firefox 30 Cascade Merging The Firefox 30 User Agent Styles, Author Styles List, And Resolving Style Conflicts

For each web page, the cascade merges the user agent styles, author styles list, if present, and user styles list, if present, and resolves style conflicts. In this example, an author styles list is present, but a user styles list is absent. Therefore, in this example, the Firefox 30 cascade merges the Firefox 30 user agent styles, author styles list, and resolves style conflicts as follows:

Firefox 30 user agent: body { display: block; margin: 8px; font-family: "times new roman"; font-size: 16px; background-color: #fff; color: #000; }
Author former: body { font-family: arial, verdana, "times new roman"; font-size: 12px; background-color: #eee; }
Author latter: body { font-family: tahoma, "myriad web"; font-size: 20px; }
Merged/resolved: body { font-family: tahoma, "myriad web"; font-size: 20px; background-color: #eee; display: block; margin: 8px; color: #000; }

Firefox 30 user agent: h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; }
Author former: h1 { text-decoration: underline; }
Author latter: h1 { font-style: italic; }
Merged/resolved: h1 { font-style: italic; text-decoration: underline; display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; }

Firefox 30 user agent: p { display: block; margin: 1em 0; }
Author: p { margin-left: 1em; }
Merged/resolved: p { margin: 1em 0em 1em 1em; display: block; }

Firefox 30 user agent: a { text-decoration: underline; }
Author former: a { font-style: italic; background-color: #fff; text-decoration: underline; }
Author latter: a { background-color: transparent; }
Merged/resolved: a { background-color: transparent; font-style: italic; text-decoration: underline; }

Firefox 30 user agent: :link { color: #00e; }
Author: a:link { color: red; }
Merged/resolved: a:link { color: red; }

Firefox 30 user agent: :visited { color: #551a8b; }
Author: a:visited { color: grey; }
Merged/resolved: a:visited { color: grey; }

Firefox 30 user agent: .special does not exist.
Author former: .special { font-size: 12px; font-family: "times new roman"; border: 2px #00f solid; padding: 0px 6px; margin-right: 10%; }
Author latter: .special { font-size: 14px; background-color: #fff; padding-top: 6px; padding-bottom: 6px; }
Merged/resolved: .special { font-size: 14px; background-color: #fff; padding: 6px; font-family: "times new roman"; border: 2px #00f solid; margin-right: 10%; }

Firefox 30 user agent: :hover does not exist.
Author: a:hover { color: maroon; }
Merged/resolved: a:hover { color: maroon; }

Firefox 30 user agent: .green does not exist.
Author: .green { color: #008000; }
Merged/resolved: .green { color: #008000; }

6.5.4. The Firefox 30 Cascade Creating The Master Style Sheet

For each web page, the cascade creates a master style sheet whose styles the user agent's rendering engine applies to content in the web browser window. In this example, the Firefox 30 cascade creates the following master style sheet:

body { font-family: tahoma, "myriad web"; font-size: 20px; background-color: #eee; display: block; margin: 8px; color: #000; }
h1 { font-style: italic; text-decoration: underline; display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; }
p { margin: 1em 0em 1em 1em; display: block; }
a { background-color: transparent; font-style: italic; text-decoration: underline; }
a:link { color: red; }
a:visited { color: grey; }
.special { font-size: 14px; background-color: #fff; padding: 6px; font-family: "times new roman"; border: 2px #0000ff solid; margin-right: 10%; }
a:hover { color: maroon; }
.green { color: #008000; }

6.5.5. The Firefox 30 Rendering Engine Applying The Styles Of The Master Style Sheet To Content: Proof That This Is The Way CSS Works

For each web page, the cascade passes the master style sheet to the user agent's rendering engine, which applies the styles to the web page's content in the web browser window. In this example, the Firefox 30 cascade passes the master style sheet to the Firefox 30 rendering engine, which applies the styles to the web page's content in the Firefox 30 web browser window.

If this web page's understanding of CSS, as represented by this example's master style sheet, is correct, particularly: 1.) that user agents have a style sheet built into them whose styles; a.) define and provide the structure types associated with HTML elements, and b.) are merged with author styles and user styles in styling content; 2.) that style conflicts occur at, and are resolved at, the level of a style; and 3.) that the styles of an external style sheet can override the styles of an embedded style sheet, then the following two web pages should appear identical in Firefox 30; 1.) 6.5.5. Web Page Styled Via The Original Embedded Style Sheet And External Style Sheet (learnwebcoding.com), and 2.) 6.5.5. Web Page Styled Via The Firefox 30 Cascade In Action Master Style Sheet (learnwebcoding.com).

7. Resources And Additional Information

• Cascading Style Sheets, Level 1: W3C Recommendation 17 Dec 1996, Revised 11 Apr 2008 (w3.org)
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: W3C Recommendation 07 June 2011, Edited In Place 12 April 2016 To Point To New Work (w3.org)
• Sample Style Sheet For HTML 2.0 (w3.org)
• Default Style Sheet For HTML 4.0 (w3.org)
• W3C CSS Validation Service: Check Cascading Style Sheets (CSS) And (X)HTML Documents With Style Sheets (jigsaw.w3.org)
• HTML 3.2 Reference Specification: W3C Recommendation 14-Jan-1997 (w3.org)
• HTML 4.0 Specification: W3C Recommendation 18-Dec-1997 (w3.org)
• HTML 4.0 Specification: W3C Recommendation, Revised On 24-Apr-1998 (w3.org)
• HTML 4.01 Specification: W3C Recommendation 24 December 1999 (w3.org)
• XHTML 1.0 The Extensible HyperText Markup Language (Second Edition): A Reformulation Of HTML 4 In XML 1.0: W3C Recommendation 26 January 2000, Revised 1 August 2002 (w3.org)
• XHTML 1.1 - Module-Based XHTML: W3C Recommendation 31 May 2001 (w3.org)