CSS

In short: Cascading Style Sheets — the language used to define the appearance (colours, spacing, layout) of HTML elements.

In more detail: Separates content (HTML) from presentation (CSS): rules select elements via selectors (e.g. classes, IDs) and assign them properties. “Cascading” refers to rule priority when several rules apply to the same element. Modern layout systems like Flexbox and Grid are now a firm part of CSS.

In Depth

Basic syntax

A CSS rule consists of a selector and a declaration block:

.card {
  display: flex;
  padding: 1rem;
  background-color: #1a1a1a;
}
 
.card:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

The cascade

The “cascade” in the name refers to three interacting mechanisms that determine which rule wins when several rules apply to the same element:

1. Specificity: an ID selector (#header) beats a class selector (.header), which in turn beats a simple element selector (div).
2. Order in the stylesheet: with equal specificity, the rule defined later in the document wins.
3. !important: overrides both, but should be used sparingly, since it makes the cascade unpredictable and makes later override attempts harder (usually seen as a “last resort”, not normal practice).

Layout systems in transition

Historically, CSS layout was tedious: developers repurposed floats (actually meant for wrapping text around images) for entire page layouts, which was fragile and hard to maintain. This changed fundamentally with two modern layout systems: Flexbox (one-dimensional layout, ideal for example for a row of cards or a navigation bar) and CSS Grid (two-dimensional layout, ideal for an entire page grid with rows AND columns at once). Both are now a firmly established, well-supported part of CSS and have almost completely replaced floats for layout purposes.

Preprocessors and native CSS features

Preprocessors like SASS extended CSS early on with programming concepts like variables, nesting and functions that plain CSS lacked for a long time — written in their own syntax, compiled to normal CSS before delivery. Many of these features have since arrived natively in CSS: real CSS variables (--custom-property, changeable at runtime in the browser, which isn’t possible with precompiled SASS), nested selectors (CSS nesting), and container queries (styling based on the size of a parent element instead of just the entire viewport) — trends that reduce the need for preprocessors in many projects.

Responsive design

Media queries allow CSS rules that only apply above/below a certain screen width (@media (min-width: 768px) { ... }) — the technical basis of “responsive design”, where the same page is displayed differently but appropriately on smartphone, tablet and desktop, instead of maintaining a separate version for every device.

See also: HTML, JS, SASS, Bootstrap