Cascade

Introduction

How CSS works | MDN

how css works

Render-tree | Google

Conflicting rules

Importance

Normal vs Important

Normal Important 

h1 {
  color: red;
}

h1 {
  color: green;
}

            

h1 {
  color: red !important;
}

h1 {
  color: green;
}

What is the color of <h1> Element?

important css

Style sheet (User Agent, Author, User)

User Agent Style Sheet Author Style Sheet User Style Sheet
Firefox (Gecko)
Safari (WebKit)
Chrome (Blink)
Microsoft Edge (EdgeHTML)		 style
<style>
<link>		 Stylish Plugin (Gallery)
Stylus Plugin

Reset CSS: revert.css, normalize.css

Importance order

Declaration Style sheets Importance degree
  User Agent 1
Normal User 2
Normal Author 3
Important Author 4
Important User 5

Specificity

Specificity Value

Value: NNNN

Number Selector
Thousands style attribute
Hundreds ID selector
Tens class selector, attribute selector, pseudo-class
Ones element selector, pseudo-element

Example

specificity/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      h1 {
        color: blue;
      }

      #title {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1 id="title" style="color: green;">Lorem ipsum</h1>
  </body>
</html>

specificity/css/style.css:

h1 {
  color: red;
}

What is the color of <h1> Element?

Style Selector Thousands Hundreds Tens Ones Total
color: green style 1 0 0 0 1000
color: orange #title 0 1 0 0 0100
color: blue h1 0 0 0 1 0001
color: red h1 0 0 0 1 0001

Is it possible to inspect specificity?
If you disable the color green and orange, what is the <h1> color?

https://i.imgflip.com/2a3ggp.jpg

Source order

source-code/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      h1 {
        color: blue;
      }

      body {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum</h1>
  </body>
</html>

source-code/css/style.css:

h1 {
  color: red;
}

What is the color of <h1> Element?

Reference