CSS reference

Short entries with an example for each. When you need every detail, each entry links to the official documentation.

Filter the reference

CSS

Sets the text color.

h1 { color: teal; }

Set the size and typeface of text. Always end the font list with a generic family.

p { font-size: 20px; font-family: Georgia, serif; }

A dot selects a class, a # selects an id.

.note { color: gray; }
#top { color: crimson; }

Sets the background color or image of an element.

.hero { background: #fef3c7; padding: 20px; }

Space inside an element's border.

.card { padding: 20px; background: #eef2ff; }

Space outside an element's border.

.card { margin: 24px; background: #eef2ff; }

Draw a line around a box and round its corners.

.card { border: 2px solid navy; border-radius: 12px; padding: 12px; }

Lays out an element's children in a row (or a column).

.row { display: flex; gap: 12px; }

Places children in rows and columns.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

Space between the items in a flex or grid container.

.row { display: flex; gap: 24px; }

Applies styles only when the screen matches a condition, such as a narrow width.

@media (max-width: 600px) {
  body { background: lightyellow; }
}

Matches an element while the mouse pointer is over it.

a:hover { color: crimson; }

Animates a change in a property over time.

.btn { transition: transform 0.3s; }
.btn:hover { transform: scale(1.2); }