A First Look at CSS

CSS is the language that decides how a page looks, and one link line in the head connects your page to a stylesheet, such as the ready-made one this course gives you.

Novice · HTML · CSS · Updated October 31, 2026

After this lesson you can

Link a stylesheet to a page with a `link` element in the `head`
Explain what HTML does for a page and what CSS does

Key takeaways

HTML says what is on a page. CSS says how it looks, with colors, fonts, spacing and layout.
CSS lives in a stylesheet, a separate .css file that every page of a site can share.
A link element in the head, with rel="stylesheet" and href set to the file, connects a page to its stylesheet.
Every page needs its own link line. A page without one shows up plain.
This course's starters come with a ready-made stylesheet that styles plain HTML, so well-built pages look good with no CSS of your own.

The pages you've built so far work, but they all look the same: black text in an old-fashioned font on a white background, stretched across the whole screen. Every website you like the look of, from your bank to your favorite shop to a band's tour page, is HTML plus a second language that decides how it looks. You'll use what's in this lesson every time you want a page to look like you meant it: a class project, a site for a club, the trip guide you're building in this chapter.

This lesson shows what that second language does and connects your pages to it with one line. Writing it is a subject of its own, and this course hands it to you ready-made.

The same house, painted two ways

Picture two houses on the same street, built from the same plan: the same rooms, the same doors, the same windows. One is painted sky blue with white trim and flower boxes under the windows. The other is charcoal gray with a bright red front door. Same house, two completely different looks.

On the web, the plan is HTML: what's on the page, and what each part is (a heading, a paragraph, a picture, a link). The paint and the flower boxes are CSS: how it all looks. CSS stands for Cascading Style Sheets. The "cascading" part is about which instruction wins when two of them disagree, and you won't need it in this course.

The Lake Harbor home page twice: on the left as plain HTML, black text on white; on the right the same HTML with a stylesheet, with a colored heading, a readable column of text and the photo sized to fit

What CSS can do

With the same HTML, CSS can:

choose colors, fonts and the space between things;
lay a page out in columns on a laptop, then stack them into one column on a phone;
switch to light text on a dark background when the visitor's computer is in dark mode;
animate things, such as a button that grows a little when the mouse is over it;
print a clean, ink-saving version of a recipe page.

For a taste of how far it goes, open the CSS Zen Garden (csszengarden.com). Every design there uses the same HTML page; only the stylesheet changes. Click through a few of the designs, made by different people over many years, and watch the same words and headings change completely each time.

What's inside a stylesheet

CSS is written in a stylesheet: a file whose name ends in .css, such as style.css. A stylesheet is a list of rules. Here is one, so you can see what one looks like:

h1 {
  color: teal;
}

Read it aloud as "for every h1, set the color to teal". h1 picks which elements the rule is for. The curly braces, { and }, hold the instructions, and each instruction is a name, a colon, a value and a semicolon.

That's all the CSS this course asks you to read. If you want to learn to write your own, the CSS in Depth course teaches it from the start.

A stylesheet in its own file is called an external stylesheet, and it has a big advantage: every page of your site can use the same one. Change the teal to tomato red in one place, and every heading on every page changes with it.

The link line

A page connects to its stylesheet with one line in its <head>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Weekend in Lake Harbor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>A Weekend in Lake Harbor</h1>
  <p>Pancakes by the water, a park on the pier and the best peaches in the county.</p>
</body>
</html>

Read the line aloud as "link, rel stylesheet, href style dot css":

link connects this page to another file. It shows nothing on the page, and it's a void element, so it has no closing tag.
rel, short for relationship, says what that file is to this page: its stylesheet.
href says where the file is, with the same kind of path as a link or a picture's src. A stylesheet in a css folder would be href="css/style.css".

The line goes in the <head> because the browser reads the head before it shows anything, so the page appears styled from the start. Don't mix it up with <a>: an <a> is a link people click, and <link> is a connection only the browser sees.

Every page needs its own link line. A site with three pages has the line three times, once in each file, and all three point at the same style.css, so they all match.

Try it. In your site's folder, make a file named style.css and paste in the h1 rule above. Add the link line to the <head> of your index.html, save, and look at the page with Live Server: the heading turns teal. Change teal to tomato and save again. Then misspell the file name in href, as stlye.css: the page goes back to plain, with no error on the page. The browser quietly gives up when it can't find a stylesheet, so a plain page is your clue to check the link line.

The course's ready-made stylesheet

From here on, every exercise starter in this course comes with a style.css that's ready to use. It styles the HTML elements themselves (headings, paragraphs, links, pictures, and later lists, tables and forms), so the only thing you add to your HTML is the link line. It keeps the text in a comfortable column, makes big photos shrink to fit the screen, and works on a phone.

Here's the best part: the better your HTML, the better your page looks. Headings in the right order, real paragraphs and pictures with alt text all come out looking the way they should. Good HTML pays off right away.

You're welcome to open style.css and read it; its comments say what each part does. You don't need to understand it to use it.

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

That one line, in every page's <head>, is all it takes.

Check yourself

2 questions to try on the lesson page.

So what

HTML and CSS split the work: HTML says what each part of the page is, and CSS makes it look good. Keep them apart, connected by one link line, and a whole site can change its look in one file.

Key terms

Cheat sheets

A First Look at CSS