CSS Fundamentals

The website that proved design matters

In 2003, a web developer named Dave Shea launched CSS Zen Garden. The concept was simple: one HTML file, completely untouched — the same headings, paragraphs, and links. But designers from around the world submitted different CSS stylesheets, and each one transformed the identical HTML into a radically different website. Dark themes, light themes, magazine layouts, hand-drawn aesthetics, minimalist designs — all from the same HTML.

It proved a revolutionary point: content and presentation are separate concerns. HTML handles the content. CSS handles everything you see.

The HTML pages you built in the previous module look like a 1994 research paper — black text on a white background. By the end of this module, you'll transform that plain HTML into a polished, responsive profile card using selectors, the box model, flexbox, grid, and media queries.

200+CSS Zen Garden designs

500+CSS properties

97%Of websites use CSS

What CSS actually does

CSS stands for Cascading Style Sheets. Every visual detail of a webpage — colors, fonts, spacing, layout, animations, responsive behavior — is controlled by CSS.

Without CSS, the web looks like a college research paper from 1994. With CSS, you get the polished interfaces of Stripe, Apple, and Airbnb.

Three ways to add CSS

html

<!-- 1. Inline (on the element itself — avoid this) -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- 2. Internal (in the <head> — fine for small projects) -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- 3. External file (best practice — always use this) -->
<head>
  <link rel="stylesheet" href="styles.css" />
</head>

⚠️Always use external stylesheets

Inline styles are impossible to maintain. Internal styles don't work across pages. External CSS files (`.css`) keep your styles organized, reusable, and cacheable by the browser. One CSS file can style your entire website.

Selectors: telling CSS what to style

A CSS rule has two parts: a selector (what to style) and declarations (how to style it):

css

selector {
  property: value;
  property: value;
}

Here are the selectors you'll use daily:

css

/* Element selector — targets all elements of that type */
p {
  color: #333;
  line-height: 1.6;
}

/* Class selector — targets elements with class="highlight" */
.highlight {
  background-color: yellow;
  padding: 4px;
}

/* ID selector — targets the ONE element with id="hero" */
#hero {
  font-size: 48px;
  font-weight: bold;
}

/* Descendant selector — targets <a> tags inside <nav> */
nav a {
  text-decoration: none;
  color: white;
}

/* Grouping — same styles for multiple selectors */
h1, h2, h3 {
  font-family: Georgia, serif;
}

Selector	Syntax	Specificity
Element	`p`, `h1`, `div`	Lowest
Class	`.classname`	Medium
ID	`#idname`	High
Inline style	`style="..."`	Highest

There Are No Dumb Questions

What does "cascading" mean in CSS?

When multiple CSS rules target the same element, the browser has to pick a winner. It uses specificity (ID beats class beats element) and order (later rules win over earlier ones). This "cascade" of rules is how CSS resolves conflicts.

Should I use classes or IDs?

Classes, almost always. IDs should be unique on a page (one element per ID), which makes them inflexible. Classes can be reused on as many elements as you want. Professional CSS is 95% class selectors.

🔒

Style your first page

25 XP

Create a file called `styles.css` next to the `index.html` you made in the previous module. Add a `<link>` tag to your HTML to connect them. Then write CSS rules to: 1. Change the `body` background color to something other than white 2. Change all `<h1>` text to a color you like 3. Add a class called `.intro` to your first paragraph and give it a larger font size Save both files and refresh your browser. Did the styles apply?

The box model: how every element is sized

Every HTML element is a rectangular box. Understanding how boxes are sized is the single most important CSS concept.

css

.card {
  width: 300px;         /* Content width */
  padding: 20px;        /* Space inside the border */
  border: 2px solid #ccc; /* The visible border */
  margin: 16px;         /* Space outside the border */
}

By default, width only sets the content width. Padding and border are added on top. A 300px box with 20px padding and 2px border is actually 344px wide.

Fix this madness with one line:

css

* {
  box-sizing: border-box;
}

Now width: 300px means the entire box — content + padding + border — is 300px. Every professional CSS file starts with this rule.

Content — the text, image, or child elements inside

Padding — space between the content and the border (inside the box)

Border — the visible (or invisible) edge of the box

Margin — space between this box and neighboring boxes (outside the box)

There Are No Dumb Questions

What's the difference between padding and margin?

Padding is inside the box — it pushes content away from the border. A box with a background color will show that color in the padding area. Margin is outside the box — it's transparent space between elements. Think of padding as stuffing inside a pillow and margin as the gap between pillows on a couch.

Colors, fonts, and text

css

/* Colors — multiple formats */
color: #3498db;                /* Hex (most common) */
color: rgb(52, 152, 219);     /* RGB */
color: hsl(204, 70%, 53%);    /* HSL (intuitive for designers) */

/* Fonts */
font-family: 'Inter', Arial, sans-serif;  /* Web font with fallbacks */
font-size: 16px;              /* Base size */
font-weight: 700;             /* Bold (100-900 scale) */
line-height: 1.6;             /* Line spacing — 1.5-1.7 is readable */

/* Text */
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;

🔑The readable web

Two CSS properties do more for readability than any others: `line-height: 1.6` and `max-width: 65ch` (65 characters per line). Apply these to your body text and your pages will instantly feel more professional.

Flexbox: one-dimensional layout

Before flexbox, centering a <div> vertically was a running joke in web development. Flexbox solved it in one line.

css

.container {
  display: flex;              /* Activates flexbox */
  justify-content: center;    /* Horizontal alignment */
  align-items: center;        /* Vertical alignment */
  gap: 16px;                  /* Space between items */
}

Key flexbox properties:

css

/* On the container */
flex-direction: row;          /* row (default) | column */
justify-content: space-between; /* start | center | end | space-between | space-around */
align-items: center;          /* start | center | end | stretch */
flex-wrap: wrap;              /* Items wrap to next line when they run out of space */

/* On individual items */
flex: 1;                      /* Item grows to fill available space */

A classic navigation bar in 4 lines:

css

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
}

🔒

Build a card layout with flexbox

50 XP

Create a page with 3 "cards" — each card is a `<div>` with a heading and paragraph inside. Use flexbox to: 1. Display the cards side by side in a row 2. Add equal spacing between them 3. Center the card content vertically Here's starter HTML: ```html <div class="cards"> <div class="card"><h3>Card 1</h3><p>Content</p></div> <div class="card"><h3>Card 2</h3><p>Content</p></div> <div class="card"><h3>Card 3</h3><p>Content</p></div> </div> ``` Write the CSS that makes `.cards` a flex container with `gap: 16px` and each `.card` with `flex: 1`, padding, and a border.

CSS Grid: two-dimensional layout

Flexbox handles rows OR columns. Grid handles both at once — it's designed for full page layouts.

css

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3 equal columns */
  grid-template-rows: auto;
  gap: 20px;
}

The fr unit means "fraction of available space." 1fr 2fr 1fr creates three columns where the middle one is twice as wide.

A classic page layout:

css

.page {
  display: grid;
  grid-template-columns: 250px 1fr;     /* Fixed sidebar + flexible main */
  grid-template-rows: 80px 1fr 60px;    /* Header, content, footer */
  min-height: 100vh;
}

✗ Use Flexbox when...

✗Laying out items in a single row or column
✗Navigation bars
✗Card rows
✗Centering content
✗Aligning form elements

✓ Use Grid when...

✓Building full page layouts
✓Creating a grid of equal cards
✓Sidebar + main content
✓Complex dashboard layouts
✓Any 2D arrangement

Responsive design: one site, every screen

In 2026, over 60% of web traffic comes from mobile devices. Your website must look good on a phone, a tablet, and a 4K monitor. This is responsive design.

The tool: media queries.

css

/* Base styles (mobile-first) */
.cards {
  display: grid;
  grid-template-columns: 1fr;     /* 1 column on mobile */
  gap: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;   /* 2 columns */
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;   /* 3 columns */
  }
}

Mobile-first — Write your base CSS for small screens, then add complexity for larger ones with min-width queries

Fluid units — Use %, vw, vh, rem, and fr instead of fixed px values where possible

max-width — Prevent content from stretching too wide: max-width: 1200px; margin: 0 auto;

The viewport meta tag — Without <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your HTML, mobile browsers will zoom out and show a tiny desktop version

There Are No Dumb Questions

What does "mobile-first" mean exactly?

It means you write your default CSS for small screens (phones). Then you add @media (min-width: ...) rules to progressively enhance the layout for larger screens. This approach works better than the reverse because it's easier to add complexity than to remove it.

🔒

Build a responsive card grid from scratch

25 XP

Starting from the card HTML you created in the flexbox challenge, rewrite the CSS using a **mobile-first** approach: 1. Base styles (no media query): cards in a single column with `grid-template-columns: 1fr` 2. At `768px`: switch to 2 columns 3. At `1024px`: switch to 3 columns 4. Add `max-width: 1000px` and `margin: 0 auto` to center the grid Test by dragging your browser window from narrow to wide. Open the device emulator (F12 > toggle device toolbar) and check iPhone, iPad, and desktop sizes. All three layouts should work.

Putting it all together: a styled profile card

css

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.profile {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.profile img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.profile h1 { margin: 16px 0 4px; font-size: 24px; }
.profile p { color: #666; margin-bottom: 20px; }

.profile .links {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.profile .links a {
  padding: 8px 20px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

This uses everything you've learned: the box model, flexbox, border-radius, shadows, and clean typography. It's a complete, professional-looking component in 30 lines of CSS.

From Zen Garden to your career

Dave Shea's CSS Zen Garden proved that a single HTML file could look like a thousand different websites. That same power is in your hands now. You've learned selectors, the box model, flexbox, grid, and responsive design — the core of every modern CSS codebase. Take a moment to appreciate what CSS gives you: the ability to turn plain text into something beautiful.

Your pages now have structure (HTML from the previous module) and style (CSS from this one). They look good and work on every screen size. But they're static — clicking a button does nothing, typing in a form goes nowhere.

Next up: In the next module, you'll learn JavaScript — the language that makes pages do things. Buttons that respond to clicks, content that updates without reloading, data fetched from APIs. Your static pages are about to come alive.

Key takeaways

CSS controls all visual presentation: colors, fonts, spacing, layout, and responsive behavior
Always use external stylesheets and box-sizing: border-box
The box model: content + padding + border + margin
Flexbox for one-dimensional layouts (rows or columns)
CSS Grid for two-dimensional layouts (rows AND columns)
Media queries enable responsive design — write mobile-first, enhance for larger screens
Class selectors (.classname) are the workhorse of professional CSS

Knowledge Check

1.What does `box-sizing: border-box` do?

2.When should you use CSS Grid instead of Flexbox?

3.What does 'mobile-first' responsive design mean?

4.Which CSS selector has the HIGHEST specificity?