What CSS Is

The language that makes your website look great

6 min read

If you have been building your website with HTML, you have probably noticed something: it works, but it looks a bit plain. Black text, white background, blue links. Every page on the early web looked like that. CSS is the language that changes it.

CSS stands for Cascading Style Sheets. Do not worry about the fancy name. The idea is simple: HTML describes what is on your page, and CSS describes how it should look. HTML says "this is a heading". CSS says "make that heading dark blue, larger, and centered".

A good way to picture it: HTML is the skeleton of your website, and CSS is everything you see on the outside. The colors, the fonts, the spacing, the layout. Same skeleton, endless possible looks.

Your first CSS rule

CSS is written as a list of rules. Here is one:

h1 {
  color: steelblue;
}

Let us read it piece by piece. The h1 at the start is called the selector. It answers the question "which part of the page does this rule apply to?" Here it means "every h1 heading".

Inside the curly braces is a declaration. color is the property, the thing you want to change. steelblue is the value, what you want to change it to. A colon separates them, and a semicolon ends the line. That semicolon matters: forgetting it is the most common beginner mistake in CSS, so make it a habit from day one.

You can put as many declarations as you like inside one rule:

h1 {
  color: steelblue;
  text-align: center;
}

Connecting CSS to your HTML

The most common way to use CSS is to put it in its own file, usually called styles.css, and link it from your HTML. Inside the <head> of your HTML page, you add one line:

<link rel="stylesheet" href="styles.css">

That single line tells the browser: "before you show this page, go read styles.css and apply everything in it". One CSS file can style every page of your website, which is why a small change in one place can transform your whole site.

You do not need to memorize property names. Every CSS developer looks things up constantly. What matters is understanding the pattern: selector, property, value. Once that clicks, everything else is just vocabulary.

Quick check

Q1 What is the job of CSS on a website?

Q2 In the rule h1 { color: steelblue; }, what is h1 called?

Want to save your progress? It's free.

Create a free account