Cascading Style Sheets (CSS): Overview, Concepts, and Uses

Core concepts and components

At the heart of CSS are rules that match elements via selectors and assign property values. Key concepts include the cascade, specificity, inheritance, and the box model. The cascade determines which rules apply when multiple rules target the same element; specificity gives precedence to more specific selectors; inheritance passes some properties from parent to child elements; and the box model defines how margin, border, padding, and content size interact.

Common CSS features and modules include:

• Selectors: element, class, id, attribute, pseudo-classes and pseudo-elements.
• Layout: block and inline flow, floats, Flexbox, Grid and positioning.
• Visuals: colors, backgrounds, borders, shadows, transforms and transitions.
• Responsive design: media queries and relative units for different devices.

CSS can be applied inline, embedded within a document's head, or kept in separate files with the .css extension and linked externally; external stylesheets are common because they promote reuse and easier maintenance.

One practical advantage of separating styles is graceful degradation: a web page can remain readable if styles fail or are unsupported, because the underlying markup still provides structure.

History, versions and ecosystem

CSS originated in the 1990s to improve presentation control beyond what HTML allowed. Over time it evolved through levels often called CSS1, CSS2 and CSS3, but modern development favors modular specifications so features are standardized as independent modules rather than a single monolithic "CSS4" release. The ecosystem also includes tooling like preprocessor languages (e.g., Sass, Less), build tools, and browser devtools that help author, test and debug stylesheets.

Uses and notable distinctions

CSS is essential for web design, user interface styling, print formatting, and tailoring presentations for different screen sizes and accessibility needs. Important distinctions include the difference between content (HTML/XHTML) and presentation (CSS), and between layout models such as Flexbox and Grid. Because implementations vary slightly among browsers, authors often test across engines and may use fallbacks or feature queries to ensure consistent behavior.

For more technical references, tutorials and compatibility tables consult browser documentation and standards resources provided by major organizations and vendor sites.