Skip to content
Devgo

CSS

Cascading Style Sheets — the language for styling web pages. CSS controls colors, fonts, layout, spacing, and responsive design. Without it, HTML is unstyled text. Modern CSS (Flexbox, Grid, custom properties) handles most layout needs without preprocessors.

Created by

Håkon Wium Lie · Proposed CSS in 1994, co-created with Bert Bos

Website
When to use
  • Every web page for styling.
  • Responsive layouts with media queries and Grid/Flexbox.
When not to
  • Styling native apps (use platform styling).
  • Complex animations (use JS/Canvas for control).

Definition

CSS selects elements via selectors and applies style rules (properties). The cascade resolves conflicts by specificity and source order. Modern CSS includes (1D layout), Grid (2D layout), custom properties (variables), and queries. uses media queries and relative units.

Why it exists

To separate presentation from structure so the same can be styled differently for different devices, themes, and contexts.

How it works

Write CSS rules (selector { property: value }). The browser matches selectors to elements, resolves the cascade, computes styles, and lays out/paints the page. Styles can be external files, inline, or in <style> tags.

Scaling limits

Global and specificity wars in large codebases (mitigated by CSS Modules, Tailwind, or scoped styles). Performance: large CSS files block rendering. Complex selectors can be slow to match.

Cost shape

Free. The cost is developer tooling (preprocessors, frameworks) and CSS payload size affecting load.

Alternatives

  • Tailwind CSS — Utility-first, no custom class names, but gets verbose.
  • CSS-in-JS — Scoped styles in JS, but runtime overhead and larger bundles.

Failure modes

  • Specificity wars making overrides hard.
  • !important abuse.
  • Global styles leaking across components.

, , , , ,