CSS (Cascading Style Sheets) — overview, features, history, and uses

Cascading Style Sheets (CSS) defines the visual presentation of HTML documents. It controls layout, colors, typography, responsive design, animations and theming across devices and browsers.

Overview

Cascading Style Sheets (CSS) is the language used to describe how HTML or XML documents should be presented in a user agent such as a web browser. CSS separates content (structure and semantics) from presentation (layout, color, typography), enabling consistent styling across pages and easier maintenance. CSS rules pair selectors, which target elements, with declarations that set properties and values.

Core concepts and parts

Key concepts in CSS include the cascade, specificity, inheritance, and the box model. The cascade determines which rules apply when multiple rules target the same element; specificity ranks selectors; inheritance passes some property values from parent to child elements. The box model defines how padding, border, and margin relate to element dimensions.

Selectors: type, class, ID, attribute, pseudo-class, pseudo-element
Properties: layout (display, position), box model (margin, padding), typography (font-family, line-height), visual (color, background)
Layout systems: normal flow, Flexbox, Grid, multi-column
Responsive tools: media queries, relative units (%, em, rem, vw/vh)

History and development

CSS originated in the mid-1990s as a lightweight way to style HTML. Early work by designers and browser developers led to CSS1 being published by the W3C in 1996, followed by CSS2 and later a modularized CSS3 divided into separate specifications. Development continues through vendor implementation and W3C working groups; modern features like Grid, custom properties, and advanced selectors were added progressively.

Uses and examples

CSS is used to build responsive layouts, implement themes, animate elements, and improve accessibility. Typical examples include responsive navigation with media queries, two-dimensional layouts with CSS Grid, one-dimensional alignment with Flexbox, and smooth transitions or keyframe animations for visual feedback. CSS variables (custom properties) allow reusable values and runtime theming.

Distinctions and notable facts

CSS differs from inline styling: styles in external stylesheets promote reuse and separation of concerns.
Preprocessors (Sass, Less) add features like variables and nesting but compile to standard CSS.
Modern patterns include CSS-in-JS and component-scoped styles; Shadow DOM affects cascading and scoping.
Browser compatibility and performance remain practical concerns; progressive enhancement and feature queries help manage differences.