HTML Semantic Elements
| Element | Purpose |
|---|
<header> | Page or section header — logo, nav, title |
<nav> | Primary navigation links |
<main> | Main content — one per page |
<section> | Thematic grouping of content |
<article> | Self-contained content (blog post, card) |
<footer> | Page or section footer |
CSS Selectors
| Selector | Example | Matches |
|---|
| Element | p { } | All elements |
| Class | .card { } | Elements with class="card" |
| ID | #header { } | Element with id="header" |
| Descendant | nav a { } | All inside |
| Child | ul > li { } | Direct children of |
The Box Model
| Layer | Property |
|---|
| Content | width, height |
| Padding | padding: 10px — space inside border |
| Border | border: 1px solid #000 |
| Margin | margin: 10px — space outside border |
Flexbox Essentials
| Property | Values |
|---|
display: flex | Enables flex on container |
justify-content | center, space-between, space-around, flex-start |
align-items | center, stretch, flex-start, flex-end |
flex-direction | row (default), column, row-reverse |
Pro Tip: Always use semantic HTML — screen readers and search engines understand