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:
Element | Name | Markup | Structure Type/Intended Purpose |
---|---|---|---|
h1 |
heading 1 | <h1></h1> |
A single line of text as a block, large font, bold, margin top and bottom. |
p |
paragraph | <p></p> |
One or more sentences as a block, normal font, margin top and bottom. |
table |
table | <table></table> |
Content as a block organized into columns and rows through the use of child elements, th , tr , and td . |
ol |
ordered list | <ol></ol> |
Content as a block organized into a numbered (i.e., ordered) list through the use of child element, li . |
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:
Date | Recommendation | Significance |
---|---|---|
Dec 1996 |
CSS1 | The first W3C CSS Recommendation. |
Jan 1997 |
HTML 3.2 |
The first W3C HTML Recommendation:
|
Dec 1997 |
HTML 4.0 |
A major update to the HTML 3.2 Recommendation:
|
Apr 1998 |
HTML 4.0, Revised | Primarily a document update that corrected errata in the December 1997 HTML 4.0 Recommendation. |
May 1998 |
CSS2 | A minor update to the CSS1 Recommendation. |
Dec 1999 |
HTML 4.01 | A minor update to the HTML 4.0 Recommendation. |
Jan 2000 |
XHTML 1.0 |
A reformulation of HTML 4 as an XML 1.0 application:
|
May 2001 |
XHTML 1.1 |
A reformulation of XHTML 1.0 Strict using XHTML modules:
|
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 does not have the authority to impose the implementation of its Recommendations. The W3C does, however, allow parties interested in the W3C Recommendations to become W3C members, which allows them to contribute to the W3C Recommendations. It is in allowing W3C members to contribute to the W3C Recommendations that the W3C Recommendations acquire their weight.
- A couple of the styles created by Netscape and Microsoft were incorporated into the W3C Recommendations. The others were discarded and became known as nonstandard HTML extensions.
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.
- Mozilla was never intended as an
official
product, but simply as a means for distributing and testing the Mozilla Project's new rendering engine, Gecko, as well as other features to be incorporated into the official product, Netscape, which, for various reasons, never gained much popularity. Although Mozilla and Netscape are no longer being developed, the Mozilla Project continues to develop Gecko and to build it into a number of so-called Mozilla-based web browsers. The Mozilla-based web browser currently being developed is Firefox. - 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; }
When the convention above results in too much vertical scrolling, the style rules are written as a single line:selector { property-one: value-one; property-two: value-two; property-three: value-three; }
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.
- That author styles can override user styles and, conversely, user styles can override author styles, defines author/user balance.
- In the W3C CSS1 Recommendation,
!important
author styles override!important
user styles. In the W3C CSS2 Recommendation,!important
user styles override!important
author styles. Since the W3C CSS2 Recommendation supersedes the CSS1 Recommendation, current user agents should support!important
user styles overriding!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
class
attribute, which corresponds to the class-name selector (e.g., class="word-word-word"
and .word-word-word
). This convention conforms with valid HTML and valid CSS.- 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
andBODY
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
, useclass="keyword"
and.keyword
, notclass="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 theclass
attribute, which corresponds to the class-name selector, would no longer reflect the style, which could be confusing.
- Are case-sensitive. For example,
- 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
andFONT-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
are equivalent.
!important ;
font-size : 2em } - 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
!
andimportant
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).
span
and div
elements is known as designing by style. Despite the flexibility and control that designing by style provides, it is strongly recommended that authors design by structure; 1.) it ensures that your web pages are structurally presentable
in user agents that do not support style or have support for style disabled, and 2.) user styles are practical only if the structured elements are present and can be used as selectors.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:
Link Pseudo-Class | Link State |
---|---|
:link |
Unvisited. |
:visited |
Visited. |
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:
Dynamic Pseudo-Class | Content State |
---|---|
:hover |
With the mouse cursor placed over it. |
:focus |
Ready to accept input. |
:active |
Between the mouse down click and the mouse up click. |
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; }
: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.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:
!important
. Lastly, in some user agents, the Options/Preferences related to style include a setting that appears to toggle whether the Options/Preferences related to style behave as if editing the user agent styles, or as if instantiating user styles with the nondefault styles selected marked !important
. Further discussion of this topic is beyond the scope of this page.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.
Author styles list
anduser styles list
are not W3C terms/concepts. I created these terms/concepts to facilitate an explanation and understanding of the cascade.- For information on:
- user agent styles, see user agent styles (above).
- author styles, see author styles (above).
- user styles, see user styles (above).
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:
Find all declarations that apply to the element and property in question
- W3C CSS2 Recommendation., for the target media type. Declarations apply if the associated selector matches the element in question.
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.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.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.Finally, sort by order specified: if two rules have the same weight, origin
- W3C CSS2 Recommendation.and specificity, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.
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; }
For additional information on:
- the cascade merging the user agent styles, author styles list, user styles list, and the definition of a style conflict, see the cascade merging the user agent styles, author styles list, user styles list, and the definition of a style conflict (above).
- the cascade's rules for resolving style conflicts, see the cascade's rules for resolving style conflicts (above).
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)