CSSFundamentals

What Is the CSS Box Model?

The CSS box model describes every rendered element as a set of nested rectangular layers — content, padding, border, and margin — and how those layers combine…

CSS Flexbox vs Grid: What Is the Difference?

Flexbox is a one-dimensional layout system for arranging items along a single row or column with flexible sizing, while CSS Grid is a two-dimensional system th…

How Does CSS Specificity Work?

CSS specificity is a weighted scoring system the browser uses to decide which of several conflicting rules wins on an element, calculated by counting IDs, clas…

What Are the CSS Position Values and How Do They Differ?

The CSS position property controls how an element is placed in the document: static is the default normal flow, relative offsets an element from its own origin…

How Do z-index and Stacking Contexts Work?

z-index controls the paint order of positioned elements along the axis perpendicular to the screen, but it only works within a stacking context, which is a sel…

What Are CSS Custom Properties (CSS Variables)?

CSS custom properties, written as --name and read with var(--name), are author-defined variables that cascade and inherit like any other CSS property, letting…

What Are CSS Media Queries and How Do They Work?

A media query is a CSS conditional block that applies a set of styles only when the browser environment matches specified conditions, most commonly viewport wi…

What Are CSS Pseudo-Elements and How Do They Differ From Pseudo-Classes?

A pseudo-element (like ::before or ::after) lets you style or insert a specific sub-part of an element that doesn’t exist as a real DOM node, while a pseudo-cl…

What Is BEM Methodology and Why Use It in CSS?

BEM (Block, Element, Modifier) is a CSS naming convention that structures class names as block__element--modifier to make every class flat, self-documenting, a…

What Is CSS Specificity and How Do You Resolve Conflicts?

CSS specificity is the algorithm the browser uses to decide which of several conflicting rules wins for a given element, calculated as a weighted score across…