What Are Cascading Style Sheets?

Cascading Style Sheets (CSS) is a stylesheet language used to describe the visual presentation of documents written in HTML and XML. It separates content from style by allowing authors to specify color, typography, spacing, layout, and animation independently of the document's semantic structure. CSS is one of the three foundational technologies of the web platform, alongside HTML and JavaScript, and is standardized by the World Wide Web Consortium (W3C).

The language was proposed by Håkon Wium Lie in 1994 and first published as a W3C Recommendation (CSS Level 1) in December 1996. Before CSS, web page appearance was controlled entirely through HTML attributes and presentational elements, which intermingled structure and style in ways that made large-scale maintenance difficult. CSS introduced a principled separation that remains the basis of web authoring today. The W3C CSS home page tracks the current state of every CSS module through its Working Group, publishing a CSS Snapshot each year to identify which specifications are stable enough for broad implementation.

Selectors and the Cascade

The core mechanism of CSS is the selector, a pattern that matches elements in a document tree and applies a set of declarations to them. Selectors range from simple element-type selectors (targeting all paragraphs, for example) to attribute selectors, pseudo-classes that match interactive states like :hover, and complex combinators that express structural relationships among elements. When multiple rules match the same element, the cascade resolves the conflict through a three-factor priority order: the origin of the stylesheet (browser default, user, or author), the specificity of the selector (calculated from counts of ID, class, and element tokens), and the source order. Understanding specificity is fundamental to predictable CSS authoring; a single ID selector outweighs any number of class selectors in the same rule, which is why detailed specificity calculation is taught as a core skill in front-end development.

Box Model and Layout

Every element rendered by a CSS-aware browser occupies a rectangular area governed by the box model: a content area, surrounded by optional padding, a border, and an outer margin. The CSS2.1 specification, published as a W3C Recommendation in 2011 after more than a decade of refinement, formalized the standard box model and resolved longstanding differences in how browsers sized elements. Layout in CSS has evolved substantially: from the float-based column patterns common through the 2000s, through Flexbox (introduced as a module around 2012 and widely adopted by 2015), to CSS Grid, which provides two-dimensional layout control unavailable in earlier models. The CSS Level 2 Revision 1 specification remains a reference for understanding the foundational layout and visual formatting model on which subsequent modules build.

CSS Modules and Responsive Design

Since CSS3, the language has been organized as a collection of independently versioned modules: Color, Selectors, Transforms, Animations, Grid Layout, and others each progress through the W3C Recommendation track on separate timelines. This modular structure allows individual capabilities to reach stability and broad browser support without waiting for a monolithic release. Responsive design, the practice of adapting a layout to different viewport sizes using media queries, was formalized in CSS3 and became standard practice after Ethan Marcotte named the approach in 2010. The MDN Web Docs CSS reference maintained by Mozilla documents the complete set of current properties, functions, and at-rules across all modules and serves as the primary practical reference for working developers.

Applications

Cascading Style Sheets has applications across a wide range of web and document contexts, including:

• Visual design and branding for websites and web applications
• Responsive layouts adapting to mobile, tablet, and desktop viewports
• Print stylesheets controlling page breaks and margins for document output
• Accessible UI components with visual focus indicators and high-contrast themes
• Animated interfaces and data visualizations using CSS transitions and keyframe animations