CSS (Cascading Style Sheets) controls the visual presentation of HTML. Every website you visit uses CSS for its layout, colors, typography, and animations.
What CSS Does
- Layout — Position elements on the page (Flexbox, Grid)
- Typography — Fonts, sizes, spacing, text effects
- Colors & Backgrounds — Text color, backgrounds, gradients
- Box Model — Margins, padding, borders, dimensions
- Animations — Transitions, keyframe animations
- Responsive Design — Adapt layouts to any screen size
Three Ways to Add CSS
HTML
<!-- 1. External stylesheet (BEST) -->
<link rel="stylesheet" href="styles.css">
<!-- 2. Internal (in <head>) -->
<style>
body { font-family: sans-serif; }
</style>
<!-- 3. Inline (avoid — mixes content with presentation) -->
<p style="color: red;">Red text</p>CSS Syntax
CSS
/* Selector { property: value; } */
h1 {
color: blue;
font-size: 24px;
margin-bottom: 16px;
}
/* Multiple properties */
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Multiple selectors */
h1, h2, h3 {
font-family: 'Georgia', serif;
line-height: 1.3;
}The Cascade
CSS stands for Cascading Style Sheets. "Cascading" means styles follow this priority order:
- Inline styles (highest priority)
- ID selectors (#id)
- Class selectors (.class)
- Element selectors (p, div, h1)
- Inherited styles (lowest)
CSS
/* Later rules override earlier rules (same specificity) */
p { color: blue; }
p { color: red; } /* This wins — same specificity, comes later */
/* More specific wins */
.text { color: blue; } /* specificity: 0-1-0 */
p.text { color: red; } /* specificity: 0-1-1 — this wins */Browser DevTools
Press F12 (or right-click > Inspect) to open DevTools:
- Elements tab — Inspect and edit HTML/CSS live
- Computed tab — See all computed styles
- Box model diagram — Visualize margin/padding/border
- Responsive mode — Test different screen sizes
CSS Reset vs Normalize
CSS
/* Reset — remove all default browser styles */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Normalize — make default styles consistent across browsers */
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #333;
}Knowledge Check
4 questions — test your understanding
1
Which CSS specificity has the highest priority?
2
What does 'cascade' mean in CSS?
3
Why should you use external stylesheets over inline styles?
4
What does box-sizing: border-box do?
Next: CSS Syntax