So excited to share with you how to Link HTML files to Stylesheet CSS files! One of my most favorite parts about building a webpage is styling it with Cascading Style Sheets, or CSS. The CSS of a webpage is what allows you to give your <div>’s color, images, sizing, fun fonts, etc. You can add background images, make your <div> a square filled with a hot pink background and more.
It’s the best!
When I first taught myself HTML and CSS, I had SUCH a hard time figuring out how to link my CSS file to my HTML file. So I wanted to share with you how I do it.
First things first, let’s create a CSS file! This is where you will be styling each element in your HTML file. It helps to keep your HTML file nice and neat – you don’t want your code cluttered with styling!
Adding a CSS file is a great way to have clean, efficient code.
Creating a CSS File
Start by opening a new tab or file in your code editor. Now, save this page as stylesheet.css – the ‘.css’ identifies this file as a CSS file, similar to how your index.html file’s ‘.html’ indicates that that file is an HTML file.
Next, and super importantly – save your .css file in the same directory(or folder) as your index.html file.
You’ll see in the example above, I’ve saved my stylesheet.css file in my New Website folder – the same folder as my index.html file! This helps your computer know where to look for the sheets you are linking together! If you had multiple files elsewhere on your computer called stylesheet.html, your computer would automatically default to linking to the one in the same folder as the index.html file you are adding the <link> tag to.
Linking CSS file to HTML file
Once you’ve created your CSS file(where you will style your HTML), it is time to link it!
Head back to your index.html file, and add the following code in between the <head> and </head> tags.
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
Let’s break it down:
<link> tag = tells your file that you are linking to another external file or element
rel = relationship between your current file and what you are linking to – here, the relationship between index.html and stylesheet.css is that the latter is the formers “stylesheet”
type = what type of file will you be linking – here we are linking text/CSS or text to CSS
href = or hypertext reference is a super important attribute that we will learn more about when we start to add videos and images to our <div>s. Href indicates the URL or hypertext(filename) that we are linking to. In this case, we are linking to a file called “stylesheet.css”
Once you’ve linked your stylesheet file to your HTML file, you are ready to start styling!