CSS3 Reference
Encyclopedia
A comprehensive guide to all modern CSS properties and their values.
📐 Layout & Box Model
display
Defines how an element is displayed (block, inline, flex, grid, etc.)
Values: block | inline | flex | grid | none | inline-block |
contents
position
Sets the positioning method (static, relative, absolute, fixed,
sticky)
Values: static | relative | absolute | fixed | sticky
box-sizing
Defines how width/height are calculated (content-box vs border-box)
Values: content-box | border-box
width / height
Sets the width and height of an element
Values: auto | <length> | <percentage> | min-content |
max-content | fit-content
margin / padding
Creates space outside (margin) or inside (padding) an element
Values: <length> | <percentage> | auto
overflow
Controls what happens when content overflows the element box
Values: visible | hidden | scroll | auto | clip
🎯 Flexbox
flex-direction
Sets the direction of flex items (row or column)
Values: row | row-reverse | column | column-reverse
justify-content
Aligns items along the main axis
Values: flex-start | flex-end | center | space-between |
space-around | space-evenly
align-items
Aligns items along the cross axis
Values: stretch | flex-start | flex-end | center | baseline
flex-wrap
Controls whether flex items wrap to new lines
Values: nowrap | wrap | wrap-reverse
gap
Sets the spacing between flex/grid items
Values: <length> | <percentage>
⬛ CSS Grid
grid-template-columns
Defines the columns of the grid
Values: none | <track-list> | repeat() | minmax() | auto-fit |
auto-fill
grid-template-rows
Defines the rows of the grid
Values: none | <track-list> | repeat() | minmax()
grid-area
Assigns a name to a grid item or sets its placement
Values: <name> | <row-start> / <column-start> /
<row-end> / <column-end>
grid-template-columns: subgrid
Allows nested grids to align with parent grid tracks
Values: subgrid
✍️ Typography
font-family
Specifies the font for an element
Values: <family-name> | serif | sans-serif | monospace |
system-ui
font-size
Sets the size of the font
Values: <length> | <percentage> | xx-small to xx-large |
clamp()
font-weight
Sets the thickness of characters
Values: normal | bold | 100-900 | lighter | bolder
line-height
Sets the vertical spacing between lines of text
Values: normal | <number> | <length> |
<percentage>
letter-spacing
Controls the space between characters
Values: normal | <length>
text-align
Aligns text horizontally
Values: left | right | center | justify | start | end
🎨 Colors & Backgrounds
color
Sets the text color
Values: <color> | rgb() | rgba() | hsl() | oklch() | #hex
background
Shorthand for all background properties
Values: <bg-color> <bg-image> <position> /
<size> <repeat> <attachment>
background-clip
Defines where the background extends to
Values: border-box | padding-box | content-box | text
linear-gradient() / radial-gradient()
Creates smooth color transitions
Values: linear-gradient(45deg, red, blue) | radial-gradient(circle,
red, blue)
opacity
Sets the transparency level
Values: 0 (invisible) to 1 (fully visible)
🎬 Transforms & Animations
transform
Applies 2D/3D transformations to an element
Values: translate() | rotate() | scale() | skew() | matrix() |
perspective()
transition
Animates property changes smoothly
Values: <property> <duration> <timing-function>
<delay>
animation
Applies keyframe animations
Values: <name> <duration> <timing-function>
<delay> <iteration-count>
animation-timeline
Links animation to scroll position (Scroll-Driven Animations)
Values: auto | scroll() | view()
✨ Filters & Effects
filter
Applies graphical effects like blur, brightness, contrast
Values: blur() | brightness() | contrast() | grayscale() |
hue-rotate() | drop-shadow()
backdrop-filter
Applies filters to the area BEHIND an element (glassmorphism)
Values: blur() | brightness() | contrast() | grayscale()
box-shadow
Adds shadow effects around an element
Values: <offset-x> <offset-y> <blur>
<spread> <color>
mix-blend-mode
Blends element with its background
Values: normal | multiply | screen | overlay | darken | lighten |
color-dodge
🚀 Modern CSS (PhD Level)
container-type
Enables Container Queries (query by container size, not viewport)
Values: normal | size | inline-size | block-size
:has()
Parent selector - selects element if it contains specific children
Example: .card:has(img) { }
clamp()
Sets a value between a minimum and maximum bound
Syntax: clamp(min, preferred, max) - e.g., clamp(1rem, 5vw, 3rem)
calc() / min() / max()
Performs calculations for property values
Example: width: calc(100% - 20px); height: min(50vh, 500px)
aspect-ratio
Sets the preferred width-to-height ratio
Values: auto | <ratio> (e.g., 16/9, 1/1)
accent-color
Sets the accent color for form controls
Values: auto | <color>
🔮 2025 Experimental Features
@scope
Limits CSS rules to specific DOM subtrees (scoped styles)
Syntax: @scope (.card) { h2 { color: red; } }
@starting-style
Animate elements appearing from display:none or entering the DOM
Example: @starting-style { .popup { opacity: 0; } }
anchor-name / position-anchor
Position elements relative to other elements (Anchor Positioning API)
Example: anchor-name: --my-anchor; position-anchor: --my-anchor
color-mix()
Mix two colors together in a specified color space
Syntax: color-mix(in oklch, red 50%, blue)
@property
Define custom CSS properties with type validation and inheritance
control
Example: @property --my-color { syntax: ''; inherits: false;
}
text-wrap: balance
Automatically balances text across lines for better typography
Values: wrap | nowrap | balance | pretty | stable
light-dark()
Native theme switching - returns different values for light/dark mode
Syntax: color: light-dark(black, white);
scroll-snap-type / scroll-snap-align
Creates scroll-snapping behavior for carousels and scrollable
containers
Example: scroll-snap-type: x mandatory; scroll-snap-align: center
overscroll-behavior
Controls scroll chaining when reaching scroll boundaries
Values: auto | contain | none
field-sizing
Makes form inputs auto-grow to fit content
Values: fixed | content