How to Attach a CSS Stylesheet to an HTML Document

Jun 6, 2021

1 minute

Linking a CSS file to an HTML file allows you update the styling of the HTML document by editing the CSS file. This is especially useful if, for example, you have hundreds of pages that you'd like to style from one central location. Using CSS, you can completely customize the look and feel of your website at once.

This is part of our series on using CSS in HTML, it includes other guides like this one on how to open the telephone app using an HTML link.

h/www • 5 guides

h/html • 4 guides

If you have multiple HTML files, you will need to complete these steps for each one.

In your HTML document, paste the following between the opening <head> and closing </head> brackets.

<link rel="stylesheet" type="text/css" href="X" />

^ The href="X" denotes the location of your file. There's a special consideration to make when denoting this location:

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

^ The denotation above suggests that inside of the directory containing your HTML file is a directory called "css" which contains a file called "style.css".

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

^ The denotation above (using a slash) suggests that the file style.css is located inside a directory in your root called "css".

<link rel="stylesheet" type="text/css" href="https://howchoo.com/css/style.css" />

^ The denotation above is a valid use of an absolute URL.

Save your HTML file and you're done!

NEXT UP

John (304)

Nov 19, 2020

2 minutes

This guide will show you how to properly commit and push your work in Git. It is assumed that you have Git installed and that you're currently in a clean master branch.

How to Attach a CSS Stylesheet to an HTML Document

Open your HTML file

Paste the following in the document's head

Save your HTML file