What is CSS? Adding styles to HTML

CSS (Cascading Style Sheets) controls how a web page looks: colours, fonts, spacing and layout. HTML describes what the content is; CSS describes how it should be presented. Keeping the two apart is what lets one stylesheet restyle a whole site.

HTML and CSS have different jobs

Here is a page with no CSS at all:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Plain page</title>
</head>
<body>
    <h1>Opening hours</h1>
    <p>We are open Monday to Friday, 9am to 5pm.</p>
</body>
</html>

The browser still shows something sensible. The heading is large and bold and the paragraph has space around it. Those defaults come from the browser's own built-in stylesheet, called the user agent stylesheet.

CSS lets you replace those defaults with your own design:

body {
    font-family: system-ui, sans-serif;
    color: #1f2933;
    background-color: #f7f7f2;
}

h1 {
    color: #0b5394;
}

The HTML does not change. Only its presentation does.

Three ways to add CSS

1. Inline styles

You can put CSS directly on an element with the style attribute:

<p style="color: darkred; font-weight: bold;">Sale ends today.</p>

This works, but it only affects that one element. To change the colour of every sale notice you would have to edit every one by hand. Inline styles also beat almost every other rule, which makes them hard to override later. You will see why in the cascade lesson.

2. Internal stylesheet

A <style> element in the <head> applies to the whole page:

<head>
    <meta charset="utf-8">
    <title>Opening hours</title>
    <style>
        h1 {
            color: #0b5394;
        }
    </style>
</head>

This is better than inline styles because one rule styles every h1 on the page. It is still limited to one page, though. A site with 50 pages would need 50 copies.

3. External stylesheet

The standard approach is to put your CSS in its own file, for example styles.css, and link to it from every page:

/* styles.css */
body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #1f2933;
}

h1 {
    color: #0b5394;
}

<head>
    <meta charset="utf-8">
    <title>Opening hours</title>
    <link rel="stylesheet" href="styles.css">
</head>

The <link> element has two important attributes:

• rel="stylesheet" tells the browser what the file is.
• href is the path to the file, relative to the HTML page, just like a link.

Why external stylesheets win

• One change, every page. Edit styles.css once and the whole site updates.
• Caching. The browser downloads the file once and reuses it on later pages, so they load faster.
• Separation of concerns. Content lives in HTML, presentation in CSS. Each file is easier to read and change.
• Teamwork. Designers and developers can work on styles without touching content.

Internal styles still have a place: small demos, single-page experiments, and occasionally a few critical rules that a performance tool inlines for you. Inline style attributes are mostly used by JavaScript or content management systems that set one value dynamically.

Linking more than one stylesheet

You can link several files. They are applied in the order they appear:

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

If both files style the same thing in the same way, the later file usually wins. That order matters, and the cascade lesson explains exactly how the browser decides.

Common mistakes

Checking that your file loaded

Open DevTools (F12, or right-click the page and choose Inspect), then the Network tab, and reload. Find styles.css in the list. A status of 200 means it loaded. A status of 404 means the browser looked for it at the path you gave and found nothing.

Your first styled page

Put these two files in one folder and open index.html in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bakery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7am.</p>
</body>
</html>

body {
    font-family: Georgia, serif;
    max-width: 40rem;
    margin: 2rem auto;
    padding: 0 1rem;
    color: #2b2118;
    background-color: #fffaf2;
}

h1 {
    color: #8a3b12;
}

You now have a centred column of text with a warm colour scheme. Change a colour in styles.css, save, and reload to see the effect.

Summary

• HTML describes content; CSS describes how it looks.
• Browsers apply a default user agent stylesheet before yours.
• CSS can be added inline, in a <style> element, or in an external file.
• External stylesheets, linked with <link rel="stylesheet" href="...">, are the standard choice: one file styles every page and is cached.
• Use the DevTools Network tab to confirm a stylesheet loaded.

In the next lesson you will learn exactly how a CSS rule is written.