A reference of 154 CSS properties
What each property does, the values people actually use, and whether it is inherited — one line each.
Layout11
Properties that decide what kind of box an element is and what happens when it overflows.
displaySets what kind of box the element becomes — the starting point of any layout.visibilityShows or hides an element; hidden still leaves its space occupied.floatFloats an element to one side so text flows beside it; flex and grid handle this now.clearPushes the element below any preceding floats.overflowDecides whether overflowing content is clipped or scrolls.overflow-xControls overflow on the horizontal axis alone.overflow-yControls overflow on the vertical axis alone.box-sizingDecides whether width includes padding and border; border-box is the easier one to reason about.aspect-ratioLocks the width-to-height ratio; set one side and the other follows.container-typeLets styles respond to the size of a parent box instead of the viewport.isolationCreates a new stacking layer so blending does not leak outside.
Flexbox and grid24
Properties that line elements up and seat them in a grid — most layout today is one of these two.
flex-directionSets whether flex items run in a row or a column.flex-wrapDecides whether items wrap onto a new line when they run out of room.flexSets how leftover space is shared in one go; flex: 1 splits it evenly.flex-growHow much of the leftover space this item takes.flex-shrinkHow much the item shrinks when space runs short; 0 keeps it fixed.flex-basisThe starting size before growing or shrinking.justify-contentDistributes items along the main axis.align-itemsAligns items along the cross axis; center is the usual vertical centring.align-selfOverrides the alignment for a single item.align-contentSpaces the lines themselves when items wrap onto several rows.gapThe space between items — unlike margins, none is added on the outside.row-gapSets only the space between rows.column-gapSets only the space between columns.orderChanges the visual order without touching the HTML order.grid-template-columnsDefines how many columns the grid has and how wide each is.grid-template-rowsDefines how many rows the grid has and how tall each is.grid-template-areasNames grid areas so the layout can be written out like a picture.grid-columnSets how many columns an item spans.grid-rowSets how many rows an item spans.grid-auto-flowDecides which way unplaced items fill the grid.grid-auto-rowsSets the height of rows the grid creates automatically.place-itemsSets both axes of alignment at once; a single center centres everything.place-contentPositions the whole block of content on both axes.justify-itemsPlaces items horizontally inside their own cells.
Box and spacing16
Size and spacing. Outer margins collapse into each other; inner padding is painted by the background.
widthThe horizontal size; 100% follows the parent, 100vw follows the viewport.heightThe vertical size; auto takes only as much as the content needs.min-widthStops the box getting narrower than this; inside flex, 0 lets it shrink.max-widthCaps the width; the usual way to keep a line of text readable.min-heightStops the box getting shorter than this.max-heightCaps the height; anything past it is handled by overflow.marginThe space outside the box; top and bottom margins collapse into one.margin-topThe outer space above the box.margin-rightThe outer space on the right; auto pushes the box left.margin-bottomThe outer space below the box.margin-leftThe outer space on the left; auto on both sides centres the box.paddingThe space inside the box; the background colour extends into it.padding-topThe inner space above the content.padding-rightThe inner space to the right of the content.padding-bottomThe inner space below the content; a percentage here can create height.padding-leftThe inner space to the left of the content.
Text25
Typeface, line spacing, alignment — how the text reads. Most of these are inherited.
font-sizeThe text size; rem multiplies the root size, so it follows the reader’s zoom setting.font-familySets the typeface; the browser falls through the list, so end with a generic family.font-weightThe stroke weight; 400 is regular and 700 is bold.font-styleTurns italics on or off.fontSets several font values at once; anything omitted resets to its default.line-heightThe line spacing; a unitless value such as 1.5 inherits more safely.letter-spacingThe space between letters; tightening it slightly suits large headings.word-spacingThe space between words.text-alignAligns text horizontally.text-decorationAdds underlines or strike-throughs; also how you remove a link’s default underline.text-decoration-lineChooses which decoration line is drawn.text-decoration-colorColours that decoration line on its own.text-decoration-styleSets the line style; wavy gives the squiggle used by spellcheckers.text-transformForces the letter case for display only; the underlying text is untouched.text-indentIndents the first line of a block.text-overflowTrims overflowing text with an ellipsis; needs overflow and nowrap alongside it.text-shadowCasts a shadow behind text — useful for white type on a busy photo.white-spaceControls how spaces and line breaks are handled; nowrap keeps everything on one line.word-breakDecides where long words may break; keep-all stops Korean words splitting mid-word.overflow-wrapForces very long unbreakable strings to wrap — handy for long URLs.writing-modeChanges the direction text flows — this is how vertical writing is done.vertical-alignAligns an inline box vertically within its line; also works in table cells.font-variant-numericPicks a numeral style; tabular-nums keeps digits the same width so tables stop jittering.hyphensAllows words to break with a hyphen at line ends; needs the language to be declared.text-wrapChooses how lines break; balance evens out the line lengths of a heading.
Colour and background13
Text colour, background colour, gradients and transparency.
colorThe text colour; currentColor elsewhere refers back to this value.background-colorThe background colour; it fills the padding area too.background-imageLays an image or gradient behind the content; several can be stacked.background-sizeSizes the background image; cover fills without gaps, contain shows all of it.background-positionPositions the background image inside the box.background-repeatDecides whether the background image tiles.background-attachmentDecides whether the background scrolls with the page or stays put.backgroundSets all the background values at once; anything omitted resets to its default.background-clipLimits how far the background paints; text clips it to the letterforms.opacityThe overall transparency; children fade along with the element.mix-blend-modeSets how the element’s colours blend with what is beneath.accent-colorColours browser-drawn controls such as checkboxes and radio buttons.color-schemeDeclares which of light and dark the page supports.
Borders13
Borders, corners and shadows. An outline takes up no space of its own.
borderSets border width, style and colour in one line.border-widthSets only the border thickness.border-styleSets only the border style; without it the border does not show at all.border-colorSets only the border colour.border-topSets the top border only.border-bottomSets the bottom border only — the usual divider between list rows.border-radiusRounds the corners; 50% makes a circle and a huge value makes a pill.outlineA line drawn outside the border; it takes no space, which is why focus rings use it.outline-widthSets only the outline thickness.outline-styleSets only the outline style.outline-colorSets only the outline colour.outline-offsetPushes the outline away from the element.box-shadowCasts a shadow around the box; inset moves it inside.
Effects7
Effects applied after everything is painted — blurring, clipping, filling.
filterApplies blur, greyscale, brightness and the like; several can be chained.backdrop-filterFilters whatever sits behind the element — this is what makes frosted glass.clip-pathCuts the element down to a given shape.mask-imageHides parts of an element by the brightness of an image — good for fading edges out.object-fitDecides how an image or video fills its box; cover crops to fill.object-positionChooses which part survives the crop — the way to keep faces in a photo.image-renderingChooses smooth or crisp scaling; pixelated keeps pixel art sharp.
Transform and motion14
Moving, rotating and easing. These leave the layout untouched, so nothing else jumps.
transformMoves, rotates and scales; the layout box stays put, so nothing else shifts.transform-originThe anchor point for rotation and scaling.transitionEases a value from old to new; one line names what changes, for how long and how.transition-propertyNames which properties animate; all is convenient but can cost performance.transition-delayHow long to wait before the transition starts.transition-durationHow long the change takes; around 0.2 s feels natural.transition-timing-functionShapes the pacing; ease starts and ends gently.animationPlays a set of keyframes; name, duration and repetition go in one line.animation-nameThe name of the keyframes to play.animation-timing-functionThe pacing of the motion; steps makes it advance in jumps.animation-durationHow long one cycle takes.animation-iteration-countHow many times it repeats; infinite never stops.will-changeWarns the browser what will change so it can prepare; overusing it backfires.perspectiveSets the depth of 3D transforms; smaller values exaggerate the effect.
Positioning7
Lifting an element out of the flow and placing it; z-index decides what sits in front.
positionChooses the positioning scheme; sticky pins an element once you scroll past it.topHow far from the top edge the element sits.rightHow far from the right edge the element sits.bottomHow far from the bottom edge the element sits.leftHow far from the left edge the element sits.insetSets all four offsets at once; 0 stretches the element over its parent.z-indexDecides what stacks on top; the comparison only happens within one stacking context.
Tables4
Properties for table borders and column widths.
border-collapseMerges adjacent cell borders into one; collapse avoids doubled lines.border-spacingThe gap between cells; only meaningful when borders are not collapsed.table-layoutChooses content-driven or fixed column widths; fixed renders much faster.caption-sidePuts the table caption above or below.
Lists4
The shape and placement of list markers.
Interaction9
How the element answers the mouse, the finger and the scroll.
cursorSets the mouse pointer shape; pointer signals that something is clickable.pointer-eventsDecides whether the element receives pointer input; none lets clicks pass through.user-selectDecides whether text can be selected by dragging.touch-actionControls which touch gestures the browser handles; manipulation drops double-tap zoom.scroll-behaviorMakes scrolling jump or glide.scroll-snap-typeSnaps scrolling to set positions — common in horizontal carousels.overscroll-behaviorDecides whether scrolling past the end moves the parent; contain stops it inside.resizeLets the user resize the box — most often used on a textarea.caret-colorColours the blinking text cursor in an input.
Print and misc7
The rest — printing, generated content and automatic numbering.
page-break-afterForces or avoids a page break after the element when printing.break-insideStops an element from being split across pages or columns.contentThe content generated by ::before or ::after; often just an empty pair of quotes.counter-resetStarts or resets a counter used for numbering.counter-incrementSteps a counter forward; paired with content it numbers headings automatically.quotesChooses the quotation marks the q element uses, per language.allResets every property on the element at once — a blunt way to clear inherited styles.
How to read this
- An inherited property only needs writing once on the parent — every child picks it up. Most text properties work this way.
- A shorthand resets whatever you leave out. Writing background: red alone also wipes a background image you set earlier.
- When rules collide, the more specific selector wins; only when specificity ties does source order decide.
- Animate transform and opacity for smoothness. Changing width or top forces the layout to be recalculated.
Frequently asked questions
Q. How many CSS properties are there?
The standard lists well over 500, but only a fraction come up in daily work. This reference covers the 154 you end up writing again and again, grouped by purpose.
Q. What does inherited mean?
It means the value passes down: set it on the parent and children use it without repeating it. Most text-related properties inherit; spacing and borders do not.
Q. What changes when I use a shorthand?
You set several values in one line, but anything you leave out resets to its default. That is why background: red on its own also wipes a background image you had set.
Q. If the same property is set twice, which wins?
Specificity is checked first: an id beats a class, a class beats a tag. Only when specificity ties does the later rule win. !important overrides all of that, which is why it is best avoided.
Q. Should I use px or rem?
A rem is a multiple of the root font size, so it grows when the reader enlarges text in the browser. Use rem for type and spacing; px is fine where a value must never change, such as a hairline border.