Notifications

Last 30 Days

No notifications

Notifications are automatically removed after 30 days
/Phase 1

CSS Fundamentals

PreviousNext

CSS — Styling the Web

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. Understanding selectors, specificity, the cascade, the box model, and units is essential before tackling layouts.

Selectors

SelectorExampleTargets
Elementp { }All

elements

Class.card { }Elements with class="card"
ID#hero { }The element with id="hero"
Attribute[type="email"] { }Inputs with that type
Descendantnav a { } inside
Childul > li { }Direct
  • children of
    • Pseudo-classa:hover { }Link on hover
    Pseudo-elementp::first-line { }First line of a

    Specificity (Weight System)

    Inline styles     → 1,0,0,0
ID selectors      → 0,1,0,0
Class / pseudo    → 0,0,1,0
Element / pseudo  → 0,0,0,1

    Higher specificity always wins regardless of source order.

    The Cascade (Priority Order)

    1. !important (avoid when possible) 2. Inline styles 3. ID selectors 4. Class / attribute / pseudo-class selectors 5. Element / pseudo-element selectors 6. Inherited styles

    The Box Model

    Every element is a rectangular box:

    ┌─────────────── margin ───────────────┐
│ ┌──────────── border ──────────────┐ │
│ │ ┌────────── padding ──────────┐  │ │
│ │ │        content              │  │ │
│ │ └─────────────────────────────┘  │ │
│ └──────────────────────────────────┘ │
└──────────────────────────────────────┘

    Set box-sizing: border-box so width includes padding + border.

    CSS Units

    UnitTypeRelative To
    pxAbsoluteScreen pixel
    emRelativeParent font-size
    remRelativeRoot font-size
    %RelativeParent dimension
    vw/vhRelativeViewport width/height

    On this page

    Detailed Theory

    What CSS Actually Does

    HTML decides *what* is on the page. CSS decides *how it looks*. Every CSS rule has the same shape:

    selector {
  property: value;
}

    For example: "make every paragraph blue" looks like p { color: blue; }. That's it. Everything else in CSS is just choosing better selectors and learning more properties.

    Three Ways to Add CSS to a Page

    1. External file (best — keeps HTML clean): 

    <link rel="stylesheet" href="styles.css" />
    2. Inside a