Step 3
Step 3 — CSS, how it looks
30 min
Step 3 — CSS, how it looks
If HTML is what, CSS is how it looks — color, spacing, alignment, even responsive design.
The box model
Every element is four nested layers from inside out: content → padding → border → margin.
.card {
margin: 16px;
padding: 12px 20px;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
Picture this every time you debug layout.
Flexbox — one row or one column
.row {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
gap, align-items, justify-content cover 90% of layout work.
Grid — two dimensions
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; }
}
Try it
Add a <style> block to step 2's index.html head:
<style>
body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; }
h1 { color: #0ea5e9; }
</style>
Refresh — the text centers and the heading turns sky-blue.
Next
Step 4 makes pages move with JavaScript.