LESSON 3.04

Attaching an External Stylesheet

The professional way to style your website

Learn how to link a separate CSS file to your HTML pages so you can control the look of your entire site from one central place.

💡 The Concept

The standard approach for styling a website is to link an external CSS stylesheet to your HTML — one file that controls the look of every page. In the last lesson you learned there are three ways to add CSS to your HTML: inline, embedded, and external. External CSS is the method professionals use every day. This lesson covers how to create a stylesheet and attach it to your HTML page.

Creating Your CSS File

An external stylesheet is simply a plain text file with a .css extension, usually named style.css. You create it the same way you create an HTML file — open your text editor, create a new file, and save it in the same folder as your index.html file. Inside, you write CSS rules using the standard selector, property, and value format:

h1 {
  color: navy;
  background-color: lightyellow;
}

Notice there are no <style> tags in a .css file — just pure CSS rules.

Linking the Stylesheet to Your HTML

Once your CSS file is created, you connect it to your HTML page using a <link> tag inside the <head> section:

The <link> tag tells the browser: “Go find this CSS file and apply its styles to this page.” The rel="stylesheet" attribute specifies the relationship, and the href attribute points to the file location.

If the CSS is not in the same file as the HTML, how does the browser know where to find it?

The files are linked together in code. The code references the other files based on their location in the file structure. 

Graphic showing files in a website folder. The index.html and style.css files are in the same folder, so can be referenced with href="style.css".

The Power of External CSS

This is where external CSS gets powerful: you can link the same CSS file to multiple HTML pages. If your website has an index.html, an about.html, and a contact.html, all three can share one style.css file:

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

Need to change the heading color across your entire site? Update it in one place in the CSS file and every page reflects the change instantly. This is a huge win for maintainability.

When to Use External CSS

Almost always. External stylesheets are the industry standard because they:

  • Separate content from presentation. Your HTML stays clean and focused on structure.
  • Enable reuse. One stylesheet can serve an entire website.
  • Simplify maintenance. Change styles in one file, update every page.
  • Improve performance. Browsers can cache the CSS file, so returning visitors load your site faster.

🎬 Video Demonstration

In this video I demonstrate how to add an external stylesheet to a real website project:

Exercise: Try It Yourself

This exercise uses a real text editor and actual project files — external stylesheets cannot be tested in JSFiddle because they require two separate files. If you are following along with the course template from a previous lesson, use that folder. If you are working on your own project, the steps are the same.

Step 1. Open your project folder in your text editor. If you are using the course template, this is your template folder.

Step 2. Create a new file and save it as style.css in the same folder as your index.html.

Step 3. Open your index.html and locate the <head> section. Add this line inside it:

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

Step 4. Test the connection by adding this rule to style.css:

body {
  background-color: pink;
}

Save style.css, then open index.html in the browser. If the background turns pink, the stylesheet is connected correctly.

❓ Frequently Asked Questions

Does the CSS file need to be in the same folder as the HTML file?

No, but keeping them in the same folder is the simplest setup for small projects. If the CSS file is in a subfolder, you adjust the href path accordingly. For example, if your stylesheet is inside a folder called css, the link would be <link rel="stylesheet" href="css/style.css">. As long as the path in href matches where the file actually lives, the browser will find it.

What if the browser cannot find the CSS file?

The page will load without any of your styles applied. The browser will not show an error on screen — it simply skips the missing file and renders the HTML with default browser styles. If your CSS does not seem to be working, check the href path in your link tag first. A typo in the filename or folder path is the most common cause.

Can I put my CSS file in a subfolder?

Yes. Many projects organize files into folders, for example putting all stylesheets in a folder called css. You just need to reflect that path in the href attribute: href="css/style.css". The path is relative to the HTML file, so make sure it accurately matches where the CSS file lives in your project.

Do I need to add the link tag to every HTML page?

Yes. Each HTML file needs its own link tag in the head section to connect to the stylesheet. The good news is it is always the same line of code. If your site has ten pages that all use the same stylesheet, each page simply has one line linking to style.css. That is still far less work than copying your CSS into every page individually.

What does rel=”stylesheet” mean?

The rel attribute stands for relationship. It tells the browser what kind of file is being linked. The value stylesheet means this is a CSS file that should be used to style the page. Without rel="stylesheet", the browser does not know what to do with the linked file and will ignore it. You will always need this attribute when linking a CSS file.

★ Key Takeaways

An external stylesheet keeps your CSS in its own file, separate from your HTML. This lesson showed you how to create a .css file and link it to your web page with a single line of code. Next, you will learn about CSS colors, including color names, hex codes, and RGB values. Color is one of the first things visitors notice about a website.

Next Lesson: CSS Colors: Names, Hex, and RGBA

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons