CSS glossary

A CSS functional pseudo-class that selects an element when a condition about its descendants or internal structure is true.

A functional selector that groups multiple selector options into one rule while keeping the highest specificity among the arguments.

A functional selector that excludes one or more matching cases from a broader rule.

A functional selector that groups selector options but always contributes zero specificity.

A modern CSS positioning model that lets one element align itself to another named element without manual JavaScript coordinate calculations.

The CSS setting that defines which segment of a scroll or view timeline should drive an animation.

The proportional relationship between an element's width and height, often used to keep media blocks visually consistent.

A CSS function that reads an attribute value from the HTML and injects it into generated content.

A Grid repetition mode that collapses empty tracks and lets occupied ones stretch when extra space is available.

A build tool that adds the vendor prefixes still required by the browsers you support, based on your target configuration.

A CSS effect that processes the pixels behind an element, often used for frosted-glass panels and translucent overlays.

A property that controls how far the background is painted, for example inside the padding box or across the border box.

One of the stacked background declarations in CSS, where the first layer is painted on top and later layers sit underneath.

Block Element Modifier. Naming methodology for writing more predictable CSS classes.

A frontend framework that provides a responsive grid, utility classes and ready-made interface components for building web layouts quickly.

A CSS feature that paints an element border using an image, SVG or gradient sliced into corners and edges.

The `border-image` parameter that controls how the source graphic is cut before being mapped onto the element border.

A CSS property that adds one or more shadows to an element using offset, blur, spread and color values.

Screen width threshold where a responsive layout changes its rules.

The shared configuration used by frontend tools to define which browsers and versions a project targets.

A CSS math function used to combine compatible units in a single computed value.

A reusable UI block that groups media, text and actions into one self-contained preview or information unit.

The browser's conflict-resolution system for deciding which CSS rule wins when several affect the same element.

An ordered CSS layer declared with `@layer` that lets architecture determine priority before specificity is considered.

A CSS interaction technique that uses a hidden checkbox or radio input plus selectors such as `:checked` to toggle visible UI state without JavaScript.

A repeated Grid-based surface made of alternating cells, often used for technical or decorative backgrounds.

The intensity or purity of a color in models such as OKLCH, separate from its lightness and hue.

A CSS function that keeps a value fluid between a minimum and a maximum limit.

A selector that starts with a dot and targets all elements sharing a class name.

An input type detected by media queries that usually represents touch interaction and benefits from larger tap targets.

Use of color choices and relationships inside a visual system.

A coordinated set of colors selected to work together across the interface and often exported as reusable tokens.

A browser hint exposed by the `color-scheme` property that tells the user agent whether the interface is designed for light, dark or both themes.

A curated set of reusable interface components that helps teams build products with more consistency and less duplicated styling work.

A CSS function such as `if()` that chooses one value or another according to a logical condition.

A gradient that rotates around a center point, useful for rings, charts and expressive circular effects.

A CSS property that provides a placeholder size for content whose real rendering work is being deferred.

A CSS feature that lets a component adapt to the size of its own container instead of the global viewport.

The CSS property that turns an element into a queryable container for its descendants.

A CSS length unit such as `cqi` or `cqw` that is measured relative to the size of a query container.

A CSS optimization feature that lets the browser skip layout and paint work for off-screen content until it gets close to the viewport.

The axis perpendicular to the main axis in Flexbox, used by properties such as `align-items`.

Cascading Style Sheets. Language used to style and visually organize web pages.

A group of CSS mechanisms that limit how much layout, paint or size calculation work an element can affect outside its own boundaries.

A CSS technique that controls which parts of an element remain visible by applying a mask image or gradient.

A styling approach where class names are scoped locally to a component file so styles do not leak globally by default.

A native CSS feature that allows related selectors to be written inside a parent rule, reducing repetition and grouping component logic more clearly.

A baseline stylesheet that removes or reduces browser default styles so the project starts from a more controlled foundation.

A block made of a selector plus one or more declarations that define how matching elements should look.

The part of a CSS rule that decides which HTML elements the declarations apply to.

A geometric form built with CSS properties such as borders, gradients, border radius or transforms instead of using an image asset.

An intentionally selected collection of references, tools and practice sites organized so developers can find the right learning or debugging source faster.

A CSS variable declared with a `--name` syntax and consumed with `var(--name)`.

A theme variable such as background, surface or text color that changes between light and dark contexts.

A reusable named value that represents a design decision such as color, spacing, radius or typography.

Named design variables for things like color, typography, spacing and border radius.

An interface pattern where hidden content is revealed on demand through a trigger such as a button, summary or toggle control.

The normal order and spatial behavior the browser uses to lay out elements before special positioning or layout rules alter it.

A filter function that creates a shadow from the visible shape of an element instead of from its rectangular box.

The speed pattern of a transition or animation, expressed with keywords such as `ease` or with a custom `cubic-bezier()` curve.

A reusable shadow variable that represents one depth level in an interface, such as a base card state or a hover state.

A conditional CSS query built with `@supports` that checks whether the browser understands a feature before applying related styles.

A block inside a repeating layout pattern that is intentionally given more size or emphasis than its neighbors.

The initial size of a flex item before free space is distributed or items are shrunk.

A Flexbox property that decides whether items stay on one line or wrap onto multiple lines when space runs out.

CSS layout model designed to distribute space and align items inside one dimension efficiently.

A layout approach that adapts continuously to available space instead of relying on fixed widths and too many rigid breakpoints.

A type sizing approach that scales smoothly across screen sizes, often using `clamp()` instead of abrupt jumps between breakpoints.

A visual arrangement system for groups of images or media items, usually designed to balance consistency, scanning speed and rhythm.

A reusable CSS variable that stores a gradient declaration so the same visual treatment can be reused across components.

Layout system that organizes content into rows and columns.

A rectangular section of a Grid layout that can span multiple cells and be named for easier placement.

The perceived compactness of a Grid pattern based on track count, cell size and gap.

The space between two adjacent Grid lines, forming one row or one column in the layout.

A compact mobile navigation trigger typically represented by three horizontal lines.

An SVG embedded directly in the HTML markup so its internal shapes can be targeted with CSS and JavaScript.

A CSS shorthand that combines `top`, `right`, `bottom` and `left` into one property.

A CSS property that allows transitions and animations to interpolate intrinsic size keywords such as `auto`.

A size value such as `auto`, `min-content` or `max-content` that depends on layout and content rather than a fixed numeric length.

Inverted Triangle CSS. Method for structuring styles from generic, low-specificity layers to specific component rules.

Named animation steps defined with `@keyframes` that describe how properties change over time.

A shadow composed of multiple `box-shadow` layers with different blur, spread and opacity values to create more realistic depth.

A gradient that transitions colors along a straight line and is often used for buttons, backgrounds and directional overlays.

The primary direction in a Flexbox layout, determined by `flex-direction`, along which `justify-content` distributes items.

The property that defines the image or gradient used to mask the visibility of an element.

A CSS function that resolves to the largest value from the list you provide.

A CSS rule that applies styles only when a condition such as width, orientation or user preference is true.

A small animated response that gives feedback during a focused user action such as hover, click or focus.

Small typographic refinements such as line length, underline offset, decoration thickness or letter spacing that improve readability.

A CSS function that resolves to the smallest value from the list you pass in.

A reusable Sass block that groups multiple declarations and can optionally accept arguments before being included in components.

A responsive strategy where small-screen styles are written as the base layer and larger layouts are added progressively.

Design approach that starts with the smallest screens and progressively enhances larger layouts.

The button that opens and closes a collapsed navigation menu in responsive layouts.

The `&` symbol used in nested CSS to reference the current parent selector.

The default layout behavior in which elements take up space and influence the placement of other elements around them.

A popular stylesheet that preserves useful browser defaults while smoothing common inconsistencies across rendering engines.

A navigation pattern where the menu lives outside the visible screen and slides in when activated.

A modern CSS color space based on Lightness, Chroma and Hue, designed to behave more consistently with human perception.

Object-Oriented CSS. Methodology that encourages reusable styling patterns and separation of structure from skin.

A variable-font axis that adjusts letterforms for better readability at different rendered sizes.

A visual layer placed on top of media or content to reveal extra information, controls or emphasis.

A Sass file meant to be imported into other Sass files so styles can be split into smaller, organized modules.

The repeated visual cadence created by varying size, spacing or emphasis across a layout pattern.

A CSS property that controls how strong the illusion of depth looks in 3D transformed elements.

A Grid shorthand that combines `align-items` and `justify-items` to align content inside each grid area.

A browser API for showing and hiding lightweight overlays such as menus, panels or floating UI without building every behavior from scratch.

The CSS relationship created when an overlay points to a named anchor element with `position-anchor`.

The nearest ancestor with a non-static `position` value, used as the reference point for absolutely positioned descendants.

The reference box an absolutely positioned element uses to calculate where it should appear.

A CSS processing tool that transforms stylesheets during the build step through a plugin-based pipeline.

A PostCSS plugin bundle that lets you use modern CSS features and converts them into a more compatible output based on your target environment.

The `transform-style` value that allows child elements to keep their 3D position instead of being flattened.

A strategy that starts from a solid, broadly compatible base and adds richer features only when the environment supports them.

The act of defining a custom property with `@property` so the browser knows its type, inheritance behavior and initial value.

A virtual CSS-generated element such as `::before` or `::after` that lets you add decorative boxes without changing the HTML.

The modern media query syntax that expresses comparisons like `(width >= 768px)` or `(600px <= width <= 1024px)` more directly.

A user preference exposed through `prefers-reduced-data` that suggests lighter assets and fewer bandwidth-heavy enhancements.

A user preference exposed through `prefers-reduced-motion` that signals the interface should minimize animation and transitions.

A selector pattern that styles an element according to its relationship with descendants or nearby structure rather than only matching the element directly.

Design approach where the interface adapts cleanly to different screen sizes and devices.

A table styled to remain usable on smaller screens through patterns such as horizontal scrolling or stacked rows.

A CSS value that resets a property back to the value it would have had before the current layer applied its override.

CSS preprocessor that adds features such as variables, nesting and reusable logic.

A CSS feature that lets scroll containers snap their content to defined positions, making sliders and horizontal galleries feel more controlled on touch devices.

A timeline whose progress comes from the scroll position of a container instead of from elapsed time.

A support check written with `@supports selector(...)` to detect whether a browser understands a specific selector.

Parent Grid rows or columns that are reused by child components through `subgrid` so multiple modules follow the same guides.

A lateral navigation pattern that keeps section links visible beside the main content, often used in documentation, dashboards or long lessons.

Scalable and Modular Architecture for CSS. System for organizing styles into clear categories.

Distribution of space between and inside interface elements.

An isolated layering context that controls how `z-index` works among a set of elements.

A page-layout pattern where the footer stays at the bottom of the viewport on short pages without overlapping content.

A header that remains visible near the top edge of the viewport while the page scrolls, usually through `position: sticky`.

The offset value, such as `top: 0`, at which a sticky element stops scrolling normally and starts sticking.

An SVG stroke setting that defines the visible dash pattern along a path and is often paired with animation for draw effects.

A container query that reacts to a style value, such as a custom property, instead of reacting only to size.

A Grid feature that lets a child grid inherit the row or column tracks of its parent for tighter alignment across nested components.

Utility-first CSS framework for building custom interfaces quickly with small reusable classes.

A CSS property that adds shadow to text, often to improve readability on images or expressive backgrounds.

A `text-wrap` value that distributes short text across lines more evenly to avoid awkward final lines.

A `text-wrap` value that improves paragraph endings by trying to avoid lonely final words.

A reduced visual preview image used inside cards, galleries or listings to represent larger content.

The pivot point around which a transformed element rotates, scales or skews.

System of text sizes built on consistent proportions.

A custom property whose value type has been declared explicitly, allowing validation and smoother interpolation.

Practice of choosing and organizing type to improve readability, hierarchy and tone.

A styling philosophy that composes interfaces from many small single-purpose utility classes instead of relying mainly on custom semantic CSS selectors.

A pseudo-class such as `:valid`, `:invalid` or `:required` that reflects native HTML form validation state.

A font file that contains a range of styles or axes, allowing fine-grained control over weight, width, slant or optical size.

A browser-specific prefix such as `-webkit-`, `-moz-` or `-ms-` added to a property or value during a feature rollout period.

A scroll-linked timeline based on how a specific element enters, covers or exits the viewport or another scroll area.

A browser-managed animation between an old UI state and a new one, usually triggered when content or navigation changes.

The CSS property used to identify a specific element so it can participate independently in a view transition.

A positioning relationship in which an element stays tied to the browser viewport instead of to the document flow or a local container.

An HTML meta tag that tells mobile browsers to use the real device width so responsive layouts behave correctly.

The arrangement of shapes, layers and spacing so an interface element or illustration feels balanced and readable.

Intentional empty space that improves readability, rhythm and visual hierarchy.

A CSS hint that tells the browser which properties of an element are likely to change soon, so it can prepare internal optimizations in advance.