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">`

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; }`

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; }`

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%;`