Cascading Style Sheets (CSS) is the styling language of the web, responsible for controlling the visual presentation of HTML documents. Introduced in 1996 and continuously evolved through modular specifications, CSS enables developers to separate content from presentation, creating responsive, accessible, and visually compelling user interfaces. While HTML provides structure and JavaScript adds interactivity, CSS bridges the gap between raw markup and polished design. The key mental model: CSS is a cascade — specificity, inheritance, and source order all matter, and modern CSS now includes native nesting, anchor positioning, scroll-driven animations, and view transitions — making understanding the full cascade ecosystem essential for writing maintainable styles.
What This Cheat Sheet Covers
This topic spans 38 focused tables and 341 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Selectors — Element, Class, and ID
| Selector | Example | Description |
|---|---|---|
.btn { padding: 10px; } | • Targets elements with a specific class attribute • reusable across multiple elements. | |
p { color: blue; } | • Targets all elements of a specific HTML tag • applies broadly across the document. | |
#header { height: 80px; } | • Targets a single unique element with a specific ID • high specificity, use sparingly. | |
* { margin: 0; } | • Matches every element in the document • often used for CSS resets. | |
[type="text"] { border: 1px solid; } | Targets elements based on the presence or exact value of an attribute. |