CSS Tutorial for Beginners: How to Style Web Pages Step-by-Step
6 min read
Learn CSS basics: styling, spacing, and responsive layouts for beginners
Last updated: January 2026 ✅
Introduction
Once you learn HTML structure, the next step is making your page look like a real website — with spacing, colors, typography, layouts, and responsive design.
That’s exactly what CSS does.
CSS (Cascading Style Sheets) controls:
- colors
- fonts
- spacing (margin/padding)
- borders and shadows
- layouts (Flexbox/Grid)
- responsiveness (mobile-friendly pages)
In this beginner tutorial, you’ll learn CSS the practical way:
- how to add CSS to HTML
- how selectors work
- how the “cascade” and specificity works (without confusion)
- the most important properties you’ll actually use
- a mini project at the end: a clean card layout
Key Takeaways (Quick Wins)
- CSS styles HTML by selecting elements and applying rules like
color,font-size, andmargin. - Start with external CSS (
style.css) to keep your project clean. - Most layout problems are solved by understanding box model (margin/padding/border).
- For modern layouts, learn Flexbox first, then Grid.
- Use simple defaults: consistent spacing, readable font sizes, and responsive width rules.
✅ CSS Cheat Sheet (Most Used)
| Goal | Property | Example |
|---|---|---|
| Text color | color | color: #e5e7eb; |
| Background | background | background: #0f172a; |
| Font size | font-size | font-size: 16px; |
| Spacing outside | margin | margin: 16px; |
| Spacing inside | padding | padding: 16px; |
| Rounded corners | border-radius | border-radius: 12px; |
| Shadow | box-shadow | box-shadow: 0 10px 30px rgba(0,0,0,.3); |
| Flex layout | display: flex | display: flex; gap: 12px; |
| Responsive | max-width | max-width: 1100px; |
1) What is CSS (and why it matters)?
CSS is the language that styles your HTML.
Think of HTML as structure:
- headings
- paragraphs
- images
- sections
CSS makes it look professional:
- typography
- spacing
- layout
- colors
- responsiveness
Without CSS, your page works — but it looks plain.
2) How to Add CSS to HTML (3 ways)
If you don’t know HTML you can check our HTML Tutorial for Beginners.
Option A) External CSS (recommended)
This is the best method for real websites.
Step-by-step
- Create a file called:
style.css - Link it inside your
<head>:
<link rel="stylesheet" href="style.css" />
✅ This keeps HTML clean and CSS organized.
Option B) Internal CSS (inside <style>)
Good for small demos:
<style>
body { font-family: Arial, sans-serif; }
</style>
Option C) Inline CSS (not recommended)
Avoid except for quick tests:
<p style="color: red;">Hello</p>
3) Your First CSS Rules (Beginner-friendly)
A CSS rule looks like:
selector {
property: value;
}
Example:
p {
color: #e5e7eb;
font-size: 16px;
}
✅ That means:
- “Select every
<p>” - apply those properties
4) CSS Selectors (the most important ones)
Element selector
h1 { font-size: 36px; }
Class selector (most used)
.card { padding: 16px; }
In HTML:
<div class="card">...</div>
ID selector (use rarely)
#hero { padding: 40px; }
In HTML:
<section id="hero">...</section>
✅ Selector Types
| Selector | Example | Use case |
|---|---|---|
| Element | p {} | style all paragraphs |
| Class | .card {} | reusable design blocks |
| ID | #hero {} | unique section styling |
| Descendant | .nav a {} | style links inside nav |
| Hover | .btn:hover {} | interactive effects |
5) The Box Model (the #1 CSS concept)
Most layout issues happen because beginners don’t understand the box model.
Every element has:
- content
- padding (inside)
- border
- margin (outside)
.card {
padding: 16px;
border: 1px solid rgba(255,255,255,.1);
margin: 20px;
}
✅ If something looks “too tight”, add padding.
✅ If elements are too close, add margin.
🔥 Quick CSS Box Model Quiz (Click to reveal)
✅ Quick Quiz: Box Model Basics
1) What creates space inside the element?
➡️ Padding
2) What creates space outside the element?
➡️ Margin
3) What property rounds corners?
➡️ border-radius
6) Typography: Make Text Readable (fast wins)
A beginner-friendly base style:
body {
font-family: system-ui, Arial, sans-serif;
line-height: 1.6;
font-size: 16px;
}
Headings example
h1 { font-size: 38px; margin-bottom: 12px; }
h2 { font-size: 26px; margin-top: 28px; }
p { margin-bottom: 14px; }
✅ Tip: spacing matters more than fancy fonts.
7) Colors + Backgrounds (clean design)
body {
background: #0b1220;
color: #e5e7eb;
}
Buttons:
.btn {
background: #38bdf8;
color: #04101d;
padding: 10px 14px;
border-radius: 10px;
display: inline-block;
text-decoration: none;
font-weight: 600;
}
8) Layout: Flexbox (the fastest modern layout tool)
Flexbox is perfect for:
- navbars
- card rows
- aligning items
Example:
.row {
display: flex;
gap: 16px;
align-items: stretch;
}
.card {
flex: 1;
}
✅ This creates equal-width cards.
9) Responsive CSS (make it work on mobile)
Use these rules:
.container {
max-width: 1100px;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
Media query (simple)
@media (max-width: 768px) {
.row { flex-direction: column; }
}
✅ Now cards stack vertically on phones.
10) Mini Project: Build a Clean “Card Layout”
HTML
<div class="container">
<h1>My CSS Cards</h1>
<div class="row">
<div class="card">
<h2>Card One</h2>
<p>This is a simple card design using CSS.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<h2>Card Two</h2>
<p>Flexbox makes layouts easy and responsive.</p>
<a class="btn" href="#">Learn more</a>
</div>
<div class="card">
<h2>Card Three</h2>
<p>Use spacing and contrast for clean design.</p>
<a class="btn" href="#">Learn more</a>
</div>
</div>
</div>
CSS
body {
background: #0b1220;
color: #e5e7eb;
font-family: system-ui, Arial, sans-serif;
line-height: 1.6;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
.row {
display: flex;
gap: 16px;
}
.card {
flex: 1;
background: #0f172a;
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.card h2 {
margin-top: 0;
}
.btn {
display: inline-block;
margin-top: 10px;
background: #38bdf8;
color: #04101d;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
}
.btn:hover {
filter: brightness(1.1);
}
@media (max-width: 768px) {
.row { flex-direction: column; }
}
Explanation (what you just learned)
.containercenters content and limits width.rowuses Flexbox withgap.carduses padding, border radius, and shadow@mediamakes it mobile responsive
✅ Common CSS Mistakes → Fix
| Mistake | Why it happens | Fix |
|---|---|---|
| “Padding doesn’t work” | element is inline | set display: block |
| “Margin collapses” | vertical margins collapse | add padding/border or use flex/grid |
| “Image overflows” | missing responsive rules | max-width: 100%; height:auto; |
| “Flex items not aligned” | no align-items | use align-items: center; |
| “Text hard to read” | low contrast | increase contrast + line-height |
🔥 CSS Checklist (5 minutes)
✅ CSS Checklist (Click here to show)
✔ Use external CSS file (style.css)
✔ Set base typography (font-size + line-height)
✔ Use consistent spacing (margin/padding)
✔ Use Flexbox for layout and gap for spacing
✔ Add responsive rules (max-width + media query)
✔ Keep contrast high for readability
Next Steps (after CSS)
After CSS, your best learning path is:
- JavaScript basics (DOM, events)
- Responsive layout mastery (Flexbox/Grid deeper)
- Build a mini project (portfolio, landing page)
FAQ
Quick answers to common questions about CSS.
❓ Is CSS hard for beginners?
CSS is beginner-friendly, but layout can feel tricky at first. Most problems become easy once you understand the box model and Flexbox.
❓ Should I learn Flexbox or Grid first?
Learn Flexbox first because it solves most layouts quickly. Grid is great for complex page structures after you’re comfortable with Flexbox.
❓ What is the best way to practice CSS?
Build small UI components: cards, buttons, navbars, and responsive layouts. Repeating small projects helps more than reading theory.
❓ Is CSS worth learning in 2026?
Yes. CSS is essential for web design, frontend development, and customizing WordPress themes and page layouts.
