CSS

Introduction


                selector {

                property1: value1;

                property2: value2 value 3 value4;

                }

Selectors

Universal selector: * {...}
Type/element selector: div {...}
Class selector: .classname {...}
ID selector: #idname {...}
Grouping selector: selector1, selector2 {...}
Chaining selector: .class1.class2 {...}

Combinators

Descendant combinator: selector1 selector2 {...}
Child combinator: selector1 > selector2 {...}
Adjacent sibling combinator: selector1 + selector2 {...}
General sibling combinator: selector1 ~ selector2 {...}

Properties

color: blue;
background-color: #1100ff80;
font-family: "Times New Roman", sans-serif;
font-size: 22px;
font-weight: bold;
text-align: center;
img {height: auto; width: 500px;}

More cheatsheets:

Font-size note

Value can be expressed with px, em, %, and vw
16px or 1em: the default for normal text
pixels/16=em
Some typical values:
- h2 = 40px = 2.5em
- h3 = 30px = 1.875em
- p = 14px = 0.875em
Good formulation that works in all browser:

body {font-size: 100%;}
h2 {font-size: 2.5em;}
h3 {font-size: 1.875em;}
p {font-size: 0.875em;}

vw: viewport width

1vw = 1% of viewport width
example: viewport = 50cm wide, 1vw = 0.5cm
value example: h2 = 10vw

Specificity

A CSS declaration that is more specific will take precedence over ones that are less specific.

The order from the higher:

Inline styles
ID selectors
Class selectors
Type selectors
Anything less specific
text-align: center;
img {height: auto; width: 500px;}

When the level is the same, more selectors, counted from higher level, has higher specificity.

More class selectors is more specific than less class selectors
- .subsection {color: blue;} //1 class selector
  .main .list {color: red;} //2 class selectors
- Red wins
Less ID selectors is still more specific than more class selectors
- #subsection {color: blue;} //1, but ID selector
  .main .list {color: red;} //2 class selectors
- Blue wins
Have same number of ID selector, more class selectors is more specific than less class selectors!
- #subsection .list {color: blue; background-color: yellow;}
  #subsection .main .list {color: red;}
- Red wins, with yellow as the background-color

Universal selector (*) and combinators (+, ~, >, a-space) do not add specificity.

Below have the same specificity level
- .class1.class2 {color: blue;} //Chaining selector (no space)
  .class1 .class2 {color: red;} //Decendant combinator (empty space)
  .class1 > .class2 {color: yellow;} //Child combinator (>)
Universal selector (*) has no specificity value
- * {color: blue;}
  h2 {color: red;}
- Red wins

Inheritence

Certain CSS properties can be inherited by element descendant. Typography based properties like color and font are usually inherited, most others are not. Directly targeted properties will be applied instead of the inheritance though, even if the inheritance has higher specificity.

<div id="parent">
<div class="child"></div>
</div>

/* style.css */

#parent {color: red;}
.child {color: blue;}
The color will be blue because it is directly targeting while red is only inherited, even though an id selector has a higher specificity over a class selector.

Rule Order

If all factors have been taken into account and it's still a tie, rule that was last defined is the winner.

.alert {color: yellow;}
.warning {color: red;}
Class warning is the last defined, so it takes priority over alert. The color will be red.

Adding CSS to HTML

External CSS
- 
  
  <head>
  <link rel="stylesheet" href="style.css">
  </head>
- /* style.css */
  
  div {
       color: white;
       background-color: black;
  }
  
  p {
       color: red;
  }
Internal/embedded CSS
- 
  
  <head>
       <style>
           div {
               color: white;
               background-color: black;
           }
  
           p {
               color: red;
           }
       </style>
  </head>
Inline CSS

<body>
<div style="color: white; background-color: black;">...</div>
</body>

Priority: inline > internal > external