References

Beginner-friendly references for web development, with live, editable examples.

CSS Reference

A complete, modern CSS reference. Every property links to its own page with the values it accepts, the syntax, real-world tips and a live example you can edit right in the browser. No fluff, no outdated advice — just what actually works in today's browsers.

CSS controls how a page looks: colors, spacing, fonts, layout and motion. It pairs with the structure you write in HTML and the behavior you add with JavaScript. If you're learning, start with the everyday properties — color, display, margin and padding — and build from there.

Properties 54

Name Description
accent-color Tints built-in form controls — checkboxes, radio buttons, range sliders and progress bars — to match your brand color.
align-items Aligns items along the cross axis of a flex or grid container — most often used to center them vertically.
align-self Overrides the container's align-items value for a single flex or grid item, setting its own cross-axis alignment.
animation Runs a @keyframes animation on an element — a shorthand for its name, duration, easing, delay, repeat count and more.
aspect-ratio Sets a preferred width-to-height ratio for an element, so its height follows its width automatically.
background Shorthand for an element's background layers — color, image, gradient, position, size and repeat — in one declaration.
background-color Fills the background of an element with a solid color, painted behind the content and padding but inside the border.
border Draws a line around an element. A shorthand for the border width, style and color on all four sides.
border-radius Rounds the corners of an element's box. A shorthand for the four corner radii; 50% makes a circle or ellipse.
box-shadow Adds one or more shadows around an element's box, set by horizontal and vertical offset, blur, spread and color.
box-sizing Controls whether an element's width and height include its padding and border, or just the content.
color Sets the color of an element's text. It is inherited, so it flows down to child elements unless they override it.
cursor Sets the mouse cursor shown when the pointer is over an element — pointer, text, not-allowed, grab and more.
display Controls how an element generates its box and how its children are laid out — block, inline, flex, grid and more.
filter Applies graphical effects like blur, brightness, contrast and grayscale to an element and its contents.
flex Shorthand on a flex item for how it grows, shrinks and what size it starts from. Sets flex-grow, flex-shrink and flex-basis.
flex-direction Sets the main axis of a flex container — whether its items flow in a row or a column, and in which order.
flex-wrap Controls whether flex items are forced onto one line or allowed to wrap onto multiple lines when space runs out.
float Pushes an element to the left or right of its container so that text and inline content flow around it.
font-family Sets the typeface for an element's text, given as a prioritized list of fonts with a generic family as a fallback.
font-size Sets the size of an element's text. Inherited, and best expressed in rem so it respects the user's browser settings.
font-weight Sets how bold or light text appears, using keywords like bold or numeric weights from 100 to 900.
gap Sets the space between rows and columns in a flex, grid or multi-column container. A shorthand for row-gap and column-gap.
grid-template-columns Defines the columns of a CSS grid — how many there are and how wide each one is, using lengths, fr units, repeat() and minmax().
height Sets the height of an element's content area. Usually best left to auto so the element grows to fit its content.
justify-content Aligns items along the main axis of a flex or grid container and decides how any spare space is shared out.
letter-spacing Adjusts the horizontal space between characters (tracking). Accepts positive values to open text up or negative to tighten it.
line-height Sets the height of each line of text, controlling the vertical spacing between lines. Best given as a unitless number.
list-style Shorthand for a list item's marker — its type (bullet or number), position, and an optional image. Set to none to remove markers.
margin Sets the space outside an element, pushing its neighbors away. A shorthand for margin-top, margin-right, margin-bottom and margin-left.
max-width Sets the maximum width an element can grow to. The backbone of responsive containers and readable line lengths.
min-height Sets the minimum height of an element. It can grow taller than this, but never shorter — ideal for full-height sections.
object-fit Controls how a replaced element such as an image or video is resized to fill its box, without distorting its aspect ratio.
opacity Sets how opaque an element is, from 1 (solid) to 0 (invisible). Affects the whole element, including its children.
order Changes the visual order of a flex or grid item without changing the HTML source order.
outline Draws a line outside an element's border that does not take up space. Most important as the keyboard focus indicator.
overflow Controls what happens when content is too big for its box — whether it is clipped, scrolls, or spills out visibly.
overflow-wrap Lets long unbreakable strings, such as URLs, break onto the next line to avoid overflowing their container.
padding Sets the space inside an element, between its content and its border. A shorthand for the four padding sides.
pointer-events Controls whether an element responds to mouse and touch events, or lets them pass through to whatever is behind it.
position Sets how an element is positioned in the document — in normal flow, or offset from a reference using top, right, bottom and left.
scroll-behavior Sets whether navigating to an anchor or scrolling programmatically jumps instantly or animates smoothly.
text-align Sets the horizontal alignment of inline content, such as text, within its containing block.
text-decoration Adds or removes lines on text — underline, line-through, overline — and sets their color, style and thickness.
text-shadow Adds one or more shadows behind text, set by horizontal and vertical offset, blur and color.
text-transform Changes the capitalization of text — uppercase, lowercase or capitalize — without altering the underlying content.
transform Visually moves, rotates, scales or skews an element without disturbing the surrounding layout. GPU-accelerated.
transition Animates the change of a property over time when its value changes. A shorthand for property, duration, timing function and delay.
user-select Controls whether the user can select an element's text with the mouse or keyboard.
vertical-align Aligns inline, inline-block and table-cell elements vertically within a line or cell. It does not work on block or flex children.
visibility Shows or hides an element while keeping its space in the layout. Differs from display: none, which removes the box entirely.
white-space Controls how whitespace and line breaks inside an element are handled — whether spaces collapse and whether text wraps.
width Sets the width of an element's content area. Works with min-width and max-width, and with box-sizing to decide what the value includes.
z-index Controls the stacking order of positioned (and flex/grid) elements that overlap — higher values sit in front.

Selectors 20

Name Description
+ The adjacent sibling combinator selects the element immediately following another, sharing the same parent.
::after Inserts generated content as the last child of an element, via the content property. A pseudo-element.
[attribute] Selects elements by the presence or value of an attribute — [type="email"], [href^="https"] and more.
::before Inserts generated content as the first child of an element, via the content property. A pseudo-element.
:checked Styles a checkbox, radio button or option when it is checked. The basis of many CSS-only toggles.
> The child combinator selects elements that are direct children of another, not deeper descendants.
.class Selects every element carrying a given class attribute. The everyday workhorse of CSS, written with a leading dot.
:disabled Styles form controls that are disabled, so they clearly read as unavailable.
:first-child Selects an element that is the first child of its parent. Handy for trimming the leading margin of a group.
:focus Styles the element that currently has keyboard focus. Essential for accessible, keyboard-friendly interfaces.
~ The general sibling combinator selects every matching sibling that follows an element, not just the next one.
:has() Selects an element that contains something matching the selector inside it — the long-awaited "parent selector".
:hover Styles an element while the user's pointer is over it. The basis of hover effects on links, buttons and cards.
#id Selects the single element with a given id attribute, written with a leading hash. High specificity; use sparingly.
:last-child Selects an element that is the last child of its parent. Often used to drop the trailing border of a list.
:not() Selects elements that do NOT match the selector inside it — a negation that trims exceptions out of a rule.
:nth-child() Selects elements by their position among siblings — odd, even, or an an+b formula like 3n.
::placeholder Styles the placeholder text shown inside an empty input or textarea.
:root Selects the document root element (the <html> element), the standard place to declare global custom properties.
* The universal selector matches every element. Most often seen in the box-sizing reset at the top of a stylesheet.

Functions 12

Name Description
calc() Performs a calculation to produce a CSS value, and uniquely lets you mix units like percentages and pixels.
clamp() Clamps a value between a minimum and maximum while scaling fluidly in between. The one-line tool for fluid typography.
hsl() Defines a color from hue, saturation and lightness, with optional alpha — often the most intuitive color model.
linear-gradient() Creates an image that transitions between two or more colors along a straight line, used as a background.
max() Returns the largest of a list of values, which has the effect of enforcing a minimum size.
min() Returns the smallest of a list of values, which has the effect of capping a size to a maximum.
minmax() Defines a grid track size with a minimum and a maximum bound, the key to responsive grid columns.
repeat() Repeats a grid track pattern a set number of times, or as many as will fit with auto-fit / auto-fill.
rgb() Defines a color from red, green and blue channels, with optional alpha for transparency.
translate() A transform function that moves an element along the X and Y axes without affecting the surrounding layout.
url() References an external resource by its address — most often a background image, font file or SVG.
var() Reads the value of a CSS custom property (variable), with an optional fallback.

At-rules 10

Name Description
@charset Declares the character encoding of the stylesheet. Must be the very first thing in the file.
@container Applies styles based on the size of a containing element rather than the viewport — container queries for modular components.
@font-face Loads a custom font from a file so you can use it in font-family, defining the font name, source and descriptors.
@import Loads an external stylesheet into the current one. Simple, but it can hurt performance by blocking parallel downloads.
@keyframes Defines the steps of a CSS animation — the from/to or percentage waypoints that the animation property plays.
@layer Declares cascade layers so styles win by layer order rather than by specificity, taming specificity conflicts.
@media Applies styles only when a condition is met, most often a viewport width. The foundation of responsive design.
@page Styles the page boxes when printing — margins, size and breaks for paged media.
@property Registers a custom property with a type, initial value and inheritance — which crucially lets you animate it.
@supports Applies styles only if the browser supports a given CSS feature — a feature query for progressive enhancement.