CSS (Cascading Style Sheets) is the language used to describe the visual presentation of HTML documents. CSS controls layout, color, typography, spacing, animation, and how pages adapt to different screen sizes. It is one of the three core technologies of the web alongside HTML (structure) and JavaScript (interactivity).

CSS is maintained by the W3C CSS Working Group and continues to evolve with new features added regularly.

Basic syntax

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

h1 {
  color: #1a1a1a;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

This rule selects all <h1> elements and sets their color, font size, weight, and bottom margin.

How CSS is included in a page

Three ways to apply CSS to HTML:

<!-- 1. External stylesheet (recommended) -->
<link rel="stylesheet" href="styles.css" />

<!-- 2. Internal stylesheet -->
<style>
  h1 { color: red; }
</style>

<!-- 3. Inline style (use sparingly) -->
<h1 style="color: red;">Heading</h1>

External stylesheets are preferred for maintainability, caching, and reusability across pages.

Selectors

CSS selectors target specific elements:

Selector	Targets
`h1`	All `<h1>` elements
`.button`	All elements with `class="button"`
`#header`	The element with `id="header"`
`nav a`	All `<a>` elements inside any `<nav>`
`nav > a`	Direct child `<a>` elements of `<nav>`
`a:hover`	Links being hovered
`input[type="email"]`	Email input fields
`:nth-child(odd)`	Odd-numbered child elements
`::before`, `::after`	Generated content before/after elements

Combining selectors creates specific or general rules.

The cascade and specificity

The “cascading” in CSS refers to how multiple rules can apply to the same element. When rules conflict, browsers determine which to apply based on:

Origin and importance. User agent → user → author → !important declarations
Specificity. More specific selectors override less specific ones (#id > .class > element)
Source order. Later rules override earlier ones at the same specificity

Understanding the cascade is central to writing maintainable CSS.

Layout systems

CSS provides multiple layout mechanisms:

System	Use
Block / inline (default)	Standard document flow
Float	Originally for image wrapping; once used for layout, now mostly superseded
Flexbox	One-dimensional layouts (rows or columns)
Grid	Two-dimensional layouts (rows and columns)
Position (absolute, fixed, sticky)	Out-of-flow positioning
Container queries	Responsive components based on container size, not viewport
Subgrid	Nested grids that align with parent

Modern layout typically combines Flexbox for components and Grid for page-level structure.

Responsive design

CSS supports adapting layouts to different screen sizes through media queries:

.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 4rem;
  }
}

Modern responsive design also uses:

Container queries for component-based responsiveness
clamp(), min(), max() for fluid sizing
vh, vw, dvh units for viewport-relative sizing
aspect-ratio for proportional sizing

CSS preprocessors and extensions

Tools that extend CSS with additional features, then compile to standard CSS:

Sass / SCSS, variables, nesting, mixins, functions; widely used
Less, similar concept; less common today
PostCSS, plugin-based CSS transformation pipeline
Stylus, alternative syntax with strong feature set

Modern CSS has absorbed many preprocessor features (variables, nesting), reducing the need for them in some workflows.

CSS frameworks and tools

Tool	Approach
Tailwind CSS	Utility-first; classes apply specific properties
Bootstrap	Component library with pre-built UI patterns
Bulma	Modern CSS framework using Flexbox
Foundation	Long-standing responsive framework
PureCSS	Lightweight set of small modules
CSS Modules	Scoped CSS for components
Styled-components, Emotion	CSS-in-JS for React
Vanilla CSS	No framework; modern CSS is capable on its own

The “right” approach depends on team preferences, project scale, and design system needs.

Animations and transitions

CSS supports both:

Transitions, smooth changes between states (hover, focus, class changes)
Animations, keyframe-based animations with full control over timing

.button {
  transition: background-color 200ms ease;
}
.button:hover {
  background-color: #1a1a1a;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  animation: fadeIn 300ms ease;
}

Animating transform and opacity is generally more performant than animating layout properties (width, height, top, left) because they don’t trigger layout recalculation.

Modern CSS features

CSS has gained substantial new capabilities:

CSS variables (custom properties), --main-color: #1a1a1a;
CSS Grid and Subgrid
Container queries
:has() selector, parent selectors based on children
CSS nesting, write nested rules natively
Color functions, oklch(), color-mix(), modern color spaces
Cascade layers, explicit ordering of style sources
View transitions, animated transitions between page states

CSS performance

CSS performance considerations include:

File size, total CSS shipped to the browser
Render-blocking, CSS in the head delays initial paint
Specificity wars, overly complex selectors slow style computation
Unused CSS, sites often ship far more CSS than is used per page
Critical CSS, inlining the styles needed for above-the-fold content

Tools like PurgeCSS and modern frameworks remove unused CSS at build time.

Common misconceptions

“CSS is just for colors and fonts.” CSS handles layout, animation, responsive behavior, and increasingly complex interactive states.
“You need a framework like Bootstrap or Tailwind.” Modern vanilla CSS is capable of building most sites; frameworks are conveniences, not requirements.
“!important solves specificity issues.” It often creates worse problems by escalating future conflicts.
“CSS is finished and stable.” CSS continues to evolve rapidly with major new features each year.