CSS Fundamentals
Learn CSS from scratch — selectors, the box model, flexbox, grid, responsive design, and media queries. Turn plain HTML into beautiful, professional-looking webpages.
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.
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
<!-- 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>
Selectors: telling CSS what to style
A CSS rule has two parts: a selector (what to style) and declarations (how to style it):
selector {
property: value;
property: value;
}
Here are the selectors you'll use daily:
/* 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 XPThe 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.
.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:
* {
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
/* 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;
Flexbox: one-dimensional layout
Before flexbox, centering a <div> vertically was a running joke in web development. Flexbox solved it in one line.
.container {
display: flex; /* Activates flexbox */
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 16px; /* Space between items */
}
Key flexbox properties:
/* 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:
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 32px;
}
Build a card layout with flexbox
50 XPCSS Grid: two-dimensional layout
Flexbox handles rows OR columns. Grid handles both at once — it's designed for full page layouts.
.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:
.page {
display: grid;
grid-template-columns: 250px 1fr; /* Fixed sidebar + flexible main */
grid-template-rows: 80px 1fr 60px; /* Header, content, footer */
min-height: 100vh;
}
✗ Without AI
- ✗Laying out items in a single row or column
- ✗Navigation bars
- ✗Card rows
- ✗Centering content
- ✗Aligning form elements
✓ With AI
- ✓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.
/* 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.
Test responsive behavior
25 XPPutting it all together: a styled profile card
* { 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. In the next module, you'll add JavaScript and make your pages actually do things. But first, take a moment to appreciate what CSS gives you: the ability to turn plain text into something beautiful.
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?