What is CSS?
If HTML is the skeleton of a web page — the raw structure of headings, paragraphs, images, and links — then CSS is everything that makes it look like something worth visiting. CSS stands for Cascading Style Sheets, and it's the language you use to control how HTML elements appear on screen: their colours, fonts, spacing, layout, animations, and much more.
Without CSS, every website would look like a plain text document. With it, you can build anything from a simple blog to a pixel-perfect dashboard to a silky-smooth animated interface. It's one of the three core technologies of the web, alongside HTML and JavaScript, and you genuinely cannot build a website without it.
A concrete example
Here's the simplest possible demonstration. This HTML paragraph has no CSS applied:
<p>Hello, world!</p>
It renders as plain black text in the browser's default font. Now add some CSS:
p {
color: steelblue;
font-size: 24px;
font-family: Georgia, serif;
}Suddenly the text is blue, larger, and in a different font. That's CSS — you select an element, then declare how it should look. Every CSS rule follows this same pattern, no matter how complex the design.
What CSS actually controls
Category | What you can do |
|---|---|
Colour & backgrounds | Text colour, background colour, gradients, images |
Typography | Font family, size, weight, spacing, decoration |
Box model | Width, height, padding, borders, margin |
Layout | Flexbox, Grid, positioning, columns, float |
Visual effects | Shadows, rounded corners, opacity, filters, clip paths |
Motion | Transitions, animations, scroll-driven effects |
Responsiveness | Adapt the design to any screen size or device |
Theming | Dark mode, custom properties, brand tokens |
Where CSS lives
CSS can be written in three places: directly on an HTML element as a style attribute (inline), inside a <style> block in the <head> of an HTML file (internal), or — most commonly — in a separate .css file that the HTML file links to (external). You'll learn the trade-offs between all three on the Applying CSS page, but for now the important thing is understanding that CSS is always connected to HTML in one of these ways.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="styles.css"> <!-- external CSS file linked here --> </head> <body> <h1>Hello!</h1> </body> </html>
The "cascading" part
The word cascading in CSS is doing a lot of work. It refers to the algorithm that decides which styles win when multiple rules target the same element. If you write one rule that sets a paragraph's colour to red, and another rule that sets it to blue, CSS needs a way to resolve that conflict. It does so through a combination of specificity (how precisely a rule targets an element), order (rules that come later override earlier ones, all else being equal), and inheritance (some properties, like font size, are automatically passed down from parent elements to their children).
This cascade is what gives CSS its power — and, initially, its occasional frustration. Once you understand how it works, you can predict and control styles with precision. There's a whole section on it later in this guide.
CSS is surprisingly deep
Beginners often underestimate CSS. It looks simple — you write a property name, a colon, a value, done. But building layouts that work on every screen size, managing design systems with dozens of components, writing performant animations, and handling accessibility correctly all require a deep understanding of how CSS works under the hood. This guide starts from first principles and works up to modern advanced features like container queries, CSS Houdini, and scroll-driven animations. Take it one section at a time and the complexity will make sense.