Interview
HTML & CSS Cheatsheet
A quick reference guide for HTML5 tags, CSS Flexbox and Grid layouts, math functions, specificity math, and shortcuts.
Last Updated: July 15, 2026
•
10 min read
1. Learning Objectives
This cheatsheet serves as a quick reference guide. By reviewing these templates, you can quickly find:
- HTML5 semantic tagging templates.
- CSS Flexbox alignment properties.
- CSS Grid template and gap definitions.
- CSS math functions and responsive boundaries.
- Specificity scoring hierarchy rules.
2. Overview
This cheatsheet lists common code templates for HTML structure, Flexbox alignments, CSS Grid definitions, and custom functions.
3. HTML5 Semantic Elements Cheat Sheet
| HTML5 Tag | Primary Layout Purpose |
|---|---|
| <header> | Contains logo, title, and site navigation links. |
| <nav> | Wraps navigation menus and link lists. |
| <main> | Wraps the primary content area of the document. (Only one per page). |
| <article> | Contains independent, self-contained articles or syndicated content items. |
| <aside> | Contains sidebar navigation panels or auxiliary info callouts. |
| <footer> | Contains copyright notices, terms links, and auxiliary info. |
4. CSS Flexbox Cheat Sheet
| Property | Standard Values | Layout Behavior |
|---|---|---|
| display | flex | inline-flex | Enables Flexbox layout on parent container. |
| flex-direction | row | column | row-reverse | Sets the direction of the flex main axis. |
| justify-content | flex-start | center | space-between | Aligns flex items along the main axis. |
| align-items | flex-start | center | stretch | Aligns flex items along the cross axis. |
5. CSS Grid Cheat Sheet
| Property Example | Visual Layout Role |
|---|---|
| grid-template-columns: repeat(3, 1fr); | Creates three equal-width columns. |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | Creates columns that wrap automatically on smaller viewports. |
| gap: 20px; | Sets column and row gap spacing together. |
6. CSS Custom Functions Cheat Sheet
| Function Structure | Visual Layout Role |
|---|---|
| calc(100vh - 80px) | Performs dynamic math calculations, mixing viewport units and pixels. (Requires spaces around - and +). |
| clamp(1rem, 2vw + 1rem, 3rem) | Restricts sizes to stay between a defined minimum (1rem) and maximum (3rem) range. |
| min(500px, 90%) | Compares values and applies the smallest one. Useful for responsive layouts. |
| max(20px, 4vw) | Compares values and applies the largest one. Useful for minimum padding layouts. |
7. Specificity Math Quick Check
| Selector Case | Inline Style | IDs | Classes / Pseudo-Classes | Elements / Pseudo-Elements | Specificity Score |
|---|---|---|---|---|---|
| .card #title:hover | 0 | 1 | 2 | 0 | 0,1,2,0 |
| div ul li a::before | 0 | 0 | 0 | 5 | 0,0,0,5 |
| #container .sidebar a | 0 | 1 | 1 | 1 | 0,1,1,1 |
8. Summary & Key Takeaways
This cheatsheet serves as a quick reference guide. Keep it open while designing layouts to quickly find syntax structures and math parameters.