Nodea — logo

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is the language used to describe the presentation of HTML documents: colors, fonts, spacing, layout, backgrounds and motion. Its founding idea is separation of concerns — the document carries structure and meaning, while stylesheets carry appearance, so the same content can render differently on screens, in print or under a dark theme without touching the markup.

How CSS works

A stylesheet is a list of rules. Each rule pairs a selector, which targets elements, with a declaration block that sets properties: article h2 { color: #1a3c6e; margin-block: 2rem 1rem; }. When several rules compete for the same element, the cascade arbitrates using style origin, selector specificity and source order; inheritance then passes properties like font and text color down the document tree. Mastering these two mechanisms is what turns CSS from frustrating into predictable.

Modern CSS is a genuinely powerful layout and design system:

  • Flexbox and Grid handle one- and two-dimensional layouts that once required fragile float hacks,
  • media queries and container queries adapt styles to viewport or container size — the backbone of responsive design,
  • custom properties (CSS variables) enable theming and dark mode without rule duplication,
  • transitions, transforms and keyframe animations deliver motion without JavaScript,
  • native nesting and cascade layers keep large codebases organized.

Practical applications

CSS reaches the browser as external files (best for caching), embedded <style> blocks or inline attributes. At scale, teams impose structure with naming conventions like BEM, utility-first frameworks such as Tailwind CSS, or component libraries like Bootstrap; build pipelines minify output and strip unused rules. The performance stakes are real: render-blocking or bloated stylesheets are among the most common findings in page speed audits, directly affecting Core Web Vitals and, through them, search rankings. Day to day, the browser DevTools inspector — showing exactly which rules apply, which are overridden and why — remains the essential instrument for debugging the cascade.

Powiązane pojęcia

Najczęstsze pytania

What does the "cascade" in CSS actually mean?

The cascade is the algorithm browsers use to resolve conflicts when multiple rules target the same element. It weighs the origin of the styles (browser defaults, user settings, author styles), selector specificity, and source order. Understanding it — plus inheritance — explains virtually every "why is my style not applying" mystery.