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

## Apprentice

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

## Journeyman

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

## Freelancer

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

## Master

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

[More subjects in Web Basics](https://www.ask-codey.com/glossary/groups/web-basics)

Source: https://www.ask-codey.com/glossary/subjects/css