CSS Fundamentals & The Box Model Cheatsheet

Quick reference for all CSS concepts covered in Lecture 3.

CSS Rule Anatomy

Every CSS rule follows this structure:

1selector {
2    property: value;
3    property: value;
4}

Example:

1h1 {
2    color: #E04A7A;
3    font-size: 32px;
4    text-align: center;
5}

Key: selector → targets HTML elements | property → what to change | value → how to change it

3 Ways to Add CSS

Selector Types Reference

Remember: Dot . goes in CSS, NOT in HTML!

1<!-- HTML — no dot -->
2<p class="highlight">Text</p>

1/* CSS — dot required */
2.highlight { color: red; }

Specificity Scoring (0-0-0)

1Inline styles    →  1-0-0-0  (highest — avoid!)
2ID selectors     →  0-1-0-0
3Class selectors  →  0-0-1-0
4Element selectors→  0-0-0-1  (lowest)

Rules:

1. Higher specificity ALWAYS wins
2. Equal specificity → last rule wins (the cascade)
3. !important overrides everything (never use it)

Example:

1p { color: blue; }           /* 0-0-1 */
2.special { color: red; }     /* 0-1-0 ← WINS */
3#unique { color: green; }    /* 1-0-0 ← WINS over both */

The Box Model

1┌──────────────────────────────────────┐
2│              MARGIN                  │
3│  ┌────────────────────────────────┐  │
4│  │           BORDER               │  │
5│  │  ┌──────────────────────────┐  │  │
6│  │  │        PADDING           │  │  │
7│  │  │  ┌──────────────────┐   │  │  │
8│  │  │  │     CONTENT      │   │  │  │
9│  │  │  │  (text, images)  │   │  │  │
10│  │  │  └──────────────────┘   │  │  │
11│  │  └──────────────────────────┘  │  │
12│  └────────────────────────────────┘  │
13└──────────────────────────────────────┘

Analogy: Photo (content) → Matting (padding) → Frame (border) → Wall space (margin)

The Professional Reset

1*, *::before, *::after {
2    box-sizing: border-box;
3}

Example: width: 300px; padding: 20px; border: 5px solid;

• content-box → total = 300 + 40 + 10 = 350px
• border-box → total = 300px (padding + border eat into content)

CSS Colors

Pro Tip: Hex is used ~70% of the time in production. Learn to read hex values.

Common CSS Properties Quick Reference

Common Mistakes to Avoid

1. Missing Semicolons

1/* WRONG — font-size also breaks! */
2h1 {
3    color: blue
4    font-size: 24px;
5}
6
7/* CORRECT */
8h1 {
9    color: blue;
10    font-size: 24px;
11}

2. Dot in HTML Class Attribute

1<!-- WRONG -->
2<p class=".highlight">Text</p>
3
4<!-- CORRECT -->
5<p class="highlight">Text</p>

3. Misspelling Properties

1/* WRONG — CSS fails silently! */
2h1 { colour: red; }
3
4/* CORRECT */
5h1 { color: red; }

4. Forgetting border-box

1/* WRONG — element will be wider than 300px */
2.box {
3    width: 300px;
4    padding: 20px;
5    border: 5px solid black;
6    /* Total: 350px! */
7}
8
9/* CORRECT — element is exactly 300px */
10*, *::before, *::after {
11    box-sizing: border-box;
12}
13.box {
14    width: 300px;
15    padding: 20px;
16    border: 5px solid black;
17    /* Total: 300px */
18}

VS Code Shortcuts

Chrome DevTools: CSS Inspection

Opening DevTools

• F12 or Ctrl + Shift + I
• Right-click any element → "Inspect"

Styles Panel

• Shows ALL CSS rules applied to the selected element
• Strikethrough = overridden by a more specific rule
• Click any value to edit live
• Toggle checkboxes to enable/disable properties

Box Model Visualizer

• Located in the "Computed" tab (or bottom of Styles panel)
• Blue = content, Green = padding, Yellow = border, Orange = margin
• Hover over each section to highlight it on the page

Contrast Checker

• Click any color value in Styles panel
• Shows contrast ratio against background
• Green checkmark = passes WCAG, Red = fails

What's Next?

In Lecture 4: Modern Dashboard Layout, you'll learn:

• Flexbox — One-dimensional layout (rows OR columns)
• CSS Grid — Two-dimensional layout (rows AND columns)
• Responsive design basics — Making layouts adapt to screen sizes
• Building a dashboard with multiple cards side by side

Keep this cheatsheet handy while working on your assignment!