CSS Reference

CSS Reference is a complete guide to 834+ CSS properties, selectors, functions, at-rules, and pseudo-elements. Each entry includes syntax, live examples, browser support, and code snippets. Free online CSS documentation.

Popular CSS Properties

:hover
:focus
:active
:visited
:link
:focus-within
:focus-visible
:target
:enabled
:disabled
:checked
:required
:optional
:read-only
:read-write
:placeholder-shown
:default
:indeterminate
:valid
:invalid
:in-range
:out-of-range
:empty
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:not
:has
:is
:where
:root
:scope
:lang
:dir
@media
@keyframes
@font-face
@import
@supports
@container
@layer
@scope
@starting-style
@property
@page
@counter-style
calc()
min()
max()
clamp()
var()
env()
url()
attr()
rgb() / rgba()
hsl() / hsla()
linear-gradient()
radial-gradient()
conic-gradient()
repeat()
minmax()
fit-content()
translate()
rotate()
scale()
skew()
blur()
drop-shadow()
brightness()
contrast()
grayscale()
sepia()
hue-rotate()
invert()
opacity()
saturate()
path()
polygon()
circle()
ellipse()
inset()
display
visibility
overflow
overflow-x
overflow-y
contain
isolation
resize
object-fit
object-position
aspect-ratio
width
height
min-width
max-width
min-height
max-height
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
box-sizing
box-shadow
border
border-radius
border-width
border-style
border-color
outline
color
text-align
text-decoration
text-transform
text-indent
text-shadow
text-overflow
white-space
word-break
word-spacing
letter-spacing
line-height
vertical-align
direction
background
background-color
background-image
background-size
background-position
background-repeat
background-attachment
opacity
flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex-basis
gap
display: grid
grid-template-columns
grid-template-rows
grid-template-areas
grid-column
grid-row
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
transition
transition-property
transition-duration
transition-timing-function
transition-delay
transform
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
position
top
right
bottom
left
z-index
float
clear
clip-path
pointer-events
font-family
font-size
font-weight
font-style
font-variant
font
font-display
list-style

Guides

CSS Introduction
What is CSS?
How CSS Works
CSS Syntax
Adding CSS to HTML
CSS Selectors Overview
Practical Example
CSS Selectors
Basic Selectors
Combinators
Attribute Selectors
Pseudo-classes
Specificity
CSS Box Model
What is the Box Model?
Content Area
Padding
Border
Margin
Box Sizing
CSS Flexbox
What is Flexbox?
Flex Container Properties
Flex Item Properties
Common Flexbox Patterns
CSS Grid
What is CSS Grid?
Defining Grid Tracks
Grid Gaps and Alignment
Alignment in Grid
CSS Positioning
The Position Property
Static and Relative Positioning
Absolute Positioning
Fixed and Sticky Positioning
Z-Index and Stacking Context
CSS Typography
Font Families
Font Size, Weight, and Style
Text Alignment and Decoration
Line Height and Spacing
Web Fonts with @font-face
CSS Colors
Named Colors and HEX
RGB and HSL
Modern CSS Color Functions
Color Opacity and Alpha
CSS Backgrounds
Background Color
Background Images
Background Position and Size
Gradient Backgrounds
Advanced Background Effects
CSS Borders
Border Basics
Border Styles
Border Radius
Outline vs Border
CSS Transitions
What are CSS Transitions?
Transition Properties
Duration, Timing, and Delay
Multiple Transitions and Triggers
CSS Animations
Keyframes: The Foundation
Animation Properties
Animation Timing and Easing
Multiple Animations and Best Practices
CSS Transforms
What are CSS Transforms?
2D Transform Functions
Transform Origin and 3D Transforms
Transform Performance and Patterns
CSS Variables (Custom Properties)
What are CSS Variables?

Blog

CSS Grid: From Zero to Production-Ready Layouts
CSS Specificity: Rules, Recursion, and Real-World Patterns
Building Theme Systems with CSS Custom Properties
Container Queries: Finally, Component-Responsive Design
Responsive Typography: From Pixels to Fluid Scales
Debugging CSS: A Systematic Approach I Rely On
CSS vs Sass in 2026: Do You Still Need a Preprocessor?
CSS Cascade Layers (@layer) Explained Simply
CSS Animation Performance: Lessons Learned the Hard Way
Advanced CSS Selectors I Use to Write Less JavaScript
CSS Filters and Blend Modes: Practical Recipes
Modern CSS Color Spaces: A Practical Guide to oklch and lab
CSS Subgrid: A Practical Guide to Aligned Layouts
CSS Grid Layout Patterns I Reach For Every Week
The Flexbox Alignment Guide I Wish I Had Sooner
CSS Custom Properties Beyond Theming: Patterns I Use Daily
CSS Transitions and Animations: A Production Playbook
CSS Containment: Performance Without the Headaches
Container Queries in Practice: Building Truly Modular Components
Native CSS Nesting: Syntax, Gotchas, and When to Use It
Cascade Layers in Depth: Taming Third-Party CSS
CSS Logical Properties: Building Right-to-Left Layouts Without Duplication
color-mix, oklch, and Relative Colors: My 2026 Color Workflow
Scroll-Driven Animations: Progress Bars and Reveals Without JavaScript
Subgrid Deep Dive: Aligning Content Across Nested Grids
The View Transitions API: Smooth Page and State Changes in CSS
The:has() Selector: Twelve Patterns That Replaced My JavaScript
aspect-ratio: Controlling Proportions Without Padding Hacks
text-wrap: balance and pretty: Fixing Wrapped Headlines
content-visibility: Lazy Rendering for Long Pages