HTML & CSS QUICK REFERENCE
HTML Structure
Page Title
Hello World
Common Elements
Text & Headings
Heading 1
...
Heading 6
Paragraph text
Bold Italic
Links & Images
Lists
Forms
Input Types
Select & Textarea
Semantic HTML
| <header> | Intro content or nav container |
| <nav> | Navigation links |
| <main> | Primary page content (one per page) |
| <section> | Thematic grouping of content |
| <article> | Self-contained content |
| <aside> | Sidebar or tangential content |
| <footer> | Footer for section or page |
| <figure> | Image/diagram with caption |
| <figcaption> | Caption for |
HTML & CSS QUICK REFERENCE (continued)
CSS Selectors
Basic Selectors
| element | p { } — all elements |
| .class | .card { } — class selector |
| #id | #main { } — id selector |
| * | Universal selector (all elements) |
Combinators
| A B | Descendant (B inside A) |
| A > B | Direct child only |
| A + B | Adjacent sibling (B right after A) |
| A ~ B | General sibling (B after A) |
Pseudo-classes
| :hover | Mouse over element |
| :focus | Element has focus |
| :first-child | First child of parent |
| :nth-child(n) | nth child (2n = even, odd) |
Box Model
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
Shorthand
| margin: 10px | All sides |
| margin: 10px 20px | Top/bottom | left/right |
| margin: 10px 20px 15px | Top | left/right | bottom |
| margin: 10px 20px 15px 5px | Top | right | bottom | left |
Flexbox
Container
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
Item Properties
| flex: 1 | Grow to fill available space |
| flex-grow: 2 | Grow ratio relative to siblings |
| flex-shrink: 0 | Don't shrink below basis |
| flex-basis: 200px | Initial size before grow/shrink |
| align-self: flex-end | Override container alignment |
| order: -1 | Visual order (default 0) |
Grid
Container
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
Item Placement
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
Positioning
| static | Default flow (no offset properties) |
| relative | Offset from normal position |
| absolute | Offset from nearest positioned ancestor |
| fixed | Offset from viewport (stays on scroll) |
| sticky | Relative until scroll threshold, then fixed |
Example
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
Media Queries
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
Common Breakpoints
| 480px | Small phones |
| 768px | Tablets |
| 1024px | Small desktops / landscape tablets |
| 1280px | Desktops |
