Printable Polly — free printable templates and worksheetsPrintable Polly

HTML & CSS Quick Reference

A printable HTML and CSS reference covering common tags, selectors, box model, flexbox, grid, and essential properties. Compact and desk-friendly.

HTML & CSS Quick Reference

printablepolly.com

HTML

Text & Headings

<h1>-<h6>Headings (largest to smallest)
<p>Paragraph
<strong>Bold / important text
<em>Italic / emphasized text
<br>Line break
<hr>Horizontal rule
<blockquote>Block quotation
<code>Inline code
<pre>Preformatted text

Lists & Links

<ul>Unordered list
<ol>Ordered list
<li>List item
<a href="">Hyperlink
<img src="" alt="">Image

Tables

<table>Table container
<thead> / <tbody>Header / body groups
<tr>Table row
<th> / <td>Header cell / data cell

Forms

<form>Form container
<input type="">Input (text, email, password, ...)
<textarea>Multi-line text input
<select> / <option>Dropdown select
<button>Clickable button
<label>Label for input

Semantic Elements

<header>Page/section header
<nav>Navigation links
<main>Main content
<section>Thematic section
<article>Self-contained content
<aside>Sidebar content
<footer>Page/section footer

CSS

Selectors

elementdiv, p, h1
.class.card, .btn
#id#header, #main
parent childdiv p (descendant)
parent > childul > li (direct)
:hover, :focusPseudo-classes
::before, ::afterPseudo-elements

Box Model

marginOutside spacing
paddingInside spacing
border1px solid #ccc
width / heightpx, %, rem, vh/vw
box-sizingborder-box | content-box

Flexbox

display: flexEnable flex container
flex-directionrow | column
justify-contentcenter | space-between | flex-start
align-itemscenter | stretch | flex-start
gapSpacing between items
flex-wrapnowrap | wrap
flex: 1Grow to fill space

Grid

display: gridEnable grid container
grid-template-columnsrepeat(3, 1fr)
grid-template-rowsauto | fr | px
grid-gap / gapRow and column gap
grid-columnspan 2 | 1 / 3
place-itemscenter (align both axes)

Common Properties

colorText color
backgroundcolor | image | gradient
font-sizepx | rem | em | %
font-weight400 (normal) | 700 (bold)
text-alignleft | center | right
border-radiusRounded corners
positionrelative | absolute | fixed | sticky
z-indexStack order (higher = on top)
overflowhidden | scroll | auto
transitionproperty duration easing

Related Templates

🔀

Git Cheat Sheet

🔍

Regex Cheat Sheet

⌨️

Keyboard Shortcuts

📊

Math Formulas

FAQ

What is the difference between div and semantic HTML elements?

A <div> is a generic container with no inherent meaning. Semantic elements like <header>, <nav>, <main>, and <article> describe their content's purpose. Using semantic HTML improves accessibility, SEO, and code readability.

When should I use Flexbox vs Grid in CSS?

Use Flexbox for one-dimensional layouts (row OR column) like navigation bars or card rows. Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously, like page layouts or complex card grids.

What units should I use for font sizes and spacing?

Use rem for font sizes (scales with user preferences), px for borders and small fixed elements, and em or rem for padding/margin. Use vh/vw for viewport-relative sizing. Avoid px for font sizes as it ignores user accessibility settings.