Loading External CSS Files using the tag
In this lesson we will learn how to separate our CSS into separate files and load it using the <link> tag.
So far we have been putting CSS straight into our HTML files using the <style> tag.
However, we have seen that this has many disadvantages. If we have many pages on our site we have to copy the same CSS into every page. Then if we choose to change it we have to change it on EVERY page… and if we miss one then everything will look different on that page.
Use the buttons below to navigate through the lesson
It would be better if we could put all of our CSS in a separate file, then changing that file would automatically update every page on our site.
Luckily we can do this, using the <link> tag.
First, let’s move all of our CSS out of the <style> tag.
Copy all of the CSS and save it in a new Notepad document:
html { font-family: Arial; }
body { padding: 10px 30px; }
h1 { font-size: 1.8em; text-transform: uppercase; text-align: center; text-decoration: underline; color: white; background: black; padding: 10px 0px; }
h2 { font-size: 1.2em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color:purple; }
a:hover { color: orange; }
.important { font-weight: bold; color: red; }
Save this as “Site.Css” in the same folder as our HTML files.
Now remove the <style> tags from the <head> section in BOTH our HTML files.
Should become:
Once you have removed the <style> the HTML should look a lot shorter!
Let’s refresh our page.
Oh. That hasn’t worked – we’ve lost all our CSS styles!
Why is that?
It’s because even though we’ve put all our CSS into a separate file we haven’t told the browser that we need to load that CSS alongside our HTML.
We do this using the <link> tag.
Add this tag to your <head> section:
<link rel=”stylesheet” type=”text/css” href=”site.css” />
There are several attributes to the link tag.
The “type” attribute tells the browser what kind of information is contained in the linked file. In our case it is “text/css” because it’s a text-based CSS file.
You may recognise the “href” attribute from links you’ve seen on the <a> tag. This tells the browser where the link is located. In our case, we want to load “site.css”.
Finally the “rel” attribute tells the browser that what we are loading is a stylesheet that it should apply to the page.
Now if we hit refresh:
Everything looks just like it is supposed to!
Now we can change our CSS file, and update the entire site.
Try experimenting with editing the CSS in your file – space things out differently, change the colors, make it look however you like!