CSSRef
Fast CSS Reference for Developers
Clear syntax, examples, and practical notes on CSS properties, pseudo-classes, at-rules, and functions.
25
Properties
display, position, flex, grid, and more.
Browse properties →
25
Pseudo-classes
:hover, :nth-child, :not, :focus, and more.
Browse pseudo-classes →
24
At-rules
@media, @keyframes, @import, and more.
Browse at-rules →
25
Functions
calc(), var(), clamp(), min(), max(), and more.
Browse functions →
Most looked up
Why CSSRef
Dev-first explanations
No academic jargon. Every entry is written to answer real questions developers run into.
Practical examples
Syntax, real CSS examples, common mistakes, and the context you need to actually use it.
Fast and searchable
Find what you need instantly across properties, pseudo-classes, at-rules, and functions. No ads, no popups, no fluff.
Frequently asked questions
What is the difference between display: none and visibility: hidden?
display: none removes the element from the document flow entirely — no space is reserved. visibility: hidden hides the element but keeps its space in the layout.
See display →Why is my z-index not working?
z-index only works on positioned elements (position other than static). It can also fail when the element is inside a stacking context created by opacity, transform, or filter on a parent.
See z-index →How do I center a div with flexbox?
Set display: flex on the parent, then use justify-content: center to center horizontally and align-items: center to center vertically.
See justify-content →What is the difference between margin and padding?
Padding is the space between the content and the element's border. Margin is the space outside the border, between the element and its neighbors.
See gap →When should I use grid vs flexbox?
Use flexbox for one-dimensional layouts (a row or a column). Use grid for two-dimensional layouts where you need to control both rows and columns at the same time.
See grid-template-columns →Why is my CSS transition not working?
Transitions require a start and end state. Make sure the property you're transitioning is explicitly set on both states, and avoid transition: all in production for performance reasons.
See transition →What is the difference between :hover and :focus?
:hover applies when the user moves their pointer over an element. :focus applies when an element receives focus via keyboard or click — essential for accessibility.
See :focus →How does clamp() work in CSS?
clamp(min, preferred, max) locks a value between a minimum and maximum. It's the go-to for fluid typography and responsive spacing without media queries.
See clamp() →