Setting Up Your CSS File via the Link Tag
As indicated in our basic HTML5 Page tutorial. there are two main ways of including a stylesheet on a page.
Page Specific CSS?
The first is in between <style> </style> tags within your <head> on your page. The main downside to doing it this way is that you have to repeat that CSS on subsequent pages. This either gets very dull, or you have to have a great memory. It can also lead to different pages containing different stylesheets, which gets very messy. And on complex sites, having that much code in the <head> becomes unmanageable.
Now you can sometimes have page-specific CSS, but your layout can become inconsistent between pages. So if you have page elements specific to a page, then you can consider using the style tag, but for your overall site look and feel there is a better approach.
The <link> Tag
There are a lof of HTML5 Tags which go inside the <head> section of your code. One of these is the <link> tag which follows this syntax:
<link href="http://www.example.com/css/stylesheet.css" rel="stylesheet" type="text/css">
- No Close Tag: the
<link>tag requires no</link>tag, so don’t use it! - href: this is either the full, or the relative path, to your css file. If you’re testing your site on your hard drive then you can use the path relative to your
.htmlfile or the full directory route. - rel: for Stylesheets this will always be
rel="stylesheet" - type: for stylesheets this will always be
type="text/css"– this refers to the MIME Type (confusingly stands for Multipurpose Internet Mail Extensions (reference). A CSS file is a sub-type of a text file.
Why Use a Link Tag for CSS Files?
Creating one file away from your HTML files means you can create just one location that all your CSS is found in. It means you only need to copy the same <link> tag on all your pages. No confusion as to whether you’ve copied all your CSS from page-to-page. It keeps things simple and straight forward – once you update your .css file, then all your pages will reflect your new design rules.
CSS File Extension
Although these tutorials are ultimately geared for CSS3, when you save your code ready for putting into your HTML, then ensure that you save it with the extension of .css. This will help you see quickly which files contain your stylesheets and, if your code editor uses syntax highlighting your editor will recognise it as CSS and will apply the appropriate colour scheme to help you edit.
TL;DR – External CSS Files and the Link Tag
Having one stylesheet file to govern your site helps you to have consistent colours, layout and fonts across your whole site. Create your .css file and add a <link> tag pointing to this file in the <head> section of all your pages and you’ll be off to a flying start!
More CSS3 Tutorials
Spread the Word
