Tools/CSS Properties

CSS Properties Reference

Essential CSS properties grouped into six categories — box model, typography, layout, flexbox, grid, and visual effects — each with common values and descriptions.

Box Model

Control spacing, size, and borders around elements.

Property	Example value	Description
`margin`	`0 auto`	Outer spacing — shorthand for all four sides
`margin-top / right / bottom / left`	`16px`	Individual margin sides
`padding`	`1rem 2rem`	Inner spacing — shorthand for all sides
`padding-top / right / bottom / left`	`8px`	Individual padding sides
`border`	`1px solid #ccc`	Shorthand: width style color
`border-width`	`2px`	Thickness of the border
`border-style`	`solid \| dashed \| dotted`	Border line style
`border-color`	`#6366f1`	Border color
`border-radius`	`8px \| 50%`	Round corners (or make circles)
`width`	`100% \| 480px`	Element width
`height`	`100vh \| auto`	Element height
`min-width / max-width`	`320px`	Clamp width to a range
`min-height / max-height`	`100px`	Clamp height to a range
`box-sizing`	`border-box`	Include padding/border in declared size
`overflow`	`hidden \| auto \| scroll`	Clip or scroll overflowing content

Typography

Control font, size, weight, spacing, and color.

Property	Example value	Description
`font-family`	`Inter, sans-serif`	Typeface stack
`font-size`	`1rem \| clamp(1rem, 2vw, 1.5rem)`	Text size
`font-weight`	`400 \| 700 \| bold`	Thickness of letterforms
`font-style`	`normal \| italic`	Normal or italic styling
`line-height`	`1.6`	Vertical spacing between lines
`letter-spacing`	`-0.02em \| 0.1em`	Space between characters
`word-spacing`	`0.05em`	Space between words
`text-align`	`left \| center \| right \| justify`	Horizontal alignment
`text-decoration`	`underline \| none \| line-through`	Underline, strikethrough, etc.
`text-transform`	`uppercase \| capitalize \| none`	Capitalization
`color`	`#18181b \| rgb(24,24,27)`	Text color
`white-space`	`nowrap \| pre \| normal`	Handle whitespace and wrapping
`text-overflow`	`ellipsis`	What to show when text overflows
`text-shadow`	`2px 2px 4px rgba(0,0,0,0.3)`	Shadow behind text

Layout & Positioning

Control how elements are placed in the document flow.

Property	Example value	Description
`display`	`block \| inline \| flex \| grid \| none`	Rendering mode of the element
`position`	`static \| relative \| absolute \| fixed \| sticky`	Positioning scheme
`top / right / bottom / left`	`0 \| 50%`	Offset from positioned ancestor
`z-index`	`10 \| 100 \| 9999`	Stacking order (higher = in front)
`float`	`left \| right \| none`	Float element to left or right of flow
`clear`	`both \| left \| right`	Prevent floating elements from sitting alongside
`visibility`	`visible \| hidden`	Show or hide (hidden still takes space)
`opacity`	`0 \| 0.5 \| 1`	Transparency (0 = invisible)

Flexbox

One-dimensional layout: rows or columns.

Property	Example value	Description
`display: flex`	`flex`	Enable flexbox on the container
`flex-direction`	`row \| column \| row-reverse`	Main axis direction
`flex-wrap`	`wrap \| nowrap`	Allow items to wrap to next line
`justify-content`	`flex-start \| center \| space-between \| space-around`	Alignment on main axis
`align-items`	`stretch \| center \| flex-start \| flex-end`	Alignment on cross axis
`align-content`	`flex-start \| center \| space-between`	Multi-line cross-axis alignment
`gap`	`16px \| 1rem 2rem`	Space between flex or grid items
`flex`	`1 \| 0 0 auto \| 1 1 0`	Shorthand: grow shrink basis
`flex-grow`	`0 \| 1`	How much the item grows
`flex-shrink`	`0 \| 1`	How much the item shrinks
`flex-basis`	`0 \| 200px \| auto`	Initial main size before growing/shrinking
`align-self`	`auto \| center \| stretch`	Override align-items for one item
`order`	`0 \| -1 \| 2`	Visual order of a flex item

Grid

Two-dimensional layout: rows and columns simultaneously.

Property	Example value	Description
`display: grid`	`grid`	Enable grid layout on the container
`grid-template-columns`	`repeat(3, 1fr) \| 200px auto`	Define column tracks
`grid-template-rows`	`auto 1fr auto`	Define row tracks
`grid-template-areas`	`"header" "main" "footer"`	Named layout areas
`grid-column`	`1 / 3 \| span 2`	Column start / end or span
`grid-row`	`1 / -1 \| span 2`	Row start / end or span
`grid-area`	`header \| main`	Place item in a named area
`column-gap / row-gap`	`16px`	Space between columns / rows
`grid-auto-flow`	`row \| column \| dense`	Auto-placement algorithm

Visual & Effects

Backgrounds, shadows, transforms, and transitions.

Property	Example value	Description
`background`	`#18181b \| linear-gradient(...)`	Shorthand background
`background-color`	`#fff \| transparent`	Solid background color
`background-image`	`url('...') \| linear-gradient(...)`	Background image or gradient
`background-size`	`cover \| contain \| 100%`	Scale the background image
`background-position`	`center \| top left`	Position background image
`box-shadow`	`0 4px 12px rgba(0,0,0,0.1)`	Drop shadow on element
`transform`	`translateY(-8px) scale(1.02)`	Translate, rotate, scale, skew
`transition`	`all 0.25s ease`	Animate property changes
`animation`	`fadeIn 0.4s ease-out forwards`	Keyframe animation
`filter`	`blur(4px) \| brightness(1.2)`	Visual filters (blur, brightness, etc.)
`backdrop-filter`	`blur(12px)`	Filter behind a translucent element (glassmorphism)
`cursor`	`pointer \| default \| grab`	Mouse cursor appearance

Practice typing these in CodeSpeedTest →

CSS mastery is about repetition. Type real CSS — flexbox layouts, animations, grid definitions — until the property names come without thinking.

Start typing CSS →Take the coding speed test

Property

Description

margin

0 auto

Outer spacing — shorthand for all four sides

margin-top / right / bottom / left

16px

Individual margin sides

padding

1rem 2rem

Inner spacing — shorthand for all sides

padding-top / right / bottom / left

8px

Individual padding sides

border

1px solid #ccc

Shorthand: width style color

border-width

2px

Thickness of the border

border-style

solid | dashed | dotted

Border line style

border-color

#6366f1

Border color

border-radius

8px | 50%

Round corners (or make circles)

width

100% | 480px

Element width

height

100vh | auto

Element height

min-width / max-width

320px

Clamp width to a range

min-height / max-height

100px

Clamp height to a range

box-sizing

border-box

Include padding/border in declared size

overflow

hidden | auto | scroll

Clip or scroll overflowing content

Property

Description

font-family

Inter, sans-serif

Typeface stack

font-size

1rem | clamp(1rem, 2vw, 1.5rem)

Text size

font-weight

400 | 700 | bold

Thickness of letterforms

font-style

normal | italic

Normal or italic styling

line-height

1.6

Vertical spacing between lines

letter-spacing

-0.02em | 0.1em

Space between characters

word-spacing

0.05em

Space between words

text-align

left | center | right | justify

Horizontal alignment

text-decoration

underline | none | line-through

Underline, strikethrough, etc.

text-transform

uppercase | capitalize | none

Capitalization

color

#18181b | rgb(24,24,27)

Text color

white-space

nowrap | pre | normal

Handle whitespace and wrapping

text-overflow

ellipsis

What to show when text overflows

text-shadow

2px 2px 4px rgba(0,0,0,0.3)

Shadow behind text

Property

Description

display

block | inline | flex | grid | none

Rendering mode of the element

position

static | relative | absolute | fixed | sticky

Positioning scheme

top / right / bottom / left

0 | 50%

Offset from positioned ancestor

z-index

10 | 100 | 9999

Stacking order (higher = in front)

float

left | right | none

Float element to left or right of flow

clear

both | left | right

Prevent floating elements from sitting alongside

visibility

visible | hidden

Show or hide (hidden still takes space)

opacity

0 | 0.5 | 1

Transparency (0 = invisible)

Property

Description

display: flex

flex

Enable flexbox on the container

flex-direction

row | column | row-reverse

Main axis direction

flex-wrap

wrap | nowrap

Allow items to wrap to next line

justify-content

flex-start | center | space-between | space-around

Alignment on main axis

align-items

stretch | center | flex-start | flex-end

Alignment on cross axis

align-content

flex-start | center | space-between

Multi-line cross-axis alignment

gap

16px | 1rem 2rem

Space between flex or grid items

flex

1 | 0 0 auto | 1 1 0

Shorthand: grow shrink basis

flex-grow

0 | 1

How much the item grows

flex-shrink

0 | 1

How much the item shrinks

flex-basis

0 | 200px | auto

Initial main size before growing/shrinking

align-self

auto | center | stretch

Override align-items for one item

order

0 | -1 | 2

Visual order of a flex item

Property

Description

display: grid

grid

Enable grid layout on the container

grid-template-columns

repeat(3, 1fr) | 200px auto

Define column tracks

grid-template-rows

auto 1fr auto

Define row tracks

grid-template-areas

"header" "main" "footer"

Named layout areas

grid-column

1 / 3 | span 2

Column start / end or span

grid-row

1 / -1 | span 2

Row start / end or span

grid-area

header | main

Place item in a named area

column-gap / row-gap

16px

Space between columns / rows

grid-auto-flow

row | column | dense

Auto-placement algorithm

Property

Description

background

#18181b | linear-gradient(...)

Shorthand background

background-color

#fff | transparent

Solid background color

background-image

url('...') | linear-gradient(...)

Background image or gradient

background-size

cover | contain | 100%

Scale the background image

background-position

center | top left

Position background image

box-shadow

0 4px 12px rgba(0,0,0,0.1)

Drop shadow on element

transform

translateY(-8px) scale(1.02)

Translate, rotate, scale, skew

transition

all 0.25s ease

Animate property changes

animation

fadeIn 0.4s ease-out forwards

Keyframe animation

filter

blur(4px) | brightness(1.2)

Visual filters (blur, brightness, etc.)

backdrop-filter

blur(12px)

Filter behind a translucent element (glassmorphism)

cursor

pointer | default | grab

Mouse cursor appearance