What is CSS?

CSS (Cascading Style Sheets) is the standard language for controlling the visual presentation of web pages — the colors, layout, spacing, typography, animations, and responsive behavior that make the difference between a raw HTML document and a polished website.

1. The Role of CSS in the Web Stack

The web is built on three foundational technologies that each have a distinct, non-overlapping purpose:

┌─────────────────────────────────────────────────────────────┐
│                      THE WEB STACK                          │
│                                                             │
│   HTML  ──►  STRUCTURE     (what the content IS)            │
│   CSS   ──►  PRESENTATION  (how the content LOOKS)          │
│   JS    ──►  BEHAVIOR      (how the content ACTS)           │
└─────────────────────────────────────────────────────────────┘

Think of it like a building:

HTML is the architectural blueprint — the walls, floors, and rooms.
CSS is the paint, flooring, lighting, furniture, and interior design.
JavaScript is the electrical wiring, smart locks, and elevator systems.

A common mistake is mixing these responsibilities — using JavaScript to change colors when CSS can do it, or using HTML style="" attributes when a CSS class is better. Keeping these three concerns separated makes your code maintainable, readable, and easier to hand off to AI tools.

2. What CSS Actually Controls

Typography:        font-family, font-size, font-weight, line-height, letter-spacing
Color:             color, background-color, gradient, opacity
Spacing:           margin, padding, gap
Layout:            Flexbox, Grid, position (sticky, fixed, absolute)
Size:              width, height, max-width, aspect-ratio, clamp()
Borders + Shapes:  border, border-radius, outline
Visual Effects:    box-shadow, filter, backdrop-filter, mix-blend-mode
Animation:         transition, animation, @keyframes, scroll-driven
Responsive:        media queries, container queries, fluid sizing
State styles:      :hover, :focus, :checked, :is(), :has()
Generated content: ::before, ::after
Screen adaptation: dark mode, print styles, prefers-reduced-motion

3. Why "Cascading"?

The word Cascading describes the algorithm CSS uses to resolve conflicts — when multiple rules target the same element, how does the browser decide which one wins?

The Cascade Priority Order

Highest Priority
     ↑
     │  1. !important declarations (author)
     │  2. Inline styles (style="...")
     │  3. @layer order (later layers win)
     │  4. Specificity (how targeted the selector is)
     │  5. Source order (last rule wins when equal)
     │  6. Browser default stylesheet (user-agent)
     ↓
Lowest Priority

Specificity at a Glance

Selector Type        Specificity Weight   Example
────────────────────────────────────────────────────────
Inline style         1,0,0,0              style="color:red"
ID selector          0,1,0,0              #header
Class / attribute    0,0,1,0              .btn  [type="text"]
Element / pseudo-el  0,0,0,1              h1  ::before
Universal            0,0,0,0              *
────────────────────────────────────────────────────────
Higher number = higher priority. Compare left-to-right.

/* Example specificity conflict */
p { color: blue; }             /* 0,0,0,1 — element selector */
.text { color: red; }          /* 0,0,1,0 — class selector — WINS over p */
#main p { color: green; }      /* 0,1,0,1 — ID + element — WINS over .text */

[!TIP] The cascade is not a bug — it's a feature. Mastering it means you can control exactly which rules apply without reaching for !important.

4. A Brief History of CSS

Version	Year	Key Additions
CSS 1	1996	Fonts, colors, margins, basic text styles
CSS 2	1998	Positioning, z-index, media types, `@import`
CSS 2.1	2004–2011	Bug fixes, clarifications — most widely implemented
CSS 3	2011+	Split into modules — each evolves independently
Grid + Flexbox	2017	The modern layout revolution
Custom Properties	2017	CSS variables (`:root { --color: red; }`)
Container Queries	2022	Component-level responsive design
`@layer`	2022	Cascade layer control — native ITCSS
`:has()`	2023	Parent selector — game-changing
OKLCH colors	2023	Perceptually uniform color space
CSS Nesting	2024	Sass-like nesting in native CSS

[!NOTE] There is no "CSS 4" as a single release. CSS now uses a modular specification — Grid, Flexbox, Animations, Custom Properties, and Color each have their own spec with independent timelines. When you hear "CSS 4 selectors," it means the Selectors Level 4 spec, not a CSS version.

5. How the Browser Processes CSS

1. Request HTML from server
   ↓
2. Parse HTML → Build the DOM (Document Object Model)
   (encounters <link rel="stylesheet"> → pauses to fetch CSS)
   ↓
3. Download and Parse CSS → Build the CSSOM (CSS Object Model)
   ↓
4. Combine DOM + CSSOM → Render Tree
   (elements with display:none are excluded at this stage)
   ↓
5. Layout (Reflow): Calculate exact position and size of every element
   ↓
6. Paint: Fill pixels — text, colors, images, shadows, borders
   ↓
7. Composite: Assemble layers on the GPU and display

Why This Matters for Performance

/* ✅ These properties skip Layout and Paint — only Composite step */
/* Cheap to animate — GPU-accelerated */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ These trigger Layout (Reflow) — most expensive */
width: 200px → 300px;   /* Triggers full layout recalculation */
height: auto → 200px;   /* Same */
top: 0 → 50px;          /* Same (with position:relative) */

/* ⚠ These trigger Paint — medium cost */
background-color: change; /* Repaints the element */
color: change;            /* Repaints */
box-shadow: change;       /* Repaints */

6. CSS in the AI + WordPress Workflow

In this curriculum, CSS knowledge serves a specific professional purpose — giving you the technical authority to direct AI tools and build production-quality WordPress sites:

What You Can Do With CSS Mastery

AI Direction:
  → Write precise prompts that get BEM-compliant, token-using CSS first time
  → Audit AI output — spot specificity bugs, invalid syntax, outdated patterns
  → Correct AI mistakes (unnecessary vendor prefixes, !important abuse, etc.)

WordPress Development:
  → Build child themes that don't break when the parent theme updates
  → Override plugin CSS (WooCommerce, CF7) with correct specificity
  → Use CSS custom properties for a consistent design system
  → Style Gutenberg blocks, GeneratePress, GenerateBlocks, Bricks Builder

Design System:
  → Create reusable components with BEM naming
  → Manage the cascade with @layer
  → Build responsive layouts with Grid and Container Queries
  → Implement dark mode, animations, and accessibility

7. Core CSS Philosophies

Principle	Meaning	In Practice
Separation of Concerns	HTML = structure, CSS = style	Never use `style=""` for permanent styles; keep CSS in stylesheets
DRY (Don't Repeat Yourself)	Define once, reuse everywhere	CSS custom properties (`--color-primary`), shared component classes
Progressive Enhancement	Build for all, enhance for modern	Always have fallbacks before using new CSS features
Mobile First	Style small screens first, enhance up	Base styles → `min-width` media queries to expand
Cascade Awareness	Know which rule wins and why	Use specificity and `@layer` intentionally, avoid `!important`
Component Thinking	CSS reflects the UI component model	BEM naming, one class = one visual responsibility

8. CSS vs Inline Styles vs CSS-in-JS

Method              When to Use               Avoid When
──────────────────────────────────────────────────────────────────
External CSS file   Always — the default       Never avoid this
Internal <style>    Single-page special cases  Production, multi-page
Inline style=""     Dynamic JS-set values only Permanent styles
CSS-in-JS           React/Vue component libs   WordPress, no build step
CSS Modules         React apps with Vite/Next  WordPress
Tailwind utilities  Prototyping, React apps    WordPress without build

9. The Mental Model: CSS Rules

Every CSS rule has the same structure — memorise this once and it never changes:

/* ┌────────── SELECTOR ──────────┐ */
   .c-btn--primary:hover            {
/* └──────────────────────────────┘ */

/* ┌────── DECLARATION BLOCK ─────────────────────────────────┐ */
     background-color: var(--color-primary-dark);  /* property: value */
     transform:        translateY(-2px);
     box-shadow:       var(--shadow-primary);
/* └──────────────────────────────────────────────────────────┘ */
   }

/* Components:
   Selector = targets the HTML element
   Property = the CSS attribute to change
   Value     = what to change it to
   Declaration = property + value (one line)
   Rule       = selector + declaration block
*/

1. The Role of CSS in the Web Stack​

2. What CSS Actually Controls​

3. Why "Cascading"?​

The Cascade Priority Order​

Specificity at a Glance​

4. A Brief History of CSS​

5. How the Browser Processes CSS​

Why This Matters for Performance​

6. CSS in the AI + WordPress Workflow​

What You Can Do With CSS Mastery​

7. Core CSS Philosophies​

8. CSS vs Inline Styles vs CSS-in-JS​

9. The Mental Model: CSS Rules​