CSS Properties

A quick lookup for CSS properties grouped by topic. Each section covers syntax, common values, and usage notes — with code examples for the concepts that need them most.

Selectors

Selector	Targets	Example
element	All elements of that type	p { }
.class	Elements with that class	.card { }
#id	The element with that id	#hero { }
A B	B elements that are descendants of A	nav a { }
A > B	B elements that are direct children of A	ul > li { }
A + B	B immediately following A (adjacent sibling)	h2 + p { }
A ~ B	All B siblings after A	h2 ~ p { }
[attr]	Elements that have the attribute	[required] { }
[attr="val"]	Elements with an exact attribute value	[type="email"] { }
:hover	Element under the cursor	a:hover { }
:focus	Focused element	input:focus { }
:active	Element being clicked	button:active { }
:visited	Visited links	a:visited { }
:first-child	First child of its parent	li:first-child { }
:last-child	Last child of its parent	li:last-child { }
:nth-child(n)	The nth child	li:nth-child(2) { }
:not(selector)	Elements that do not match	:not(.active) { }
::before	Generated content before the element	p::before { }
::after	Generated content after the element	p::after { }
::placeholder	Input placeholder text	input::placeholder { }
A, B	Both A and B (group)	h1, h2, h3 { }

The box model

Property	Common values	Notes
box-sizing	content-box, border-box	Always set border-box globally — makes width and height include padding and border
width	px, %, rem, auto, min-content, max-content	Default is auto
min-width	any length	Prevents shrinking below this value
max-width	any length	Common pattern: max-width: 1200px; margin: 0 auto for centered containers
height	px, %, rem, auto	% only works if the parent has an explicit height
min-height	any length	—
max-height	any length	Often paired with overflow: auto
margin	px, %, rem, auto	Shorthand: top right bottom left. auto centers block elements horizontally
padding	px, %, rem	Shorthand: top right bottom left. % is relative to parent width on all sides
border	width style color	Shorthand: border: 1px solid #ccc
border-width	px, thin, medium, thick	—
border-style	solid, dashed, dotted, double, none	Required for a border to appear
border-color	any color value	—
border-radius	px, %, rem	50% on equal width/height creates a circle. Individual corners: border-top-left-radius etc.
outline	width style color	Like border but outside the box — does not affect layout. Never remove without a replacement for focus styles
display	block, inline, inline-block, flex, grid, none	none removes the element from flow and hides it completely
visibility	visible, hidden	hidden hides but the element still occupies space
overflow	visible, hidden, auto, scroll	auto adds a scrollbar only when content overflows
overflow-x / overflow-y	same values	Control horizontal and vertical overflow independently

/* shorthand margin/padding — 4, 2, or 1 value(s) */
margin: 16px 24px 16px 24px; /* top right bottom left */
margin: 16px 24px;            /* top/bottom  left/right */
margin: 16px;                 /* all sides */

/* centered container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* global box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

Positioning

Property	Values	Notes
position	static, relative, absolute, fixed, sticky	static is default — elements follow normal flow
top / right / bottom / left	px, %, rem, auto	Only apply when position is not static
z-index	integer	Higher numbers stack on top. Only works on positioned elements (position not static)

/* relative — stays in flow, offsets from its own position */
.badge { position: relative; top: 4px; }

/* absolute — removed from flow, positioned relative to nearest positioned ancestor */
.tooltip { position: absolute; top: 8px; right: 8px; }

/* fixed — stays in place relative to the viewport while scrolling */
.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

/* sticky — normal flow until scroll threshold, then sticks */
.sticky-header { position: sticky; top: 0; }

Color & backgrounds

Property	Common values	Notes
color	named, hex, rgb(), hsl()	Sets text color. Also the value of the currentColor keyword
background-color	named, hex, rgb(), hsl(), transparent	—
background-image	url(), linear-gradient(), radial-gradient()	—
background-size	cover, contain, px, %	cover fills without distorting (may crop). contain shows full image
background-position	center, top right, 50% 50%, px	—
background-repeat	repeat, no-repeat, repeat-x, repeat-y	—
background-attachment	scroll, fixed, local	fixed creates a parallax-like effect
background	shorthand	url(img.jpg) center / cover no-repeat
opacity	0 to 1	Affects the element and all its children. Use rgba() / hsl() alpha to target color only

/* color formats */
color: #2c4a1e;                       /* hex */
color: rgb(44, 74, 30);               /* rgb */
color: rgba(44, 74, 30, 0.5);         /* rgba — with transparency */
color: hsl(107, 29%, 20%);            /* hsl */
color: hsl(107 29% 20% / 50%);        /* modern hsl with alpha */

/* gradient background */
background-image: linear-gradient(to bottom, #2c4a1e, #a8c97f);

/* image background */
background: url(hero.jpg) center / cover no-repeat;

Typography

Property	Common values	Notes
font-family	font name, serif, sans-serif, monospace	Comma-separated stack — browser uses first available, falls back left to right
font-size	px, rem, em, %, vw	rem is preferred — scales with user’s browser font size preference
font-weight	normal (400), bold (700), 100–900	Availability depends on the loaded font
font-style	normal, italic, oblique	—
font	shorthand	style weight size/line-height family
line-height	unitless, px, em, %	Unitless (e.g. 1.5) is preferred — scales proportionally with font-size
letter-spacing	px, em	Positive = wider. em scales with font size. Common for headings and uppercase labels
word-spacing	px, em	—
text-align	left, right, center, justify	—
text-decoration	none, underline, line-through, overline	Shorthand includes text-decoration-color and text-decoration-style
text-transform	none, uppercase, lowercase, capitalize	—
white-space	normal, nowrap, pre, pre-wrap	nowrap prevents line breaks
text-overflow	clip, ellipsis	Requires overflow: hidden and white-space: nowrap

/* font shorthand: style weight size/line-height family */
font: italic 700 1.5rem / 1.6 "Playfair Display", serif;

/* truncate long text with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Visual effects

Property	Common values	Notes
box-shadow	x y blur spread color	Comma-separate multiple shadows. Add inset for inner shadow
text-shadow	x y blur color	No spread value. Multiple shadows comma-separated
filter	blur(), brightness(), contrast(), grayscale(), drop-shadow()	Applies to the element and all its contents
backdrop-filter	blur(), brightness() etc.	Applies to content behind the element — frosted-glass effect
cursor	pointer, default, not-allowed, grab, crosshair	—

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);                          /* soft drop shadow */
box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.08);  /* layered */
box-shadow: inset 0 2px 4px rgba(0,0,0,.2);                        /* inner shadow */

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

/* frosted glass */
.panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
}

Flexbox

Apply container properties to the flex parent. Apply item properties to flex children.

Container properties

Property	Common values	Notes
display	flex, inline-flex	inline-flex behaves like flex but shrinks to content width
flex-direction	row, column, row-reverse, column-reverse	Sets the main axis. Default: row
flex-wrap	nowrap, wrap, wrap-reverse	Default nowrap — items shrink rather than wrap to a new line
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	Distributes space along the main axis
align-items	stretch, flex-start, flex-end, center, baseline	Aligns items along the cross axis. Default: stretch
align-content	same as justify-content	Only applies when there are multiple rows (flex-wrap: wrap)
gap	px, rem	Space between items. gap: row-gap column-gap for separate values
flex-flow	direction wrap	Shorthand for flex-direction + flex-wrap

Item properties

Property	Common values	Notes
flex	1, 0 1 auto, grow shrink basis	Shorthand. flex: 1 = grow to fill available space
flex-grow	0, 1, number	How much of the extra space this item gets. Default 0
flex-shrink	0, 1, number	Whether the item shrinks below its flex-basis. Default 1
flex-basis	auto, px, %, rem	Ideal size before growing/shrinking. Default auto
align-self	same as align-items	Overrides align-items for this one item
order	integer	Default 0. Lower numbers appear first regardless of source order

/* logo left, links right */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* wrapping card row */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 280px; /* grow, shrink, never below 280px */
}

/* equal-width columns */
.columns { display: flex; gap: 2rem; }
.col     { flex: 1; }

/* perfectly centered */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

Apply container properties to the grid parent. Apply item properties to grid children.

Container properties

Property	Common values	Notes
display	grid, inline-grid	—
grid-template-columns	px, fr, %, repeat(), minmax(), auto	1fr = one fraction of available space
grid-template-rows	same	Explicit row sizes. Rows without this are auto-sized
grid-template-areas	quoted area names	Names regions for named placement
grid-auto-rows	px, rem, fr, minmax()	Size for implicitly created rows
grid-auto-flow	row, column, dense	How auto-placed items fill the grid
gap	px, rem	Space between rows and columns. gap: row-gap column-gap

Item properties

Property	Common values	Notes
grid-column	1 / 3, span 2, 1 / -1	Start / end column line. -1 = the last line
grid-row	1 / 3, span 2	Start / end row line
grid-area	named area, or row-start / col-start / row-end / col-end	—
justify-self	start, end, center, stretch	Aligns item horizontally within its cell
align-self	start, end, center, stretch	Aligns item vertically within its cell
place-self	align justify	Shorthand for align-self + justify-self

/* 3-column tour grid */
.tours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* named-area layout */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "sidebar content";
  gap: 2rem;
}
.sidebar { grid-area: sidebar; }
.content  { grid-area: content; }

/* responsive grid — no media queries needed */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* span multiple columns */
.featured { grid-column: 1 / -1; } /* full width */

Transitions

Property	Common values	Notes
transition-property	all, property name	The CSS property to animate. Prefer specific names over all
transition-duration	ms, s	Required — defaults to 0
transition-timing-function	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()	—
transition-delay	ms, s	Wait before starting
transition	shorthand	property duration timing delay

/* single property */
.btn { transition: background-color 200ms ease; }

/* multiple properties */
.card { transition: transform 200ms ease, box-shadow 200ms ease; }

/* hover lift pattern */
.card { transition: transform 200ms ease, box-shadow 200ms ease; }
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

For smooth 60fps animation, only transition transform and opacity — they run on the compositor and do not trigger layout recalculation. Avoid animating width, height, margin, or top/left.

Animations

Property	Common values	Notes
animation-name	keyframe name	Must match a @keyframes rule
animation-duration	ms, s	Required — defaults to 0
animation-timing-function	same as transition	Can be set per-keyframe or per-animation
animation-delay	ms, s	Stagger effect: different delays per element
animation-iteration-count	number, infinite	—
animation-direction	normal, reverse, alternate, alternate-reverse	—
animation-fill-mode	none, forwards, backwards, both	forwards holds the final state after the animation ends
animation-play-state	running, paused	Pause/resume via JavaScript or :hover
animation	shorthand	name duration timing delay count direction fill-mode

@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero { animation: fade-in 600ms ease forwards; }

/* staggered cards */
.card:nth-child(1) { animation-delay:   0ms; }
.card:nth-child(2) { animation-delay: 100ms; }
.card:nth-child(3) { animation-delay: 200ms; }

/* respect motion preferences — always include this */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Units

Unit	Type	Notes
px	Absolute	Fixed size — does not scale with user settings
rem	Root-relative	Relative to the <html> font-size (1rem = 16px by default). Preferred for typography and spacing
em	Element-relative	Relative to the element’s own font-size. Compounds with nesting
%	Parent-relative	Relative to the parent’s corresponding value
vw	Viewport	1% of viewport width
vh	Viewport	1% of viewport height
dvh	Dynamic viewport	Accounts for mobile browser chrome appearing/disappearing
fr	Grid fraction	One fraction of remaining grid space. Grid-only
ch	Character	Width of the 0 glyph in the current font. Useful for setting readable line lengths
min()	Function	min(100%, 600px) — whichever is smaller
max()	Function	max(1rem, 16px) — whichever is larger
clamp()	Function	clamp(min, preferred, max) — fluid values between a minimum and maximum

/* fluid typography with clamp */
h1 { font-size: clamp(1.75rem, 4vw, 3rem); }
p  { font-size: clamp(1rem, 2vw, 1.125rem); }

/* readable line length */
.prose { max-width: 65ch; }

Media queries

/* mobile-first: base styles apply to all screens */
/* @media rules layer on styles for progressively larger screens */

/* tablet and up */
@media (min-width: 600px) { }

/* desktop and up */
@media (min-width: 1024px) { }

/* large desktop */
@media (min-width: 1280px) { }

/* dark mode */
@media (prefers-color-scheme: dark) { }

/* reduced motion */
@media (prefers-reduced-motion: reduce) { }

/* print */
@media print { }

/* multiple conditions */
@media (min-width: 600px) and (max-width: 1023px) { }

STO breakpoints from the course: 600px (2-column cards), 768px (horizontal header), 1024px (3-column tour grid).

CSS custom properties

Syntax	Example	Notes
Define	--color-primary: #2c4a1e;	Convention: --kebab-case. Defined on :root for global scope
Use	color: var(--color-primary);	Second argument is a fallback: var(--color-primary, black)
Override	Redefine on any selector	Scoped: .dark { --color-primary: #fff; } affects that element and its children

:root {
  /* STO design tokens */
  --color-primary:  #2c4a1e;
  --color-accent:   #a8c97f;
  --font-heading:   "Playfair Display", serif;
  --font-body:      "Source Sans 3", sans-serif;
  --space-sm:       0.5rem;
  --space-md:       1rem;
  --space-lg:       2rem;
  --radius:         0.5rem;
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.12);
  --max-width:      1200px;
}

.btn {
  background-color: var(--color-primary);
  font-family:      var(--font-body);
  border-radius:    var(--radius);
  box-shadow:       var(--shadow);
}