SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
Browsers often have to deal with situations where more than one declaration refers to the same element and property.
h2 { color: blue; }
h2.intro { color: green; }
.container h2 { color: red; }
When there are conflicting declarations, the winner is determined by the rules of the cascade.
HTML documents may have three types of style sheets applied to them.
If you look at a web page in a browser, even a web page without any CSS file attached, there are some styles already in place.
Headings are often larger than other text. Unvisited links are usually blue and visited links are frequently purple.
Why? Because all browsers have an in-built style sheet that is used to define the default behaviour of HTML elements.
This style sheet is referred to as a “user-agent” style sheet.
“Users” are the people who visit our websites and interact with our content.
Some browsers have mechanisms that allow users to write their own style sheets. These style sheets are referred to as “user style sheets”.
User style sheets allow users to override style sheets for specific websites or for all websites that they visit.
Some browsers, like Chrome, have dropped support for user style sheets entirely.
However, there is a range of extensions that can perform this function to a lesser degree such as User CSS, StyleBot and Stylish.
As a web author, you can apply CSS styles to HTML document.
You can apply styles using three different methods; inline styles, header styles or external style sheets.
Inline styles are applied to elements in the HTML markup using the style attribute.
<!-- inline style -->
<p style="color:blue;">
Content here
</p>
Header styles are placed in the head of HTML documents using the <style> element.
<html>
<head>
<title>Site name</title>
<style>
p { color: green; }
</style>
</head>
<body>
</body>
</html>
External style sheets are applied using the <link> element.
<!doctype html>
<html>
<head>
<title>Site name</title>
<link
rel="stylesheet"
href="styles.css">
</head>
<body>
</body>
</html>
Users and authors can define any declaration as “more important” than other declarations.
Important declarations are written with the "!" delimiter token and "important" keyword following the declaration.
/* example of important */
h2 {
color: red !important;
}
As you will see, the CSS Cascade treats important declarations differently to normal declarations.
Browsers (or user-agents) have to deal with CSS rules coming from three possible origins - user-agent, user and author.
Browsers also have to deal with different types of declarations - important vs normal.
At some point, browsers have to deal with declarations that conflict.
Conflict is where more than one declaration refers to the same element and property.
In the following example, conflict occurs because three different rules all target the <h2> element, and define the same property - color.
h2 { color: blue; }
h2.intro { color: green; }
.container h2 { color: red; }
When conflicts like this occur, browsers need to determine which declarations will “win” (be applied to an HTML document).
Will the <h2> element be styled with a color value of blue, green or red?
In CSS2.1, there are four steps to determine which declaration will “win”.
Browsers must gather all the declarations that apply to an element and property from user-agent, user and author style sheets.
In the following example, there are four different declarations where the <h2> element has conflicting color properties.
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
#nav h2 { color: lime; }
Because there are conflicts, you will need to proceed to step 2.
For this second step, the gathered declarations are sorted according to origin (user-agent, user, author) and importance (normal or important).
In CSS2.1, there are five steps to determine how declarations are sorted.
From lowest to highest priority:
1. Normal user-agent declarations
2. Normal user declarations
3. Normal author declarations
4. Important author declarations
5. Important user declarations
This sort order means that if no other declarations exist, user-agent declarations win.
/* user-agent styles */
h2 { color: black; }
Normal user declarations beat user-agent declarations.
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
Normal author declarations beat user-agent declarations and normal user declarations.
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
Important author declarations beat all normal declarations.
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
h2 { color: purple !important; }
Important user declarations beat important author declarations and all normal declarations.
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
h2 { color: red !important; }
/* author styles */
h2 { color: blue; }
h2 { color: purple !important; }
But what if two declarations have the same origin or importance - like the two author declarations in the following example?
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
h2 { color: red; }
/* author styles */
h2 { color: blue; }
h2 { color: purple; }
If any declarations have the same origin or importance you will need to proceed to Step 3.
If declarations have the same origin or importance, then the declaration’s selectors need to be scored to see which declaration will “win”.
Four scores are concatenated (linked together as a chain) to create a final score. This score is referred to as a selector’s specificity.
selector specificity = a,b,c,d
A. Is there an inline style?
<p style="color:red;"></p>
a = 1 x inline styles
b = 0 x IDs
c = 0 x classes, pseudo-classes
d = 0 x elements, pseudo-elements
Specificity = 1,0,0,0
B. Count the number of ID selectors in the selector.
#nav { }
a = 0 x inline styles
b = 1 x IDs
c = 0 x classes, pseudo-classes
d = 0 x elements, pseudo-elements
Specificity = 0,1,0,0
C. Count the number of class selectors, attribute selectors or pseudo-class selectors in the selector.
.intro { }
a = 0 x inline styles
b = 0 x ID
c = 1 x classes, pseudo-classes
d = 0 x elements, pseudo-elements
Specificity = 0,0,1,0
D. Count the number of element type or pseudo-element selectors in the selector.
p { }
a = 0 x inline styles
b = 0 x ID
c = 0 x classes, pseudo-classes
d = 1 x elements, pseudo-elements
Specificity = 0,0,0,1
E. Ignore the universal selector.
* { }
a = 0 x inline styles
b = 0 x ID
c = 0 x classes
d = 0 x element
Specificity = 0,0,0,0
#nav ul { }
a = 0 x inline styles
b = 1 x ID (#nav)
c = 0 x classes
d = 1 x element (ul)
Specificity = 0,1,0,1
blockquote.special { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x class (.special)
d = 1 x element (blockquote)
Specificity = 0,0,1,1
a:link { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x pseudo-class (:link)
d = 1 x elements (a)
Specificity = 0,0,1,1
input[required] { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x attribute selector ([required])
d = 1 x elements (input)
Specificity = 0,0,1,1
p[class="a"] { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x attribute selector ([class="a"])
d = 1 x elements (p)
Specificity = 0,0,1,1
div[id="news"] { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x attribute selector ([id="news"])
d = 1 x elements (div)
Specificity = 0,0,1,1
::first-line { }
a = 0 x inline styles
b = 0 x IDs
c = 0 x classes
d = 1 x pseudo-element (::first-line)
Specificity = 0,0,0,1
#nav ul li a:hover { }
a = 0 x inline styles
b = 1 x ID (#nav)
c = 1 x pseudo-class (:hover)
d = 3 x elements (ul,li,a)
Specificity = 0,1,1,3
Generally speaking, A will always beat B, which will always beat C, which will always beat D.
No matter how many IDs are used in a selector, an inline style will always beat an ID selector.
In the following example, the inline style wins due to specificity - 1,0,0,0 beats 0,10,0,0.
/* author styles */
#one #two #three #four
#five #six #seven #eight
#nine #ten { color: green; }
<!-- HTML document -->
<h2 style="color: purple;">
Theoretically, no matter how many classes are applied to a selector, an ID will always beat classes.
Older Firefox browsers incorrectly implement the specification so that 256 classes will “beat” an ID.
In the following example, the ID selector wins due to specificity - 0,1,0,0 beats 0,0,10,0.
/* author styles */
.one .two .three .four
.five .six .seven .eight
.nine .ten { color: green; }
#nav { color: lime; }
Theoretically, no matter how many element types are applied to a selector, a class will always beat element types.
Older Firefox browsers incorrectly implement the specification so that 256 element types will "beat" a class.
In the following example, the class selector wins due to specificity - 0,0,1,0 beats 0,0,0,10.
/* author styles */
div div div div div
div div div div div { color: green; }
.intro { color: lime; }
In the following example, two author styles have the same specificity (0,0,1,1).
/* author styles */
.intro h2 { color: blue; }
h2.new { color: lime; }
If there is still no clear winner then you will need to proceed to Step 4.
If two declarations have the same importance, origin and specificity, the declaration that appears last in document order win.
In the following example, the second rule will win as it is written after the first rule.
/* author styles */
.intro h2 { color: blue; }
h2.new { color: lime; }
Declarations from imported style sheets are ordered as if their style sheets are substituted in place of the @import rule.
In the following example, declarations are ordered from a.css, then b.css then c.css.
@import "a.css";
@import "b.css";
@import "c.css";
Declarations from linked style sheets are treated as if they were concatenated in linking order, as determined by the host HTML document.
In the following example, declarations are ordered from a.css, then b.css then c.css.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">
</head>
<body>
</body>
</html>
Declarations from header style sheets are treated the same as linked style sheets - as if they were concatenated in linking order.
In the following example, declarations are ordered from a.css, then the header style, then b.css.
<html>
<head>
<title>Title</title>
<link rel="style sheet" href="a.css">
<style>h2 {color:blue;}</style>
<link rel="style sheet" href="b.css">
</head>
<body>
</body>
</html>
In the following example, what color would the <h2> element be?
/* user-agent style sheet */
h2 { color: black; }
/* user style sheet */
h2 { color: green; }
h2 { color: lime !important; }
/* author style sheet */
h2 { color: blue; }
h2 { color: red !important; }
Answer: The <h2> element will be lime because important user styles beat important author styles and all normal styles.
/* user-agent style sheet */
h2 { color: black; }
/* user style sheet */
h2 { color: green; }
h2 { color: lime !important; }
/* author style sheet */
h2 { color: blue; }
h2 { color: red !important; }
In the following example, what color would the <p> element be?
#nav p { color: lime; }
p { color: blue; }
div#container p { color: purple; }
p.intro { color: green; }
Answer: The <p> element will be purple because this selector has more specificity (0,1,0,2) than the other selectors.
#nav p { color: lime; }
/* 0,1,0,1 */
p { color: blue; }
/* 0,0,0,1 */
div#container p { color: purple; }
/* 0,1,0,2 */
p.intro { color: green; }
/* 0,0,1,1 */
Part 1: Guess the specificity of the following selector:
#header h1 span a { }
#header h1 span a { }
a = 0 x inline styles
b = 1 x ID (#header)
c = 0 x classes
d = 3 x elements (h1,span,a)
Specificity = 0,1,0,3
Part 2: Guess the specificity of the following selector:
.intro :first-letter { }
.intro :first-letter { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x class (.intro)
d = 1 x pseudo-element (:first-letter)
Specificity = 0,0,1,1
Part 3: Guess the specificity of the following selector:
a[href^="http:"] { }
a[href^="http:"] { }
a = 0 x inline styles
b = 0 x IDs
c = 1 x
attribute selector ([href^="http:"])
d = 1 x element (a)
Specificity = 0,0,1,1
In CSS3, there have been several additions to the overall cascade process.
In CSS 2.1, there were five steps to determine origin and importance. In CSS3, there are now some extra steps.
1. Normal user-agent declarations
2. Normal user declarations
3. Normal author declarations
4. Animation declarations
5. Important author declarations
6. Important user declarations
7. Important user-agent declarations
8. Transition declarations
Let’s take a look at these new steps and what they mean.
Animation declarations are declarations that involve animating the relevant element.
h2 {
-webkit-animation: heading 3s;
animation: heading 3s;
}
@-webkit-keyframes heading {
from {color: red;} to {color: lime;}
}
@keyframes heading {
from {color: red;} to {color: lime;}
}
Animation declarations beat normal user-agent, author and user declarations.
Important user-agent declarations are declarations within the user-agent style sheet.
Important user-agent declarations beat normal user-agent, author, user, and animation declarations.
Important user-agent declarations also override important author and user declarations.
Transition declarations are declarations that transition an element to another state.
h2 {
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
}
h2:hover {
color: purple;
}
Where relevant, transition declarations beat all other types of declaration.
/* user-agent styles */
h2 { color: black; }
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
h2{ animation: a 3s; }
@keyframes a {0% {color:red;} 100% {color:lime;}}
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
/* author styles */
h2 { color: blue; }
h2{ animation: aaa 3s; }
@keyframes a {0% {color:red;} 100% {color:lime;}}
h2 { color: purple !important; }
/* user-agent styles */
h2 { color: black; }
/* user styles */
h2 { color: green; }
h2 { color: red !important; }
/* author styles */
h2 { color: blue; }
h2{ animation: aaa 3s; }
@keyframes a {0% {color:red;} 100% {color:lime;}}
h2 { color: purple !important; }
/* user-agent styles */
h2 { color: black; }
h2 { color: pink !important; }
/* user styles */
h2 { color: green; }
h2 { color: red !important; }
/* author styles */
h2 { color: blue; }
h2{ animation: aaa 3s; }
@keyframes a {0% {color:red;} 100% {color:lime;}}
h2 { color: purple !important; }
/* user-agent styles */
h2 { color: black; }
h2 { color: pink !important; }
/* user styles */
h2 { color: green; }
h2 { color: red !important; }
/* author styles */
h2 { color: blue; }
h2{ animation: aaa 3s; }
@keyframes a {0% {color:red;} 100% {color:lime;}}
h2 { color: purple !important; }
h2 { transition: color 0.5s ease; }
As part of the “origin and importance” process, the CSS3 Cascade specification mentions override declarations.
Override declarations allow authors to manipulate the DOM using JavaScript and change a style, without having to modify any associated style sheets.
“The getOverrideStyle allows DOM author to change to the style of an element without modifying the style sheets of a document.”
However, none of the modern browsers support the getOverrideStyle method, so this can be quite confusing for authors.
Some aspects of the CSS3 cascade have been simplified here to make it easier to understand.
You can read more here: CSS Cascading and Inheritance Level 3.
Site Twitter Github Slideshare Linkedin