HTML & CSS Cheat Sheet 2026 (Tags, Flexbox, Grid, Selectors)

HTML & CSS Cheat Sheet

Quick reference from FreeCodingCourses.com

Page structure

<!DOCTYPE html>: first line of every HTML page.
<html lang="en"> <head> ... </head> <body> ... </body> </html>: head holds metadata, body holds content.
<meta name="viewport" content="width=device-width, initial-scale=1">: makes the page responsive on phones.
<link rel="stylesheet" href="style.css">: load a CSS file, goes in head.

Common elements

<h1> ... <h6>: headings. One <h1> per page.
<p> <a href="/x"> <img src="x.png" alt="...">: paragraph, link, image. Always give img an alt.
<ul><li> ... </li></ul>: unordered list; <ol> for numbered.
<div> <span>: generic block and inline containers.
<header> <nav> <main> <footer>: semantic landmarks. Prefer these over bare divs.
<button> <input> <label>: form controls. Tie a label to its input.

CSS selectors

p { color: navy; }: by tag name.
.card { ... }: by class: <div class="card">. Your everyday selector.
#main { ... }: by id (unique per page).
.card:hover { ... }: state, like hover or focus.
.card p { ... }: descendant: p inside .card.

The box model

box-sizing: border-box;: width includes padding and border. Set this globally.
padding: 1rem;: space inside the border.
margin: 1rem auto;: space outside; auto centers a block.
border: 1px solid #ccc;: width, style, color.

Flexbox (one-dimension layout)

display: flex;: children line up in a row.
justify-content: space-between;: spacing along the main axis.
align-items: center;: align on the cross axis.
gap: 1rem;: space between children.
flex-direction: column;: stack vertically instead.

Grid (two-dimension layout)

display: grid;: turn on grid layout.
grid-template-columns: repeat(3, 1fr);: three equal columns.
grid-template-columns: 200px 1fr;: fixed sidebar, flexible main.
gap: 1rem;: space between cells.

Unlock the full HTML & CSS cheat sheet

You're seeing 2 of 6 sections. Drop your email to open the rest plus the gotchas, and save the whole thing as a printable PDF.

No spam, unsubscribe anytime. See our privacy policy.

HTML & CSS questions, answered

Is HTML or CSS a programming language?

Not in the usual sense. HTML is a markup language that structures content, and CSS is a style language that controls how it looks. Neither has logic like loops or conditionals. They are still the foundation of every website, and the first thing to learn for front-end work.

When should I use Flexbox versus Grid?

Use Flexbox for one-dimensional layouts: a navbar, a row of buttons, a single column. Use Grid when you need to control rows and columns together, like a page layout or an image gallery. They work well together, and it is fine to nest one inside the other.

What is the box model?

Every element is a box made of four layers: the content, then padding around it, then a border, then margin outside that. Setting box-sizing: border-box makes an element's width include its padding and border, which avoids a lot of layout surprises.

HTML & CSS cheat sheet