Css Glossary

Browse 34 css terms defined in plain English, from the cultural dictionary of computing.

34 Css Terms

BEM
Block Element Modifier — a CSS naming convention that organizes class names as .block__element--modifier (e.g., .card__title--highlighted). Prevents...
Color Contrast Ratio
The relative luminance ratio between foreground text and its background, ranging from 1:1 (identical) to 21:1 (black on white). WCAG AA requires 4.5:1 for...
Container Query
A CSS feature that applies styles based on the size of a component's container rather than the viewport. Enables truly reusable responsive components — a card...
CSS Architecture
The organizational approach used to structure stylesheets, naming conventions, component boundaries, and style reuse in a frontend codebase. Good CSS...
CSS Custom Properties
Native CSS variables declared with -- prefix and accessed via var(). Unlike preprocessor variables (Sass $vars), custom properties are live in the browser,...
CSS Framework
A collection of prebuilt CSS styles, layout systems, utilities, and components intended to speed up frontend development. CSS frameworks can improve...
CSS Grid
A two-dimensional CSS layout system for creating complex grid-based designs with rows and columns. Unlike Flexbox (one-dimensional), Grid handles both axes...
CSS Layout
The arrangement of visual elements on a web page using CSS rules such as flexbox, grid, positioning, sizing, and spacing. CSS layout work focuses on how...
CSS Reset
A baseline stylesheet that reduces or removes browser default styling so a project starts from a more predictable visual foundation. CSS resets help smooth...
CSS Utility
A small single-purpose CSS class that applies one narrowly scoped style such as margin, color, display, or alignment. Utility-heavy approaches can speed up...
Design Token
A named, platform-agnostic variable that stores a single atomic design decision — such as a color value, spacing unit, font size, or border radius — allowing...
Flexbox
A one-dimensional CSS layout model for distributing space and aligning items along a single axis (row or column). Handles content of unknown size, enables...
Grid
A two-dimensional CSS layout system that allows developers to arrange elements in rows and columns simultaneously, providing precise control over alignment,...
Keyframe
A defined point in an animation timeline that specifies property values the renderer should match at that moment, with intermediate frames interpolated...
Layout Engine
The component of a web browser (or similar rendering system) responsible for computing the size and position of every element on screen by interpreting HTML,...
Masonry Layout
A layout algorithm where items of varying heights are packed into columns such that each new item is placed in the shortest column, creating a staggered grid...
Media Query
A CSS conditional rule (`@media`) that applies styles only when the user's device or viewport matches specified criteria such as width, height, orientation,...
Pseudo Element
A CSS keyword (prefixed with ::) that targets a virtual sub-part of an element which does not exist in the DOM, allowing you to style or insert content without...
Render Tree
The browser's internal representation that combines the DOM tree with computed CSS styles, containing only the visible elements (excluding display:none nodes...
Responsive Design
Responsive Design is a web development approach where a website's layout and content automatically adapt to the screen size and orientation of the device...
Sass
Syntactically Awesome Style Sheets — a CSS preprocessor that adds variables, nesting, mixins, partials, and inheritance to standard CSS. Sass files (.scss or...
Scoped Style
CSS rules that are automatically confined to a specific component or DOM subtree so they cannot leak out and accidentally style other parts of the page,...
Scrollbar
A UI control along the edge of a scrollable area that indicates the current viewport position within the total content and allows users to navigate by dragging...
Scroll Snap
A CSS feature (`scroll-snap-type` and `scroll-snap-align`) that forces a scrollable container to settle on specific snap points after the user stops scrolling,...
SCSS
Sassy CSS — the newer, CSS-superset syntax of the Sass preprocessor that uses curly braces and semicolons (unlike the indentation-based `.sass` syntax), adding...
Selector
A pattern used to match and target elements — in CSS for styling, in Objective-C for method dispatch, or in state management libraries for deriving computed...
Shorthands
Condensed syntax forms that let a developer express a common operation in fewer characters or lines than the full equivalent, such as CSS shorthand properties...
Tailwind
Short for Tailwind CSS — a utility-first CSS framework that provides low-level, single-purpose classes (like flex, pt-4, text-center) composed directly in HTML...
Tailwind CSS
A utility-first CSS framework created by Adam Wathan that replaces traditional component-based CSS with composable utility classes applied inline, configured...
Theme
A centralized set of design tokens — colors, typography, spacing, border radii — that can be swapped to change the entire look of an application without...
Transform
An operation that converts data or visual elements from one form to another — in CSS, a transform applies 2D/3D geometric changes (translate, rotate, scale) to...
Transition
In CSS, a smooth interpolation between two property values over a specified duration and easing curve, triggered by a state change like :hover. In state...
Worklet
A lightweight, low-latency script execution context in the browser that runs on a dedicated thread — used by the CSS Paint API (PaintWorklet), Audio Worklet...
Z-Index
A CSS property controlling the stacking order of overlapping positioned elements. Higher values appear in front. Notoriously confusing because z-index only...

Related Topics