Code Highlights logo

Learn

Setup and Syntax

Great job! You're getting the hang of it.

Now, it's time to link your CSS file to your HTML document.

Linking your CSS file to your HTML document makes it easy to manage and maintain your website's styles separate from your HTML content.

To link a CSS file to an HTML document, you'll use the link element. The link element should be placed in the head section of your HTML document.

Here's an example of what the link element looks like:

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

Let's break down the link element:

  • href: This attribute specifies the location of the linked resource. In this case, we're linking to the ./style.css file.
  • rel: This attribute specifies the relationship between the HTML page and the linked resource. In this case, we're saying that the linked document is a stylesheet.

Instructions

1.

Let's link the stylesheet style.css to the HTML file index.html.
First, add a <link> element within the <head> section.

2.

Next, add the href attribute to the <link> element and set it equal to ./style.css.
Take a look at the web page in the browser to the right. Do you notice any changes yet?

3.

Finally, add the rel attribute and set it to the correct value. Keep an eye on the first paragraph's font—it should appear different from the destinations' descriptions when your stylesheet is linked correctly.

Sign up to start coding

Already have an account?

Sign In

Course content