Day 2 - Units in CSS

Understanding methods for sizing elements and adding depth effects.

---

1. Absolute vs Relative Units

Absolute (px): Fixed size.
Relative (em): Relative to parent font size.
Relative (rem): Relative to root (html) font size.

Code:

/* CSS */
.px-text {
    font-size:  20px;
} /* Always 20px */

.em-text {
    font-size:  1.5em;
} /* 1.5 x Parent Size */

.rem-text {
    font-size:  1.5rem;
} /* 1.5 x Root Size */

Output:

---