Add CSS to an HTML document
Tags: html, codenewbie, learning
Published: 2020-10-13 17:09:36

---
title: Add CSS to an HTML document
published: true
date: 2020-08-16 00:00:00 UTC
tags: #html #codenewbie #learning
canonical_url: https://blog.jordanholt.dev/link-css-to-html-document/
---

There are a number of ways to apply CSS to an HTML document but in this post we’ll look at oneof the most commonly used methods - linking.

### Create an HTML document

First off lets create a basic HTML document. This file will be called `index.html`. The filename extension `.html`indicates that this is an HTML file.

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to add CSS to an HTML document</title>
</head>

<body>
    
    <h1>Learning CSS is fun!</h1>

    <p>This is a regular paragraph. We can add some text here that we can later style in our CSS.</p>

    <ul>
        <li>Step 1: Create an HTML document</li>
        <li>Step 2: Create a CSS style sheet</li>
        <li>Step 3: Link the CSS style sheet to the HTML document</li>
        <li>Step 4: Enjoy our <em>awesome</em>styles</li>
    </ul>

</body>

</html>
```

If you were to load the `index.html` file into a browserit would look fairly plain at the moment. It would look something like this:

[![unstyled html](https://blog.jordanholt.dev/static/cdbb0534cc290f9706f0bd7b928f8433/1c72d/plain-html.jpg "unstyled html")](/static/cdbb0534cc290f9706f0bd7b928f8433/8608d/plain-html.jpg)

### Create a CSS style sheet

Let’s create a CSS document and add some basic styles. In the same folder we created the `index.html`we will now create a file called `styles.css`.  
Once that’s been created we can open the `styles.css` file and add the following styles.

```css
body {
    background-color: #FF9F1C;
}

h1 {
    font-size: 5vw;
}

ul {
    list-style: none;
}

```

### Add the CSS to the HTML document

Now that we have a couple of basic styles we can apply these to out `index.html` document.

In the `<head>` of the `index.html` document add the following line of code.

```html
<link rel="stylesheet" href="styles.css">
```

The `<link>` element allows us to link external resources like stylesheets to our documents.If we now load the `index.html` document into a browser you should see that our basic styles have beenapplied.

It should look something like this:

[![styled html](https://blog.jordanholt.dev/static/c238d7f58d3f03cfc338de32c5ff4f3e/1c72d/styled-html.jpg "styled html")](/static/c238d7f58d3f03cfc338de32c5ff4f3e/a1517/styled-html.jpg)

If you’ve been following along on your own computer and your styles haven’t been applied after you addedthe `<link>` element to the HTML document double check that there are no typos. Also make sure that your CSSdocument and your HTML document are in the same folder.

## Wrap up

In this post you saw how you can link a CSS document to an HTML document using the `<link>` element and appliedsome basic styles. This isn’t the only way to apply styles to an HTML file but it is a very common approach thatyou’re sure to see in many projects.

Make sure to check out the [MDN article on the link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) for more information.