CSS glossary

284 CSS terms, from Novice to Master. Start with the basics or jump to a level.

Updated October 16, 2026

Novice

Adjacent sibling combinator: The + between selectors: matches the element right after another.
Background color: Fills an element's background with a color.
Block: An element that starts on a new line and takes the full width.
Border: Draws a line around an element: width, style, color.
Box model: Every element is a box: content, padding, border, margin.
Browser default styles: Styles the browser adds before yours, like blue links and heading sizes.
Cascade: How CSS decides which rule wins when rules disagree.
Child combinator: The > between selectors: matches direct children only.
Class selector: Starts with a dot and selects elements with that class.
Color: The color property sets text color; colors can be names, hex or rgb().
Comment: A note between /* and */ that is ignored by CSS.
Content box: The innermost part of an element, where the content goes.
CSS: The language that controls how a web page looks: colors, fonts, spacing, layout.
CSS Rule: A CSS Rule defines the style that you want to apply to an element once you have targeted…
Declaration: One styling instruction: property: value;
Declaration block: Everything between a rule's curly braces.
Descendant combinator: A space between selectors: matches elements anywhere inside another.
em unit: A size equal to the element's font size.
External stylesheet: A separate .css file that pages load with a <link> tag.
Font family: Picks the typeface, with fallbacks.
Font size: Sets how big the text is.
Font weight: Sets how thick the text is, like bold or 700.
General sibling combinator: The ~ between selectors: matches every later sibling.
Height: Sets how tall an element is.
Hex color: A color written as # plus six digits for red, green and blue.
ID selector: Starts with # and selects the one element with that id.
Inheritance: Some properties, like color and font, pass down from parent to children.
Inline: An element that sits within a line of text, only as wide as its content.
Inline style: CSS written on one element with the style attribute.
Internal stylesheet: CSS inside a <style> tag that styles only that page.
Kebab Case: All letters are lower case. Each word is separated by an dash.
Link element: This loads an external stylesheet.
Margin: Space outside an element's border that pushes neighbors away.
Named color: A color CSS knows by name, like teal or tomato.
Padding: Space inside an element, between its content and border.
Percentage: A size worked out from the parent, so it grows and shrinks with it.
Pixel: px: a fixed unit of size on screen.
Property: The thing you want to change, like color or width.
rem unit: A size equal to the root (html) font size, usually 16px.
RGB color: A color mixed from red, green and blue, 0-255 each.
Selector: A CSS Selector allows you to identify (target) one or more elements in the DOM to apply…
Selector list: Several selectors separated by commas, sharing one set of styles.
Snake Case: All letters are lower case, each word is separated by an underscore.
Source order: When two rules are equally strong, the later one wins.
Specificity: How precise a selector is; the more specific rule wins.
Stylesheet: A file or block of CSS rules that styles one or many pages.
Text alignment: Lines text up left, right or center.
Type selector: Selects every element with a given tag name, like p or img.
Universal selector: The * selector: matches every element.
Value: What you set a property to, like red or 16px.
Width: Sets how wide an element is.

Apprentice

::after: Adds generated content at the end of an element.
::before: Adds generated content at the start of an element.
::marker: Styles the bullet or number of a list item.
::placeholder: Styles the hint text in an empty input.
:active: Styles an element while it is being pressed.
:checked: Styles checkboxes and radio buttons that are selected.
:disabled: Styles form controls that are switched off.
:first-child: Selects an element that is the first child of its parent.
:focus: Styles the element that has keyboard focus.
:hover: Styles an element while the mouse is over it.
:last-child: Selects an element that is the last child of its parent.
:nth-child(): Selects children by position, like odd rows or every third item.
:visited: Styles links the user has already opened.
Absolute positioning: Places an element relative to the nearest positioned ancestor.
Attribute selector: Selects elements by an attribute, written in [brackets].
Auto margin: Takes up leftover space; margin: 0 auto centers a block.
Background image: Puts an image or gradient behind an element's content.
Background position: Sets where a background image sits.
Background repeat: Decides whether a background image tiles.
Background size: Sets how big a background image is, like cover.
Border box: Width and height include padding and border.
Border radius: Rounds an element's corners.
Box shadow: Draws a shadow around an element.
Box sizing: Decides whether width includes padding and border.
Clear: Moves an element below any floats instead of wrapping around them.
display: none: Hides an element completely; it takes no space.
Fixed positioning: Pins an element to the window so it stays put while scrolling.
Float: Pushes an element left or right with text wrapping around it.
Inset: Sets top, right, bottom and left at once.
Letter spacing: Adds or removes space between letters.
Line height: Sets the space between lines of text.
Linear gradient: A background that fades between colors along a line.
List style: Sets or removes list bullets and numbers.
Margin collapsing: Vertical margins between blocks merge into the larger one.
Maximum size: max-width and max-height stop an element growing past a size.
Minimum size: min-width and min-height stop an element getting smaller than a size.
object-fit: Decides how an image fills its box, like cover or contain.
Opacity: Makes an element see-through, from 0 to 1.
Outline: A line around an element that takes up no space, used for focus rings.
Overflow: Decides what happens when content doesn't fit: show, hide or scroll.
Positioning scheme: The position property: how an element is placed.
Pseudo-class: Styles an element in a state, like :hover, with one colon.
Pseudo-element: Styles part of an element, or adds decoration, with two colons.
Radial gradient: A background that fades outward from a center point.
Relative positioning: Nudges an element from its normal spot; anchors absolute children.
Static positioning: The default: the element sits in the normal flow.
Sticky positioning: Scrolls normally, then sticks once it reaches a set point.
Text decoration: Adds or removes lines on text, like underlines.
Text transform: Changes how text is capitalized when shown.
Viewport: The visible area of the page; vw and vh measure it.
Visibility: Makes an element invisible but keeps its space.
White space: Controls how spaces and line breaks are shown, and wrapping.
Z-index: Decides which overlapping elements sit in front.

Journeyman

Align content: Spaces out the rows of wrapped items.
Align items: Lines items up along the cross axis, like centered.
Align self: Lets one item align differently from the others.
Animation fill mode: Decides what an element looks like before and after an animation.
Animation iteration count: Sets how many times an animation plays.
Animation name: Picks which @keyframes animation to play.
Auto-fill: Fits as many grid columns as there is room for, keeping empty ones.
Auto-fit: Fits as many columns as fit, stretching items to fill the row.
Breakpoint: A screen width where the layout changes.
Cross axis: The direction across the main axis; align-items works along it.
CSS Grid: A layout system for rows and columns together.
Explicit grid: The rows and columns you define yourself.
Flex basis: A flex item's starting size before growing or shrinking.
Flex container: An element with display: flex; its children follow Flexbox.
Flex direction: Sets whether flex items run in a row or a column.
Flex flow: Sets flex-direction and flex-wrap together.
Flex grow: How much leftover space a flex item takes.
Flex item: A direct child of a flex container.
Flex shorthand: Sets grow, shrink and basis at once, like flex: 1.
Flex shrink: How much a flex item shrinks when space is short.
Flex wrap: Lets flex items wrap onto new lines instead of squashing.
Flexbox: A layout system for lining items up in a row or column.
Fraction unit: fr: a share of the leftover space in a grid.
Gap: Sets the space between flex or grid items.
Grid area: A rectangle of grid cells, often named.
Grid auto flow: Decides how unplaced items fill the grid.
Grid cell: One square where a row and column cross.
Grid container: An element with display: grid.
Grid item: A direct child of a grid container.
Grid line: A numbered dividing line between grid tracks.
Grid placement: Putting an item in chosen rows and columns.
Grid span: Makes an item stretch across a number of tracks.
Grid template areas: Draws a grid layout with named areas, row by row.
Grid template columns: Sets a grid's columns and their widths.
Grid template rows: Sets a grid's rows and their heights.
Grid track: One full row or column of a grid.
Implicit grid: Extra tracks the browser adds for items that don't fit.
Justify content: Spreads items along the main axis: start, center, space-between.
Keyframe animation: An animation described in steps with @keyframes.
Main axis: The direction flex items flow in; justify-content works along it.
Media feature: The condition inside a media query, like min-width.
Media query: Applies CSS only when a condition is true, like a minimum screen width.
minmax(): Gives a grid track a minimum and maximum size.
Mobile-first design: Phone layout first, then media queries for bigger screens.
Order: Changes the visual order of items without changing the HTML.
Orientation query: Checks whether the screen is portrait or landscape.
Place content: Sets align-content and justify-content together.
Place items: Sets align-items and justify-items together.
Place self: Sets align-self and justify-self together for one item.
prefers-color-scheme: Checks whether the user prefers a light or dark theme.
prefers-reduced-motion: Checks whether the user asked for less animation.
repeat(): Repeats a track size, like repeat(4, 1fr).
Resolution query: Checks how sharp the screen is, for high-density images.
Responsive design: One page that adapts its layout to any screen size.
Rotate: Turns an element around a point.
Scale: Makes an element look bigger or smaller.
style attribute: A global attribute containing CSS declarations applied directly to one element.
Stylesheet link: A link element that loads an external CSS stylesheet.
Timing function: The speed curve of a transition, like ease-in-out.
Transform: Moves, rotates or scales an element without affecting layout.
Transform origin: Sets the point an element rotates or scales around.
Transition: Makes a property change smoothly instead of jumping.
Transition duration: Sets how long a transition takes.
Transition property: Says which properties animate when they change.
Translate: Slides an element from where it sits.

Freelancer

!important: Makes a declaration beat normal ones regardless of specificity.
:has(): Styles an element based on what it contains.
:is(): Matches any selector in its list.
:not(): Matches elements that don't match the selector inside.
:where(): Like :is() but with zero specificity, so easy to override.
@container: Writes a container query.
@font-face: Names a font and says where to download it.
@layer: Declares cascade layers or puts rules into one.
@scope: Limits rules to part of the page, with an optional inner boundary.
all property: Resets every property of an element at once.
Aspect ratio: Keeps width and height in proportion, like 16/9.
Block axis: The direction paragraphs stack.
calc(): Does math in CSS, even mixing units.
Cascade layer: A named group of styles ranked in the cascade, regardless of specificity.
Cascade origin: Where a style comes from: browser, user or site.
clamp(): Keeps a value between a minimum and maximum, flexible in between.
Column count: Sets how many columns text flows into.
Column span: Makes an element stretch across all the columns.
Column width: Sets an ideal column width; the browser fits as many as it can.
Container name: Names a query container so queries can target it.
Container query: Styles an element based on its container's size, not the screen's.
Container query units: Units like cqw that measure the container, like vw measures the screen.
Container type: Turns an element into a query container.
CSS nesting: Writing child rules inside a parent rule.
Current color: Means "the current text color".
Custom font: A font file your site loads so everyone sees the same typeface.
Custom property: A named, reusable value like --brand-color, read with var().
Custom property fallback: The backup value in var(), used when the property isn't set.
exportparts: An attribute that exposes selected part names from a nested shadow tree through its host.
Fit content: Sizes to the content, but no larger than the space available.
Font fallback: The next font in the list, used if the first isn't available.
Functional pseudo-class: A pseudo-class that takes selectors in brackets, like :not().
inherit: Takes the value from the parent element.
initial: Resets a property to CSS's built-in default.
Inline axis: The direction text runs along a line.
Intrinsic sizing: Sizing an element by its content rather than a set width.
Logical border: Borders like border-inline-start that follow text direction.
Logical margin: Margins like margin-inline-start that follow text direction.
Logical padding: Padding like padding-inline that follows text direction.
Logical properties: Properties that use start/end instead of left/right.
Logical size: inline-size and block-size: width and height that follow text direction.
max(): Uses the largest of several values.
Maximum content size: The size content wants with no wrapping.
min(): Uses the smallest of several values.
Minimum content size: The smallest size without content spilling out.
Multi-column layout: Flows text into newspaper-style columns.
Nesting selector: & in nested CSS: stands for the parent selector.
part attribute: An attribute naming parts inside a shadow tree so external CSS can select them.
Query container: An element whose size its contents can query.
Relative color: Builds a new color from an existing one, like a lighter brand color.
revert: Rolls a property back to the browser's own style.
revert-layer: Rolls a property back to the previous cascade layer's value.
Scoped styles: Styles that only apply inside one part of the page.
Scoping proximity: When scoped rules clash, the closer scope wins.
Scroll margin: Leaves space around an element when scrolled to it.
Scroll padding: Space inside a scroll area that scrolled-to items stay clear of.
Scroll snapping: Makes scrolling settle neatly on each item.
Specificity calculation: Count ids, then classes, then tags; compare left to right.
Style query: Applies styles based on a container's custom property values.
Subgrid: Lets a nested grid reuse its parent's rows or columns.
unset: Inherits if the property normally inherits, otherwise resets.
var(): Reads the value of a custom property.
Variable font: One font file holding a whole range of weights and widths.
Writing mode: Sets which way text flows: across or down.

Master

@property: Registers a custom property with a type and default.
Actual value: The used value adjusted for the screen, like pixel rounding.
Additive animation: An animation that adds to existing values instead of replacing them.
Anonymous box: A box the browser creates itself, with no element behind it.
Baseline alignment: Lining things up on the line letters sit on.
Block formatting context: An area where blocks stack; a new one contains floats.
Compositing: Combining painted layers into the final picture.
Computed value: The value after easy math like em to px; what children inherit.
Computed-value time: The step when specified values become computed values.
Containing block: The box an element's percentages and positions are measured from.
contain-intrinsic-size: A placeholder size for skipped content, so scrolling doesn't jump.
content-visibility: Lets the browser skip rendering off-screen sections.
Critical CSS: The styles needed for the first screen, inlined so it shows fast.
CSS architecture: How a team organizes CSS so it stays easy to change.
CSS Object Model: The browser's in-memory model of the page's CSS, readable from JavaScript.
Custom property cycle: Custom properties that depend on each other in a loop.
Definite size: A size known without laying out the contents.
Discrete animation: An animation that jumps between values with no in-between.
Formatting context: An area with its own layout rules, like block, inline, flex or grid.
Fragmentainer: One page or column that split content flows into.
Fragmentation: Splitting content across pages or columns.
Indefinite size: A size that depends on the content, like auto height.
Independent formatting context: An area laid out on its own, isolated from its surroundings.
Initial containing block: The top-level box, the size of the viewport.
Inline formatting context: Where text and inline elements flow along lines and wrap.
Interpolation: Working out the in-between values of an animation.
Intrinsic contribution: How much space an item asks for when its container sizes to content.
Invalid at computed-value time: A var() result that doesn't make sense falls back to inherit/initial.
Layout: The step where the browser works out every box's size and position.
Layout containment: contain: layout: nothing inside affects layout outside.
Line box: The box holding one line of text; as tall as its tallest item.
Paint containment: contain: paint: nothing inside is drawn outside the box.
Painting order: The sequence the browser paints things: backgrounds, borders, text, outlines.
Principal box: The main box an element generates.
Reflow: The browser redoing layout after a size or position change.
Repaint: Redrawing pixels after a look changes, without a size change.
Scroll timeline: Ties animation progress to how far an area has scrolled.
Scroll-driven animation: An animation that moves with scrolling instead of time.
Selector matching: Browsers read selectors right to left: the last part first.
Shrink-to-fit sizing: As wide as the content needs, up to the space available.
Size containment: contain: size: the element's size ignores its contents.
Specificity strategy: A team rule to keep selectors simple so overrides stay predictable.
Specified value: The value the cascade picked, before any math.
Stacking context: A group whose layers stack together; z-index only compares within it.
Stacking order: The order layers are drawn: backgrounds, content, then positioned elements.
Style containment: contain: style: counters and quotes inside stay inside.
Style invalidation: Working out which elements need styles recalculated after a change.
Typed custom property: A custom property registered with a type, so it can be animated.
Used value: The final value after layout, like 50% turned into pixels.
View timeline: Ties an animation to an element moving through the screen.
will-change: Warns the browser a property is about to animate.

More subjects in Web Basics