Back to Unit 6

Unit 6 Website Development - Tutorial 1

1.6 Link an external CSS file to an HTML page

Learn how to connect a CSS stylesheet to an HTML page using the link element.

Why Link CSS

An external CSS file keeps styling separate from page content. This makes the HTML easier to read and lets the same stylesheet control several pages.

The stylesheet is usually linked inside the <head> section of the HTML page.

HTML Link Example

If your CSS file is called style.css and is in the same folder as your HTML page, use:

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

If your CSS file is inside a folder called css, use:

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

Full Page Example

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Coding Club</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>School Coding Club</h1>
</body>
</html>

Build It Yourself

  1. Open the same unit-6-website folder.
  2. Open index.html, about.html, timetable.html and contact.html. These pages should already have a complete <head> section from the previous sub-tutorial.
  3. Add the <link> element inside the <head> of each page.
  4. Add the simple CSS rule below to css/style.css only to test that the link works. Tutorial 2 will replace this with proper styling.
body {
    background-color: #f2f6ff;
}

Common Mistakes

Success Checklist