SPACEBAR tomove forward through slides.
SHIFT &SPACEBAR tomove backwards through slides.
LEFT ARROW &RIGHT ARROW tomove through sections.
ESC tosee overview andESC again to exit.
F toenter presentation mode andESC to exit.
Browsers often have to deal with situations wheremore than one declaration refers to the same element and property.
h2 {color: blue; }h2.intro {color: green; }.containerh2 {color: red; }When there are conflicting declarations, the winner is determined bythe rules of the cascade.
HTML documents may havethree 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 oftenlarger than other text. Unvisited links are usually blue and visited links are frequently purple.
Why? Because all browsers have anin-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 thepeople 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 tooverride style sheets for specific websites or for all websites that they visit.
Some browsers, like Chrome, havedropped support for user style sheets entirely.
However, there is a range of extensions that can perform this function to a lesser degree such asUser CSS,StyleBot andStylish.
As a web author, you canapply CSS styles to HTML document.
You can apply styles usingthree different methods; inline styles, header styles or external style sheets.
Inline styles are applied to elements in the HTML markup using thestyle attribute.
<!-- inline style --><pstyle="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 declarationsdifferently 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 thatconflict.
Conflict is where more than one declaration refers to thesame 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; }.containerh2 {color: red; }When conflicts like this occur, browsers need to determinewhich declarations will “win” (be applied to an HTML document).
Will the<h2> elementbe styled with acolor value ofblue,green orred?
In CSS2.1, there are four steps todetermine which declaration will “win”.
Browsers mustgather all the declarations that apply to an element and property from user-agent, user and author style sheets.
In the following example, there arefour different declarations where the<h2> element has conflictingcolor properties.
/* user-agent styles */h2 {color: black; }/* user styles */h2 {color: green; }/* author styles */h2 {color: blue; }#navh2 {color: lime; }Because there are conflicts, you will need to proceed tostep 2.
For this second step, the gathered declarations are sorted according toorigin (user-agent, user, author) andimportance (normal or important).
In CSS2.1, there arefive 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 declarationshave 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 thesame origin or importance you will need to proceed to Step 3.
If declarations have the same origin or importance, then the declaration’sselectors need to be scored to see which declaration will “win”.
Four scores areconcatenated (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 aninline style?
<pstyle="color:red;"></p>a = 1 x inline stylesb = 0 x IDsc = 0 x classes, pseudo-classesd = 0 x elements, pseudo-elementsSpecificity = 1,0,0,0B. Count the number ofID selectors in the selector.
#nav { }a = 0 x inline stylesb = 1 x IDsc = 0 x classes, pseudo-classesd = 0 x elements, pseudo-elementsSpecificity = 0,1,0,0C. Count the number ofclass selectors, attribute selectors or pseudo-class selectors in the selector.
.intro { }a = 0 x inline stylesb = 0 x IDc = 1 x classes, pseudo-classesd = 0 x elements, pseudo-elementsSpecificity = 0,0,1,0D. Count the number ofelement type or pseudo-element selectors in the selector.
p { }a = 0 x inline stylesb = 0 x IDc = 0 x classes, pseudo-classesd = 1 x elements, pseudo-elementsSpecificity = 0,0,0,1E. Ignore theuniversal selector.
* { }a = 0 x inline stylesb = 0 x IDc = 0 x classesd = 0 x elementSpecificity = 0,0,0,0#nav ul { }a = 0 x inline stylesb = 1 x ID (#nav)c = 0 x classesd = 1 x element (ul)Specificity = 0,1,0,1blockquote.special { }a = 0 x inline stylesb = 0 x IDsc = 1 x class (.special)d = 1 x element (blockquote)Specificity = 0,0,1,1a:link { }a = 0 x inline stylesb = 0 x IDsc = 1 x pseudo-class (:link)d = 1 x elements (a)Specificity = 0,0,1,1input[required] { }a = 0 x inline stylesb = 0 x IDsc = 1 x attribute selector ([required])d = 1 x elements (input)Specificity = 0,0,1,1p[class="a"] { }a = 0 x inline stylesb = 0 x IDsc = 1 x attribute selector ([class="a"])d = 1 x elements (p)Specificity = 0,0,1,1div[id="news"] { }a = 0 x inline stylesb = 0 x IDsc = 1 x attribute selector ([id="news"])d = 1 x elements (div)Specificity = 0,0,1,1::first-line { }a = 0 x inline stylesb = 0 x IDsc = 0 x classesd = 1 x pseudo-element (::first-line)Specificity = 0,0,0,1#nav ul li a:hover { }a = 0 x inline stylesb = 1 x ID (#nav)c = 1 x pseudo-class (:hover)d = 3 x elements (ul,li,a)Specificity = 0,1,1,3Generally 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 --><h2style="color: purple;">Theoretically, no matter how many classes are applied to a selector,an ID will always beat classes.
Older Firefox browsersincorrectly 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 browsersincorrectly 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 divdiv div div div div { color: green; }.intro { color: lime; }In the following example, two author styleshave 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 toproceed 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 winas it is written after the first rule.
/* author styles */.intro h2 { color: blue; }h2.new { color: lime; }Declarations fromimported style sheets are ordered as if their style sheets are substituted in place of the @import rule.
In the following example, declarations areordered froma.css, thenb.css thenc.css.
@import "a.css";@import "b.css";@import "c.css";Declarations fromlinked style sheets are treated as if they were concatenated in linking order, as determined by the host HTML document.
In the following example, declarations areordered froma.css, thenb.css thenc.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 fromheader style sheets are treated the same as linked style sheets - as if they were concatenated in linking order.
In the following example, declarations areordered froma.css, then the header style, thenb.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 stylesb = 1 x ID (#header)c = 0 x classesd = 3 x elements (h1,span,a)Specificity = 0,1,0,3Part 2: Guess the specificity of the following selector:
.intro :first-letter { }.intro :first-letter { }a = 0 x inline stylesb = 0 x IDsc = 1 x class (.intro)d = 1 x pseudo-element (:first-letter)Specificity = 0,0,1,1Part 3: Guess the specificity of the following selector:
a[href^="http:"] { }a[href^="http:"] { }a = 0 x inline stylesb = 0 x IDsc = 1 x attribute selector ([href^="http:"])d = 1 x element (a)Specificity = 0,0,1,1In CSS3, there have beenseveral additions to the overall cascade process.
In CSS 2.1, there were five steps to determine origin and importance. In CSS3, there are now someextra 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 thesenew 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 mentionsoverride declarations.
Override declarations allow authors to manipulate the DOM using JavaScript and change a style, without having to modify any associated style sheets.
“ThegetOverrideStyle allows DOM author tochange to the style of an element without modifying the style sheets of a document.”
However,none of the modern browsers support thegetOverrideStyle method, so this can be quite confusing for authors.
Some aspects of the CSS3 cascade have been simplified hereto make it easier to understand.
You can read more here:CSS Cascading and Inheritance Level 3.
SiteTwitterGithubSlideshareLinkedin