SlideShare a Scribd company logo
CSS
CASCADE
A quick
background
on CSS rules
CSS rules tell browsers how to
 render elements in an HTML
          document.

 h2
 {
      color: blue;
      margin: 1em;
 }
The selector "selects" the
    elements in an HTML
document that are to be styled.

 h2      Selector
 {
      color: blue;
      margin: 1em;
 }
The declaration tells a
    browser how to style the
           element.

h2
{
      color: blue;       Declaration
      margin: 1em;
}
The property is the aspect of
        that element that you are
            choosing to style.

           h2
           {
Property        color: blue;
                margin: 1em;
           }
The value is the exact style
  you wish to set for the
        property.

h2
{
     color: blue;    Value
     margin: 1em;
}
Types of
style sheets
HTML documents may have
three types of style sheets
      applied to them.
Browser style sheets
Browsers apply style sheets to
all web documents. These are
    referred to as a "default"
      browser style sheet.
User style sheets
Most modern browsers allow
users to apply their own style
 sheets within the browser.
Author style sheets
Web authors can apply one or
  more style sheets to an
     HTML document.
Author styles
There are three methods that
 authors can use to add CSS
 styles to an HTML document
Inline styles are applied to
elements in the HTML code
  using the style attribute.
         Inline style using style attribute
<body>
<h2 style=“color: red;”>
    Heading here
</h2>
<p>
Header styles are placed in
 the head of the document
  using the style element
        Header style inside <style> element
<head>
<title>Document title</titl
<style type="text/css" medi
h2 { color: blue; }
</style>
External style sheets are
 applied using the link or
        @import.
        External style using link element
<title>Document title</titl
<link rel="stylesheet"
href=”my-styles.css”
type=”text/css"
media="screen” />
CSS rule
overload!
Browsers have to deal with
CSS rules coming from the
browser, user and author
      style sheets.
Browsers also have to deal
 with CSS rules coming from
different types of author style
sheets (external, header and
             inline)
At some point, Browsers
have to deal with CSS rules
       that conflict.
What does
“conflict”
 mean?
Conflict is where more than
 one CSS rule refers to the
same element and property.

 h2 { color: blue; }
 h2 { color: red; }


    Conflicting CSS rules
Conflict can occur between
CSS rules in different types
      of style sheets.
                      Browse style sheet
h2 { color: blue; }


                      Author style sheet
h2 { color: red; }
Conflict can occur between
CSS rules in within the one or
 more author style sheets.
                       Author style sheet 1
 h2 { color: blue; }


                       Author style sheet 2
 h2 { color: red; }
 h2 { color: green; }
So which
CSS rules
 “win”?
There are four steps
to determine which CSS rules
  will “win” (be applied to an
        HTML document)
Step 1
Gather all the declarations
that apply to an element and
property from browser, author
    and user style sheets
For example, find any
declarations that matches:

       element = h2
     property = color
Gathered declarations
Browser style sheet   h2 { color: black; }




   User style sheet   h2 { color: green; }




Author style sheets   h2 { color: blue; }
                      #nav h2 { color: lime; }
If there are declarations from
more than one of these three
  sources, proceed to step 2.
Step 2
Sort the gathered declarations
according to origin (browser,
author, user style sheets) and
   importance (normal or
          !important).
What is
!important?
Authors can assign
    “!important” to any
        declaration.

h2 { color: red !important;}

                 !important
"!important" declarations
override normal declarations
  (Normal declarations are
    declarations that do not
      contain !important).
So, how are
declarations
  sorted?
From lowest to highest priority
1   browser styles
2   normal declarations in user style sheet
3   normal declarations in author style sheet
4   !important declarations in author style sheet
5   !important declarations in user style sheet
1. Browser styles
Browser style sheet   h2 { color: black; }


                          If no other declarations exist,
                          browser declarations win
   User style sheet




Author style sheets
2. Normal user styles
  Browser style sheet   h2 { color: black; }
Normal user declarations beat
browser declarations

     User style sheet   h2 { color: green; }




  Author style sheets
3. Normal author styles
  Browser style sheet   h2 { color: black; }

Normal author declarations beat browser
declarations and normal user declarations

     User style sheet   h2 { color: green; }




  Author style sheets   h2 { color: blue; }
4. !important author styles
  Browser style sheet   h2 { color: black; }

!important author declarations beat
all normal declarations

     User style sheet   h2 { color: green; }




  Author style sheets   h2 { color: blue; }
                        h2 { color: lime !important; }
5. !important user styles
   Browser style sheet   h2 { color: black; }

!important user declarations beat !important author
declarations and all normal declarations

      User style sheet   h2 { color: green; }
                         h2 { color: red !important;}



                         h2 { color: blue; }
   Author style sheets
                         h2 { color: lime !important; }
But what if two declarations
  have the same origin
     or importance?
Two matching declarations
  Browser style sheet    h2 { color: black; }




      User style sheet   h2 { color: green; }

Two declarations with the same origin and importance


   Author style sheets   h2 { color: blue; }
                         h2 { color: lime; }
If declarations have the same
  origin or importance then
      proceed to Step 3.
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”.
Selectors

#nav h2 { color: blue; }
h2.intro { color: red; }

 Selectors
Four scores are concatenated
(linked together as a chain) to
      create a final score.

           a,b,c,d
This score is referred to as a
   selector’s specificity.
So how is
 specificity
calculated?
A. Is there an inline style?



          <h2 style=“color: red;”>
                 This is a heading
          </h2>
a = 1 x inline styles
b = 0 x ID<p>
c = 0 x classes Here is a paragraph of
d = 0 x element
Specificity = 1,0,0,0
B. Count the number of IDs
             in the selectors.


         #nav { color: red; }

a = 0 x inline styles
b = 1 x ID
c = 0 x classes
d = 0 x element
Specificity = 0,1,0,0
C. Count the number of
           classes, attributes and
               pseudo-classes.

         .main { color: red; }

a = 0 x inline styles
b = 0 x ID
c = 1 x classes
d = 0 x element
Specificity = 0,0,1,0
D. Count the number of
        element names or pseudo-
                elements.

         h2 { color: red; }

a = 0 x inline styles
b = 0 x ID
c = 0 x classes
d = 1 x element
Specificity = 0,0,0,1
A note on
concatenation
“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 win.
 (unless !important is used within the ID’s declaration)
External style sheets    #one #two #three #four #five
   and header styles     #six #seven #eight #nine #ten
      (Author styles)    { color: green; }




HTML document with       <h2 style=“color: purple;”>
       inline styles
     (Author styles)

The highlighted style wins due to specificity -
1,0,0,0 beats 0,10,0,0
No matter how many classes
are applied to a selector, an ID
        can easily win
External style sheets   .one .two .three .four .five
   and header styles    .six .seven .eight .nine .ten
      (Author styles)   { color: green; }

                        #nav { color: lime; }


The highlighted selector wins due to specificity -
0,1,0,0 beats 0,0,10,0
No matter how many elements
  are applied to a selector, a
     class can easily win.
External style sheets   div div div div div form
   and header styles    fieldset div label span
      (Author styles)   { color: green; }

                        .intro { color: lime; }


The highlighted selector wins due to specificity -
0,0,1,0 beats 0,0,0,10
Complex
examples of
 specificity
ID and element

         #nav h2 { color: red; }


a = 0 x inline styles
b = 1 x ID (#nav)
c = 0 x classes
d = 1 x element (h2)
Specificity = 0,1,0,1
Element and class

         h2.intro { color: red; }


a = 0 x inline styles
b = 0 x ID
c = 1 x classes (.intro)
d = 1 x element (h2)
Specificity = 0,0,1,1
ID, elements and pseudo-class

        #nav ul li a:hover { color:


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
Element and pseudo-element

         p:first-line { color: green


a = 0 x inline styles
b = 0 x ID
c = 0 x classes
d = 2 x element (p) and pseudo-element (:first-line)
Specificity = 0,0,0,2
Element and attribute selector

          h2[title=“intro”] { color:


a = 0 x inline styles
b = 0 x ID
c = 1 x attribute selector ([title=“intro”])
d = 1 x element (h2)
Specificity = 0,0,1,1
What if there
  is still no
clear winner?
Selectors with same specificity

         #nav h2 { color: red; }
         #nav h2 { color: green; }


Specificity = 0,1,0,1
If there is still no clear winner
     then proceed to Step 4.
Step 4
If two declarations have the
 same importance, origin and
specificity, the latter specified
        declaration wins
Equal-weight declarations

         #nav h2 { color: green; }
         #nav h2 { color: red; }


The second declaration wins
as it is written after the first.
And now…
a guessing
   game
Exercise 1
browser, user, author
Part 1: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets
   and header styles
      (Author styles)


HTML document with
       inline styles
     (Author styles)
Browser style sheet   h2 { color: black; }




    User style sheet   h2 { color: green; }


Normal user declarations beats browser
declarations due to origin
External style sheets
   and header styles
     (Author styles)


HTML document with
       inline styles
     (Author styles)
Part 2: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets   h2 { color: blue; }
   and header styles
      (Author styles)


HTML document with
       inline styles
     (Author styles)
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets   h2 { color: blue; }
   and header styles
      (Author styles)
Normal author declarations beat browser and
normal user declarations due to origin
HTML document with
        inline styles
      (Author styles)
Part 3: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets   h2 { color: blue; }
   and header styles
      (Author styles)


HTML document with      <h2 style=“color: purple;”>
       inline styles
     (Author styles)
Browser style sheet    h2 { color: black; }




     User style sheet     h2 { color: green; }
Normal inline declarations beat normal
external and header declarations due to
specificity: 1,0,0,0 beats 0,0,0,1

External style sheets   h2 { color: blue; }
   and header styles
      (Author styles)


HTML document with      <h2 style=“color: purple;”>
       inline styles
     (Author styles)
Part 4: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple;”>
       inline styles
     (Author styles)
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }

!important author declarations beat normal
browser, user and author declarations

External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple;”>
       inline styles
     (Author styles)
Part 5: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }




External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple
       inline styles    !important;”>
     (Author styles)
Browser style sheet    h2 { color: black; }




     User style sheet
!important inline authorh2 { color: beat
                          declarations green; }
!important external author and header declarations
due to specificity: 1,0,0,0 beats 0,0,0,1

External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple
       inline styles    !important;”>
     (Author styles)
Part 6: Which one wins?
Browser style sheet    h2 { color: black; }




    User style sheet    h2 { color: green; }
                        h2 { color: gray !important; }



External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple
       inline styles    !important;”>
     (Author styles)
Browser style sheet
!important user declarations beat !important }
                         h2 { color: black;
author declarations (regardless of whether they
are external, header or inline)

    User style sheet    h2 { color: green; }
                        h2 { color: gray !important; }



External style sheets   h2 { color: blue; }
   and header styles    h2 { color: lime !important; }
      (Author styles)


HTML document with      <h2 style=“color: purple
       inline styles    !important;”>
     (Author styles)
Exercise 2
author external, header
    and inline CSS
Part 1: Which one wins?
External style sheets   h2.news { color: #eee; }
   and header styles    h2 { color: blue; }
      (Author styles)
The highlighted declaration wins due to
specificity - 0,0,1,1 beats 0,0,0,1



External style sheets   h2.news { color: #eee; }
   and header styles    h2 { color: blue; }
      (Author styles)
Part 2: Which one wins?
External style sheets   h2.news { color: #eee; }
   and header styles    h2 { color: blue; }
      (Author styles)   h2.news { color: green; }
The highlighted declaration has the same
specificity as the first declaration (0,0,1,1).
However, as it is written later, it wins!

External style sheets     h2.news { color: #eee; }
   and header styles      h2 { color: blue; }
      (Author styles)     h2.news { color: green; }
Part 3: Which one wins?
External style sheets   #nav h2 { color: lime; }
   and header styles    h2.news { color: #eee; }
      (Author styles)   h2 { color: blue; }
                        h2.news { color: green; }
The highlighted selector wins due to specificity -
0,1,0,1 beats 0,0,1,1 and 0,0,0,1


External style sheets   #nav h2 { color: lime; }
   and header styles    h2.news { color: #eee; }
      (Author styles)   h2 { color: blue; }
                        h2.news { color: green; }
Part 4: Which one wins?
External style sheets   #nav h2 { color: lime; }
   and header styles    h2.news { color: #eee; }
      (Author styles)   h2 { color: blue; }
                        h2.news { color: green; }
                        div#nav h2 { color: lime; }
The highlighted selector wins due to specificity -
0,1,0,2 beats 0,1,0,1 and 0,0,1,1 and 0,0,0,1


External style sheets   #nav h2 { color: lime; }
   and header styles    h2.news { color: #eee; }
      (Author styles)   h2 { color: blue; }
                        h2.news { color: green; }
                        div#nav h2 { color: lime; }
We’re done!

More Related Content

What's hot

CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
Shawn Calvert
 
Java script
Java scriptJava script
Java script
Jay Patel
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
Doncho Minkov
 
Css ppt - Cascading Style Sheets
Css ppt - Cascading Style SheetsCss ppt - Cascading Style Sheets
Css ppt - Cascading Style Sheets
Shaheen Shaikh
 
Web Typography
Web TypographyWeb Typography
Web Typography
Shawn Calvert
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
Rasan Samarasinghe
 
Javascript
JavascriptJavascript
Javascript
Prashant Kumar
 
Css
CssCss
presentation
presentationpresentation
presentation
Mart Bosch
 
Cssxcountry slides
Cssxcountry slidesCssxcountry slides
Cssxcountry slides
Erlis Arturo Aquino Guerrero
 
The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30
Mahmoud Samir Fayed
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
Adhoura Academy
 
Web Layout
Web LayoutWeb Layout
Web Layout
Shawn Calvert
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
Arti Parab Academics
 
Javascript
JavascriptJavascript
Javascript
Priyanka Pradhan
 
Lecture7
Lecture7Lecture7
Lecture7
Majid Taghiloo
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
Biswadip Goswami
 
Java script
Java scriptJava script
Java script
Sadeek Mohammed
 
Towards an RDF Validation Language based on Regular Expression Derivatives
Towards an RDF Validation Language based on Regular Expression DerivativesTowards an RDF Validation Language based on Regular Expression Derivatives
Towards an RDF Validation Language based on Regular Expression Derivatives
Jose Emilio Labra Gayo
 

What's hot (20)

CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Java script
Java scriptJava script
Java script
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Css ppt - Cascading Style Sheets
Css ppt - Cascading Style SheetsCss ppt - Cascading Style Sheets
Css ppt - Cascading Style Sheets
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Javascript
JavascriptJavascript
Javascript
 
Css
CssCss
Css
 
presentation
presentationpresentation
presentation
 
Cssxcountry slides
Cssxcountry slidesCssxcountry slides
Cssxcountry slides
 
The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30The Ring programming language version 1.4 book - Part 13 of 30
The Ring programming language version 1.4 book - Part 13 of 30
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
 
Javascript
JavascriptJavascript
Javascript
 
Lecture7
Lecture7Lecture7
Lecture7
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Java script
Java scriptJava script
Java script
 
Towards an RDF Validation Language based on Regular Expression Derivatives
Towards an RDF Validation Language based on Regular Expression DerivativesTowards an RDF Validation Language based on Regular Expression Derivatives
Towards an RDF Validation Language based on Regular Expression Derivatives
 

Similar to CSS CASCADE

Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
Ardee Aram
 
WEB PROGRAMMING
WEB PROGRAMMINGWEB PROGRAMMING
WEB PROGRAMMING
sweetysweety8
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
Tesfaye Yenealem
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
Web 101
Web 101Web 101
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Nicole Ryan
 
3. CSS
3. CSS3. CSS
CSS
CSSCSS
CSS Overview
CSS OverviewCSS Overview
CSS Overview
Doncho Minkov
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
CSS Overview and Examples
CSS Overview and ExamplesCSS Overview and Examples
CSS Overview and Examples
Mouli Kalakota
 
Web development chapter-3.ppt
Web development chapter-3.pptWeb development chapter-3.ppt
Web development chapter-3.ppt
ssuserf3db48
 
Web - CSS 1.pptx
Web - CSS 1.pptxWeb - CSS 1.pptx
Web - CSS 1.pptx
haroon451422
 
Csstutorial
CsstutorialCsstutorial
Csstutorial
Ankit Rana
 
Css
CssCss
Css
CssCss
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
cgmonroe
 
CSS
CSS CSS
CSS
Sunil OS
 

Similar to CSS CASCADE (20)

Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
 
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
 
WEB PROGRAMMING
WEB PROGRAMMINGWEB PROGRAMMING
WEB PROGRAMMING
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Web 101
Web 101Web 101
Web 101
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
3. CSS
3. CSS3. CSS
3. CSS
 
CSS
CSSCSS
CSS
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
 
CSS Overview and Examples
CSS Overview and ExamplesCSS Overview and Examples
CSS Overview and Examples
 
Web development chapter-3.ppt
Web development chapter-3.pptWeb development chapter-3.ppt
Web development chapter-3.ppt
 
Web - CSS 1.pptx
Web - CSS 1.pptxWeb - CSS 1.pptx
Web - CSS 1.pptx
 
Csstutorial
CsstutorialCsstutorial
Csstutorial
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Intro to CSS Selectors in Drupal
Intro to CSS Selectors in DrupalIntro to CSS Selectors in Drupal
Intro to CSS Selectors in Drupal
 
CSS
CSS CSS
CSS
 

More from Anuradha

Sql server 2012 - always on deep dive - bob duffy
Sql server 2012 - always on deep dive - bob duffySql server 2012 - always on deep dive - bob duffy
Sql server 2012 - always on deep dive - bob duffy
Anuradha
 
J query visual-cheat-sheet-1.4.2
J query visual-cheat-sheet-1.4.2J query visual-cheat-sheet-1.4.2
J query visual-cheat-sheet-1.4.2
Anuradha
 
Inspiration
InspirationInspiration
Inspiration
Anuradha
 
Peace Now
Peace NowPeace Now
Peace Now
Anuradha
 
Go Kiss The World
Go Kiss The WorldGo Kiss The World
Go Kiss The WorldAnuradha
 
CSS LINE HEIGHT
CSS LINE HEIGHTCSS LINE HEIGHT
CSS LINE HEIGHT
Anuradha
 
CSS INHERITANCE
CSS INHERITANCECSS INHERITANCE
CSS INHERITANCE
Anuradha
 
Insearchofmahatma 090802094040 Phpapp02
Insearchofmahatma 090802094040 Phpapp02Insearchofmahatma 090802094040 Phpapp02
Insearchofmahatma 090802094040 Phpapp02Anuradha
 
Mahatma
MahatmaMahatma
Mahatma
Anuradha
 
Presentation Alphabet
Presentation AlphabetPresentation Alphabet
Presentation Alphabet
Anuradha
 
Dirtywindows
DirtywindowsDirtywindows
Dirtywindows
Anuradha
 
Dear Son Dear Daughter Slide Show
Dear Son Dear Daughter Slide ShowDear Son Dear Daughter Slide Show
Dear Son Dear Daughter Slide Show
Anuradha
 
Beautiful Motivation
Beautiful MotivationBeautiful Motivation
Beautiful Motivation
Anuradha
 
Great Leaders
Great LeadersGreat Leaders
Great Leaders
Anuradha
 
A Present
A PresentA Present
A Present
Anuradha
 
Six Keys To Success
Six Keys To SuccessSix Keys To Success
Six Keys To Success
Anuradha
 
Friendship And Love
Friendship And LoveFriendship And Love
Friendship And Love
Anuradha
 
Dr Apj Kalam
Dr Apj KalamDr Apj Kalam
Dr Apj Kalam
Anuradha
 
Attitude Is Everything
Attitude Is EverythingAttitude Is Everything
Attitude Is Everything
Anuradha
 
Age Character Calculation
Age Character CalculationAge Character Calculation
Age Character Calculation
Anuradha
 

More from Anuradha (20)

Sql server 2012 - always on deep dive - bob duffy
Sql server 2012 - always on deep dive - bob duffySql server 2012 - always on deep dive - bob duffy
Sql server 2012 - always on deep dive - bob duffy
 
J query visual-cheat-sheet-1.4.2
J query visual-cheat-sheet-1.4.2J query visual-cheat-sheet-1.4.2
J query visual-cheat-sheet-1.4.2
 
Inspiration
InspirationInspiration
Inspiration
 
Peace Now
Peace NowPeace Now
Peace Now
 
Go Kiss The World
Go Kiss The WorldGo Kiss The World
Go Kiss The World
 
CSS LINE HEIGHT
CSS LINE HEIGHTCSS LINE HEIGHT
CSS LINE HEIGHT
 
CSS INHERITANCE
CSS INHERITANCECSS INHERITANCE
CSS INHERITANCE
 
Insearchofmahatma 090802094040 Phpapp02
Insearchofmahatma 090802094040 Phpapp02Insearchofmahatma 090802094040 Phpapp02
Insearchofmahatma 090802094040 Phpapp02
 
Mahatma
MahatmaMahatma
Mahatma
 
Presentation Alphabet
Presentation AlphabetPresentation Alphabet
Presentation Alphabet
 
Dirtywindows
DirtywindowsDirtywindows
Dirtywindows
 
Dear Son Dear Daughter Slide Show
Dear Son Dear Daughter Slide ShowDear Son Dear Daughter Slide Show
Dear Son Dear Daughter Slide Show
 
Beautiful Motivation
Beautiful MotivationBeautiful Motivation
Beautiful Motivation
 
Great Leaders
Great LeadersGreat Leaders
Great Leaders
 
A Present
A PresentA Present
A Present
 
Six Keys To Success
Six Keys To SuccessSix Keys To Success
Six Keys To Success
 
Friendship And Love
Friendship And LoveFriendship And Love
Friendship And Love
 
Dr Apj Kalam
Dr Apj KalamDr Apj Kalam
Dr Apj Kalam
 
Attitude Is Everything
Attitude Is EverythingAttitude Is Everything
Attitude Is Everything
 
Age Character Calculation
Age Character CalculationAge Character Calculation
Age Character Calculation
 

Recently uploaded

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 

Recently uploaded (20)

Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 

CSS CASCADE

  • 3. CSS rules tell browsers how to render elements in an HTML document. h2 { color: blue; margin: 1em; }
  • 4. The selector "selects" the elements in an HTML document that are to be styled. h2 Selector { color: blue; margin: 1em; }
  • 5. The declaration tells a browser how to style the element. h2 { color: blue; Declaration margin: 1em; }
  • 6. The property is the aspect of that element that you are choosing to style. h2 { Property color: blue; margin: 1em; }
  • 7. The value is the exact style you wish to set for the property. h2 { color: blue; Value margin: 1em; }
  • 9. HTML documents may have three types of style sheets applied to them.
  • 10. Browser style sheets Browsers apply style sheets to all web documents. These are referred to as a "default" browser style sheet.
  • 11. User style sheets Most modern browsers allow users to apply their own style sheets within the browser.
  • 12. Author style sheets Web authors can apply one or more style sheets to an HTML document.
  • 14. There are three methods that authors can use to add CSS styles to an HTML document
  • 15. Inline styles are applied to elements in the HTML code using the style attribute. Inline style using style attribute <body> <h2 style=“color: red;”> Heading here </h2> <p>
  • 16. Header styles are placed in the head of the document using the style element Header style inside <style> element <head> <title>Document title</titl <style type="text/css" medi h2 { color: blue; } </style>
  • 17. External style sheets are applied using the link or @import. External style using link element <title>Document title</titl <link rel="stylesheet" href=”my-styles.css” type=”text/css" media="screen” />
  • 19. Browsers have to deal with CSS rules coming from the browser, user and author style sheets.
  • 20. Browsers also have to deal with CSS rules coming from different types of author style sheets (external, header and inline)
  • 21. At some point, Browsers have to deal with CSS rules that conflict.
  • 23. Conflict is where more than one CSS rule refers to the same element and property. h2 { color: blue; } h2 { color: red; } Conflicting CSS rules
  • 24. Conflict can occur between CSS rules in different types of style sheets. Browse style sheet h2 { color: blue; } Author style sheet h2 { color: red; }
  • 25. Conflict can occur between CSS rules in within the one or more author style sheets. Author style sheet 1 h2 { color: blue; } Author style sheet 2 h2 { color: red; } h2 { color: green; }
  • 26. So which CSS rules “win”?
  • 27. There are four steps to determine which CSS rules will “win” (be applied to an HTML document)
  • 29. Gather all the declarations that apply to an element and property from browser, author and user style sheets
  • 30. For example, find any declarations that matches: element = h2 property = color
  • 31. Gathered declarations Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } Author style sheets h2 { color: blue; } #nav h2 { color: lime; }
  • 32. If there are declarations from more than one of these three sources, proceed to step 2.
  • 34. Sort the gathered declarations according to origin (browser, author, user style sheets) and importance (normal or !important).
  • 36. Authors can assign “!important” to any declaration. h2 { color: red !important;} !important
  • 37. "!important" declarations override normal declarations (Normal declarations are declarations that do not contain !important).
  • 39. From lowest to highest priority 1 browser styles 2 normal declarations in user style sheet 3 normal declarations in author style sheet 4 !important declarations in author style sheet 5 !important declarations in user style sheet
  • 40. 1. Browser styles Browser style sheet h2 { color: black; } If no other declarations exist, browser declarations win User style sheet Author style sheets
  • 41. 2. Normal user styles Browser style sheet h2 { color: black; } Normal user declarations beat browser declarations User style sheet h2 { color: green; } Author style sheets
  • 42. 3. Normal author styles Browser style sheet h2 { color: black; } Normal author declarations beat browser declarations and normal user declarations User style sheet h2 { color: green; } Author style sheets h2 { color: blue; }
  • 43. 4. !important author styles Browser style sheet h2 { color: black; } !important author declarations beat all normal declarations User style sheet h2 { color: green; } Author style sheets h2 { color: blue; } h2 { color: lime !important; }
  • 44. 5. !important user styles Browser style sheet h2 { color: black; } !important user declarations beat !important author declarations and all normal declarations User style sheet h2 { color: green; } h2 { color: red !important;} h2 { color: blue; } Author style sheets h2 { color: lime !important; }
  • 45. But what if two declarations have the same origin or importance?
  • 46. Two matching declarations Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } Two declarations with the same origin and importance Author style sheets h2 { color: blue; } h2 { color: lime; }
  • 47. If declarations have the same origin or importance then proceed to Step 3.
  • 49. If declarations have the same origin or importance then the declaration’s selectors need to be scored, to see which declaration will “win”.
  • 50. Selectors #nav h2 { color: blue; } h2.intro { color: red; } Selectors
  • 51. Four scores are concatenated (linked together as a chain) to create a final score. a,b,c,d
  • 52. This score is referred to as a selector’s specificity.
  • 53. So how is specificity calculated?
  • 54. A. Is there an inline style? <h2 style=“color: red;”> This is a heading </h2> a = 1 x inline styles b = 0 x ID<p> c = 0 x classes Here is a paragraph of d = 0 x element Specificity = 1,0,0,0
  • 55. B. Count the number of IDs in the selectors. #nav { color: red; } a = 0 x inline styles b = 1 x ID c = 0 x classes d = 0 x element Specificity = 0,1,0,0
  • 56. C. Count the number of classes, attributes and pseudo-classes. .main { color: red; } a = 0 x inline styles b = 0 x ID c = 1 x classes d = 0 x element Specificity = 0,0,1,0
  • 57. D. Count the number of element names or pseudo- elements. h2 { color: red; } a = 0 x inline styles b = 0 x ID c = 0 x classes d = 1 x element Specificity = 0,0,0,1
  • 59. “A” will always beat “B”, which will always beat “C”, which will always beat “D”.
  • 60. No matter how many IDs are used in a selector, an inline style will always win. (unless !important is used within the ID’s declaration)
  • 61. External style sheets #one #two #three #four #five and header styles #six #seven #eight #nine #ten (Author styles) { color: green; } HTML document with <h2 style=“color: purple;”> inline styles (Author styles) The highlighted style wins due to specificity - 1,0,0,0 beats 0,10,0,0
  • 62. No matter how many classes are applied to a selector, an ID can easily win
  • 63. External style sheets .one .two .three .four .five and header styles .six .seven .eight .nine .ten (Author styles) { color: green; } #nav { color: lime; } The highlighted selector wins due to specificity - 0,1,0,0 beats 0,0,10,0
  • 64. No matter how many elements are applied to a selector, a class can easily win.
  • 65. External style sheets div div div div div form and header styles fieldset div label span (Author styles) { color: green; } .intro { color: lime; } The highlighted selector wins due to specificity - 0,0,1,0 beats 0,0,0,10
  • 67. ID and element #nav h2 { color: red; } a = 0 x inline styles b = 1 x ID (#nav) c = 0 x classes d = 1 x element (h2) Specificity = 0,1,0,1
  • 68. Element and class h2.intro { color: red; } a = 0 x inline styles b = 0 x ID c = 1 x classes (.intro) d = 1 x element (h2) Specificity = 0,0,1,1
  • 69. ID, elements and pseudo-class #nav ul li a:hover { color: 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
  • 70. Element and pseudo-element p:first-line { color: green a = 0 x inline styles b = 0 x ID c = 0 x classes d = 2 x element (p) and pseudo-element (:first-line) Specificity = 0,0,0,2
  • 71. Element and attribute selector h2[title=“intro”] { color: a = 0 x inline styles b = 0 x ID c = 1 x attribute selector ([title=“intro”]) d = 1 x element (h2) Specificity = 0,0,1,1
  • 72. What if there is still no clear winner?
  • 73. Selectors with same specificity #nav h2 { color: red; } #nav h2 { color: green; } Specificity = 0,1,0,1
  • 74. If there is still no clear winner then proceed to Step 4.
  • 76. If two declarations have the same importance, origin and specificity, the latter specified declaration wins
  • 77. Equal-weight declarations #nav h2 { color: green; } #nav h2 { color: red; } The second declaration wins as it is written after the first.
  • 80. Part 1: Which one wins?
  • 81. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets and header styles (Author styles) HTML document with inline styles (Author styles)
  • 82. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } Normal user declarations beats browser declarations due to origin External style sheets and header styles (Author styles) HTML document with inline styles (Author styles)
  • 83. Part 2: Which one wins?
  • 84. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets h2 { color: blue; } and header styles (Author styles) HTML document with inline styles (Author styles)
  • 85. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets h2 { color: blue; } and header styles (Author styles) Normal author declarations beat browser and normal user declarations due to origin HTML document with inline styles (Author styles)
  • 86. Part 3: Which one wins?
  • 87. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets h2 { color: blue; } and header styles (Author styles) HTML document with <h2 style=“color: purple;”> inline styles (Author styles)
  • 88. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } Normal inline declarations beat normal external and header declarations due to specificity: 1,0,0,0 beats 0,0,0,1 External style sheets h2 { color: blue; } and header styles (Author styles) HTML document with <h2 style=“color: purple;”> inline styles (Author styles)
  • 89. Part 4: Which one wins?
  • 90. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple;”> inline styles (Author styles)
  • 91. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } !important author declarations beat normal browser, user and author declarations External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple;”> inline styles (Author styles)
  • 92. Part 5: Which one wins?
  • 93. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple inline styles !important;”> (Author styles)
  • 94. Browser style sheet h2 { color: black; } User style sheet !important inline authorh2 { color: beat declarations green; } !important external author and header declarations due to specificity: 1,0,0,0 beats 0,0,0,1 External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple inline styles !important;”> (Author styles)
  • 95. Part 6: Which one wins?
  • 96. Browser style sheet h2 { color: black; } User style sheet h2 { color: green; } h2 { color: gray !important; } External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple inline styles !important;”> (Author styles)
  • 97. Browser style sheet !important user declarations beat !important } h2 { color: black; author declarations (regardless of whether they are external, header or inline) User style sheet h2 { color: green; } h2 { color: gray !important; } External style sheets h2 { color: blue; } and header styles h2 { color: lime !important; } (Author styles) HTML document with <h2 style=“color: purple inline styles !important;”> (Author styles)
  • 98. Exercise 2 author external, header and inline CSS
  • 99. Part 1: Which one wins?
  • 100. External style sheets h2.news { color: #eee; } and header styles h2 { color: blue; } (Author styles)
  • 101. The highlighted declaration wins due to specificity - 0,0,1,1 beats 0,0,0,1 External style sheets h2.news { color: #eee; } and header styles h2 { color: blue; } (Author styles)
  • 102. Part 2: Which one wins?
  • 103. External style sheets h2.news { color: #eee; } and header styles h2 { color: blue; } (Author styles) h2.news { color: green; }
  • 104. The highlighted declaration has the same specificity as the first declaration (0,0,1,1). However, as it is written later, it wins! External style sheets h2.news { color: #eee; } and header styles h2 { color: blue; } (Author styles) h2.news { color: green; }
  • 105. Part 3: Which one wins?
  • 106. External style sheets #nav h2 { color: lime; } and header styles h2.news { color: #eee; } (Author styles) h2 { color: blue; } h2.news { color: green; }
  • 107. The highlighted selector wins due to specificity - 0,1,0,1 beats 0,0,1,1 and 0,0,0,1 External style sheets #nav h2 { color: lime; } and header styles h2.news { color: #eee; } (Author styles) h2 { color: blue; } h2.news { color: green; }
  • 108. Part 4: Which one wins?
  • 109. External style sheets #nav h2 { color: lime; } and header styles h2.news { color: #eee; } (Author styles) h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; }
  • 110. The highlighted selector wins due to specificity - 0,1,0,2 beats 0,1,0,1 and 0,0,1,1 and 0,0,0,1 External style sheets #nav h2 { color: lime; } and header styles h2.news { color: #eee; } (Author styles) h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; }