HTML & CSS Cheat Sheet
Free HTML/CSS cheat sheet: document structure, CSS selectors, Flexbox, Grid, and responsive design at a glance.
HTML Structure
| Concept | Syntax | Example |
|---|---|---|
| Document skeleton | <!DOCTYPE html><html><head></head><body></body></html> | Every HTML page starts with this structure |
| Heading | <h1> to <h6> | <h1>Main Title</h1> |
| Paragraph | <p> | <p>Some text here</p> |
| Link | <a href="url"> | <a href="/about">About</a> |
| Image | <img src="" alt=""> | <img src="logo.png" alt="Logo"> |
Learn it in a lesson: HTML Basics & Structure
CSS Selectors
| Concept | Syntax | Example |
|---|---|---|
| Class selector | .classname | .btn { color: red; } |
| ID selector | #idname | #header { height: 60px; } |
| Child selector | parent > child | ul > li { margin: 0; } |
| Pseudo-class | :hover, :focus, :nth-child() | a:hover { color: blue; } |
Learn it in a lesson: CSS Basics & Selectors · Advanced CSS Selectors
CSS Layout
| Concept | Syntax | Example |
|---|---|---|
| Flexbox container | display: flex | .row { display: flex; gap: 1rem; } |
| Grid container | display: grid | .grid { display: grid; grid-template-columns: 1fr 1fr; } |
| Position | position: relative | absolute | fixed | sticky | .modal { position: fixed; top: 0; } |
Learn it in a lesson: Flexbox Mastery · CSS Grid System · Advanced Positioning: sticky, fixed, absolute, smart layouts
Responsive Design
| Concept | Syntax | Example |
|---|---|---|
| Media query | @media (max-width: 768px) {} | @media (max-width: 768px) { .col { width: 100%; } } |
| Viewport meta | <meta name="viewport" content="width=device-width, initial-scale=1"> | Add to <head> for mobile support |
| Relative units | rem, em, %, vw, vh | font-size: 1.2rem; width: 80%; |
Learn it in a lesson: Responsive Design
HTML Forms
| Concept | Syntax | Example |
|---|---|---|
| Text input name is what the server receives; without it the field is not submitted. | <input type="text" name=""> | <input type="text" name="city" required> |
| Label a field Clicking the label focuses the input, and screen readers announce the two together. | <label for="id"> | <label for="city">City</label><input id="city"> |
| Email and number The browser validates the format and shows the right keyboard on a phone. | type="email" | type="number" | <input type="email" required> |
| Dropdown value is submitted; the text between the tags is what the reader sees. | <select><option> | <select name="size"><option value="s">Small</option></select> |
| Checkbox An unchecked box sends nothing at all, not false. | <input type="checkbox" checked> | <input type="checkbox" name="terms" checked> |
| Multi-line text Its value goes between the tags, not in a value attribute. | <textarea rows cols> | <textarea name="note" rows="4"></textarea> |
| Submit button Inside a form a button defaults to submit — set type="button" if you do not want that. | <button type="submit"> | <button type="submit">Send</button> |
| Group fields Gives a set of related inputs one accessible name. | <fieldset><legend> | <fieldset><legend>Address</legend></fieldset> |
Learn it in a lesson: HTML Elements & Attributes · Mastering Complex Forms & Validation Patterns
Semantic HTML
| Concept | Syntax | Example |
|---|---|---|
| Page landmarks Screen readers jump between these. Use exactly one <main> per page. | <header> <nav> <main> <footer> | <main><h1>Title</h1></main> |
| Article vs section An article makes sense on its own; a section is a chunk of a bigger whole. | <article> | <section> | <article><h2>Post title</h2></article> |
| Figure with caption | <figure><figcaption> | <figure><img src="chart.png" alt="Sales"><figcaption>Q3 sales</figcaption></figure> |
| Time datetime is the machine-readable form; the text can read however you like. | <time datetime=""> | <time datetime="2026-09-03">3 Sep</time> |
| Abbreviation | <abbr title=""> | <abbr title="Cascading Style Sheets">CSS</abbr> |
Learn it in a lesson: Advanced HTML5 Semantic Architecture
CSS Box Model
| Concept | Syntax | Example |
|---|---|---|
| Padding vs margin Padding is inside the border, margin outside it. Backgrounds cover padding, not margin. | padding | margin | padding: 1rem; margin: 2rem auto; |
| Sane sizing Makes width include padding and border, which is what people expect. | box-sizing: border-box | *, *::before, *::after { box-sizing: border-box; } |
| Border The style is required — border: 1px #ccc draws nothing. | border: width style color | border: 1px solid #ccc; |
| Rounded corners | border-radius | border-radius: 8px; |
| Shadow | box-shadow: x y blur spread color | box-shadow: 0 1px 3px rgba(0,0,0,.2); |
| Centre a block Needs a width; auto margins split the leftover space evenly. | margin-inline: auto | .wrap { max-width: 60rem; margin-inline: auto; } |
Learn it in a lesson: CSS Box Model & Display · CSS Styling & Colors · CSS Layouts & Box Model
CSS Text
| Concept | Syntax | Example |
|---|---|---|
| Font stack Always end with a generic family so there is a fallback. | font-family: a, b, sans-serif | font-family: Inter, system-ui, sans-serif; |
| Line height Use a unitless number so it scales with the font size. | line-height | line-height: 1.6; |
| Weight | font-weight: 100-900 | bold | font-weight: 600; |
| Truncate one line All three are needed — ellipsis alone does nothing. | text-overflow: ellipsis | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| Letter spacing | letter-spacing | letter-spacing: .02em; |
Learn it in a lesson: CSS Styling & Colors
CSS Motion & State
| Concept | Syntax | Example |
|---|---|---|
| Transition Put it on the element, not on :hover, so it eases both ways. | transition: property duration easing | transition: background-color .2s ease; |
| Transform Cheap to animate — the browser does not re-lay-out the page for it. | transform: translate | scale | rotate | transform: translateY(-2px) scale(1.02); |
| Keyframes | @keyframes name { from {} to {} } | @keyframes fade { from { opacity: 0 } to { opacity: 1 } } |
| Respect motion settings Some readers get motion sickness from animation. Honour their setting. | @media (prefers-reduced-motion: reduce) | @media (prefers-reduced-motion: reduce) { * { animation: none; } } |
| Focus ring Shows the ring for keyboard users without showing it on every mouse click. | :focus-visible | a:focus-visible { outline: 2px solid; outline-offset: 2px; } |
Learn it in a lesson: CSS Animations & Transitions · CSS Transforms & 3D · Web Accessibility (A11y)
CSS Custom Properties
| Concept | Syntax | Example |
|---|---|---|
| Define Declared on a selector; children inherit it. | --name: value | :root { --brand: #04AA6D; } |
| Use | var(--name, fallback) | color: var(--brand, green); |
| Theme switch Change the variables, not every rule that uses them. | redefine under a selector or media query | @media (prefers-color-scheme: dark) { :root { --brand: #3ddc97; } } |
Learn it in a lesson: CSS Custom Properties · Custom Properties (CSS Variables) for Themes & Dynamic UI