CSS Concepts

Table of Contents

Cascade Order discussion

Terms:

auther
the source document
user
the user's browser customization
user agent
the browser default

Order:

  1. Collect all declaration
  2. Sort by importance as follows
    1. user agent declarations
    2. user normal declarations
    3. author normal declarations
    4. author important declarations
    5. user important declarations
  3. More specific rules override more general ones :: Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used.
  4. When multiple rules of the same "specificity level" exist :: Whichever one appears last wins.

initial and inherit discussion

div {
  color: red; 
}

h1 {
  color: initial; 
}
span {
  color: blue;
}

.extra span {
  color: inherit;
}

All about Units: px, em, rem, etc. discussion

px, %

em, ex, ch

em
equal to the inherited font size. If the font size of a <div> is set to 16px, 1em within that <div> is equivalent to 16px.
ex
x-height of the current font OR one-half of one em
ch
the width of the zero character, 0

rem

body {
  font-size: 14px;
}
div {
  font-size: 1.2em;
}
<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>
html {
  font-size: 14px;
}
div {

  /* 'r' in rem stands for 'root'. 
  now all divs are sized as 16.8px */
  font-size: 1.2rem; 
}

vw, vh, vmin, vmax

vw
Relative to 1% of the width of the viewport
vh
Relative to 1% of the height of the viewport
vmin
Relative to 1% of viewport's* smaller dimension
vmax
Relative to 1% of viewport's* larger dimension

cm, mm, in, pt, pc

in
inches (1in = 96px = 2.54cm)
pt
points (1pt = 1/72 of 1in)
pc
picas (1pc = 12 pt)
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)