CSS Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Pseudo class

In CSS, a Pseudo-class is a keyword added to a selector that specifies a special "state" of the selected element. Instead of styling an element based on its name or class (like .button), a pseudo-class styles it based on user interaction or its position in the document tree. The most common examples are :hover (when a mouse is over an element), :focus (when an element is selected via keyboard), and :active (the exact moment a button is clicked).

Tailwind CSS

Tailwind CSS is a highly popular, "utility-first" CSS framework. Instead of creating pre-designed, rigid components (like a standard "Bootstrap button"), Tailwind provides developers with hundreds of low-level utility classes (like text-center, mt-4 for margin-top, or bg-blue-500). Developers combine these tiny utility classes directly within their HTML to rapidly build completely custom designs without ever writing custom CSS files from scratch.

Media Queries

A Media Query is a fundamental CSS technique used to apply different styling rules to a webpage based on the user's device characteristics, most commonly the browser viewport width.

Inline-Block

In CSS, display: inline-block is a layout property that combines the behaviors of both "inline" and "block" elements. Like an inline element (such as a standard text link), it allows the element to sit side-by-side with other elements on the same horizontal line. However, like a block element (such as a <div>), it allows developers to explicitly set its width, height, top margin, and bottom padding.

HEX Code

A HEX (Hexadecimal) Code is a six-digit alphanumeric combination used in web design and development to specify colors precisely on a screen. Based on the RGB (Red, Green, Blue) color model, the code starts with a hashtag (#) followed by three pairs of characters (ranging from 00 to FF) that dictate the intensity of red, green, and blue light mixed together to create the final color (e.g., #FFFFFF is pure white, #000000 is pure black).

Grid System (CSS Grid)

In web design, a Grid System is a structural foundation used to arrange content consistently and logically on a page. Visually, it divides the screen into a series of rows and columns (commonly a 12-column layout). In development, this is executed using CSS Grid—a powerful two-dimensional layout system that allows developers to create complex, responsive web interfaces with absolute precision.

Fluid Typography

Fluid Typography is a modern web design technique where the size of text automatically and proportionally scales up or down based on the width of the user's screen (the viewport). Instead of using fixed pixel sizes or jumping abruptly at specific CSS breakpoints, fluid typography uses mathematical functions (like CSS clamp()) to ensure text smoothly resizes as the browser window stretches or shrinks.

Flexbox (Flexible Box Layout)

Flexbox (Flexible Box Layout) is a fundamental CSS layout module designed to provide a highly efficient way to lay out, align, and distribute space among items in a container, even when their exact size is unknown or dynamic. Unlike older layout methods that relied on clunky floats and rigid margins, Flexbox is fluid by nature.

Elastic Beaming

Elastic Beaming is an advanced, highly sophisticated front-end development technique where an entire website layout—including typography, spacing, and image dimensions—scales proportionally fluidly based on the user's viewport width. Instead of using static pixel sizes, it relies heavily on relative units like vw (viewport width), em, and rem.

Webflow CMS

The Webflow CMS (Content Management System) is a powerful, visual database integrated directly into the Webflow development platform. Unlike traditional CMS platforms (like WordPress) which force content into rigid, pre-defined templates, the Webflow CMS allows developers to design completely custom data structures (Collections) and visually bind that data to any bespoke frontend design.

Z-Index

While the X-Axis is width and the Y-Axis is height, the Z-Index is a CSS property that controls the Z-Axis—the "depth" or stacking order of overlapping elements on a webpage. If two elements overlap, the element with the higher Z-Index value will appear "in front" of or "on top" of the element with the lower Z-Index value.

XML (eXtensible Markup Language)

XML is a markup language that structures and stores data in a human-readable, machine-parseable format. Unlike HTML, which defines how data is displayed, XML defines what the data means. XML uses custom tags to describe data structure.

Version Control

Version Control is a system that tracks changes to files (especially source code) over time, enabling multiple developers to collaborate on the same project without overwriting each other's work. Git is the most widely used version control system. Version control systems maintain a history of all changes, allowing developers to view past versions and revert to them if needed.

Unit Testing

Unit Testing is a type of software testing where individual functions or "units" of code are tested in isolation to verify they work correctly. A unit test calls a function with specific inputs and checks if the output matches the expected result.

Third-Party Integration

A Third-Party Integration is a connection between a software application and an external service or API provided by a different company. For example, a SaaS product integrating with Stripe for payments, Mailchimp for email marketing, or Salesforce for CRM data.

Testing (QA)

Testing, also known as Quality Assurance (QA), is the systematic process of verifying that software functions correctly, is free of bugs, and meets requirements. Common types of testing include unit testing (individual functions), integration testing (multiple components), and end-to-end testing (entire user workflows).

Syntax Highlighting

Syntax Highlighting is a feature in code editors and documentation that displays code in different colors and fonts based on the programming language syntax. Keywords, variables, strings, and comments are displayed in different colors, making code easier to read and understand.

State Management

State Management is the process of managing and updating application data (state) in a way that enables all parts of an application to access and respond to changes in that data. In JavaScript applications, state refers to any data that changes over time (user input, API responses, UI flags).

Staging Environment

A Staging Environment is a replica of a production website or application used for testing changes before deploying them to the live production environment. Staging environments have the same architecture, databases, and configurations as production, but contain test data and no real users.

Scroll Snapping

Scroll Snapping is a native CSS feature that allows developers to control the panning and scrolling behavior of a webpage. Instead of a user's scroll wheel stopping randomly halfway between two sections of content, scroll snapping forces the browser's viewport to "snap" smoothly to specific, predefined points (usually the top or center of a specific section), creating a presentation-like, slide-by-slide experience.

REM Units (Root Em)

A REM (Root Em) is a relative CSS measurement unit used to define typography size, padding, and margins. Unlike static "Pixels" (px) which represent an absolute dot on a screen, 1 REM is equal to the font size of the root HTML element of the webpage (which is overwhelmingly defaulted to 16px by modern browsers). Therefore, 2rem equals 32px, 0.5rem equals 8px, and so on.

Relative Positioning

In CSS, position: relative is a layout property that places an element within the normal flow of the document, but allows developers to manually nudge it slightly (using top, bottom, left, or right values) relative to where it would have normally been. More importantly, it establishes a new coordinate system (a "reference point") for any child elements inside it that use Absolute Positioning.

Quality Assurance (QA)

Quality Assurance (QA) is the systematic testing and validation process to ensure that a product, website, or software meets quality standards, functions as intended, and is free of bugs, errors, and security vulnerabilities before release.

Positioning (CSS)

Positioning is a fundamental set of CSS properties (static, relative, absolute, fixed, and sticky) that define exactly how an HTML element is placed and manipulated within the browser's document flow. It allows developers to break elements out of the standard top-to-bottom layout, enabling complex, overlapping, and interactive user interfaces.

Global Styles

Global Styles are a centralized set of foundational CSS rules that dictate the default appearance of all standard HTML elements across an entire website. Instead of styling every single paragraph or button individually, developers define the rules for typography, color variables, spacing, and link behaviors in one master location.

Drop Shadow

A Drop Shadow is a CSS visual effect that creates the illusion of a shadow falling behind a specific element (like a button, image, or card) onto the background below it. It is created by off-setting a blurred, semi-transparent color from the element's edges, simulating depth and three-dimensional space on a flat, two-dimensional screen.

Absolute Positioning

Absolute Positioning is a CSS (Cascading Style Sheets) rule that allows developers to place an element exactly where they want it, relative to its closest positioned ancestor. Unlike static or relative elements, an absolutely positioned element is removed from the normal document flow.

Z-Index (CSS Property)

The Z-Index controls the depth position of elements on the z-axis (the axis coming out of the screen). Elements with a higher Z-Index value appear on top of elements with lower values.

Y-Axis Alignment

Y-Axis Alignment is a fundamental layout principle controlled by CSS (Cascading Style Sheets). It dictates the precise vertical positioning of elements within a container.

Transition

Transitions are simple forms of Animation that bridge the visual gap between two states, such as a subtle color change when a user triggers a Hover Effect or when a menu opens. They are defined entirely in CSS (Cascading Style Sheets).

Padding

Padding is one of the two main properties (the other being Margin & Padding) used to control the visual spacing on a web page. Unlike margin (external space), padding is internal space that affects the size of the element's background or clickable area.

Object Fit

Object Fit is a critical CSS property for Responsive Design. It addresses the common problem of images being either stretched, distorted, or cropped incorrectly within a fixed container size. The most common values are: cover, contain, and fill.