CSS or Cascading Style Sheets

The point of CSS is to separate presentation (CSS) from content (HTML). This separation is a popular tech-design philosophy / methodology. It means that you can display the same content (HTML) in different ways (with different styles) for different contexts: laptops, smart phones, in print, on a braille tactile device, etc. Depending on how you implement your CSS, it also enables you to make site-wide changes in a single document which can make updating (even redesigning the entire aesthetic) a site drastically easier.

Contents

1. CSS Syntax
   • ex: external stylesheet - html
   • ex: external stylesheet - css
2. Colors
3. Units
   • ex 1: percentages
   • ex 2: viewport units
4. the Box Model
   • ex 1: the box model properties
   • ex 2: block vs inline
   • ex 3: box-sizing
5. Typography
6. the Cascade
   • ex 1: what takes precedence?
   • ex 2: more than one class
   • ex 3: Inheritance
7. Centering
   • CSS Centering Example
8. Layout - Positions
   • CSS Position Examples
9. Layout - Old
   • ex 1: CSS Liquid
10. Layout - Modern
    • ex 1: Flexbox
    • ex 2: CSS Grid
11. Responsive Web Design
    • ex1: Responsive Web Design
    • ex2: RWD Flexbox
    • ex2: RWD CSS Grid
12. Transform
    • ex 1: translate
    • ex 2: scale
    • ex 3: rotate
    • ex 4: skew
13. Transitions
    • ex 1: hovering over links
    • ex 2: CSS Transitions
14. Animations
    • ex 1: bounce animation
    • ex 2: blinking CSS emoji
15. Browsers: support, prefixes & quirks