CSS

The styling language that controls layout, color, and responsiveness.

CurrentbeginnerBeginner-friendlyFull course available

Start course: HTML & CSS Fundamentals Open playground Explore related technologies

Overview

CSS (Cascading Style Sheets) controls how HTML content looks and is laid out: color, spacing, typography, and responsive behavior across screen sizes. Modern CSS (Flexbox, Grid) handles layout that once required JavaScript or table hacks.

What it is: A rule-based styling language that selects elements and applies visual properties to them.
Why it's used: It's the only native way to style web content -- and modern CSS is powerful enough to replace most layout JavaScript.
Where it fits: Applied to HTML; often loaded via a framework (Bootstrap, Sass) or written directly.

Core concepts

Selectors and specificity
The box model
Flexbox
Grid
Media queries / responsive design

Example

Flexbox (display: flex) arranges children in a row or column with consistent spacing (gap) -- one of two modern CSS layout systems, alongside Grid.

.card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
}

Common use cases

Styling any web page
Responsive layouts
Design systems and component libraries

Project ideas

A responsive card grid using Flexbox or Grid
A dark/light theme toggle using CSS custom properties

Official references

MDN: CSS