With internal CSS we really made our CSS code easier to use, but there is one big problem. All of that CSS was saved onto one HTML file and so only covered that one web page.

It’s likely that your website will be made up of many pages and so you don’t want to copy your HTML to every page.

As we talked about before, this makes your code difficult to understand and makes changes really painful.

Ideally, all of your CSS code for your entire website would be in one place or at least in a place where each HTML file can use it.

This is where external CSS comes in.

With external CSS, code is saved in a CSS file which is then used by any other HTML files that need it. This could be one HTML file or a few or all of them.

CSS files contain the CSS code for styling your website and are saved with file names with end in .css. This .css tells the computer to expect CSS code inside. To use external CSS, all you need to do is tell your HTML file to look for the CSS it needs in a particular file.

I can find Aria even when she hides in the long grass

Just like with internal CSS, to use external CSS you need another HTML tag. This time you need the link tag which is similar to the a tag used when created links between web pages; it’s a different type of digital cat flap.

The link tag looks like this.

        <link>
      

Remember, HTML elements which contain something have both an opening and closing tag, but elements which determine what something is, like the img tag, only use the opening part.

So far the code isn’t very useful. Why do you think that is?

Aria trying to sniff those sausages from her bed

The link tag shown before is pretty useless. It doesn’t tell the web page what to look for or where to look or what to do with it once it has found it.

So what is the web page looking for?

Well, it’s looking for a CSS file, so let’s tell it that. This is done using a HTML attribute called ‘type’.

The ‘type’ attribute is used just like any other attribute with an = sign and the value given in between “ “ symbols. Here is an example:

        <link type=”text/css” >
      

In this case we are tell the HTML file to look for a file with text in it and that the file will have CSS code in it. But the web page still does not know where to look.

Do you remember the href attribute from when we looked at creating links in HTML with the a tag?

Well the href attribute told our web page where to look for a new web page file. This attribute can be used again here. With the href attribute we are telling the web page exactly where to look for the CSS file.

Here is an example:

        <link type=”text/css” href=”css/main.css” >
      

So what can we tell about the CSS file we are trying to find?

To try and organise your files, it’s a good idea to keep your CSS files in a separate folder. In this example, this folder is called ‘css’ but you might want to call it ‘style’ or ‘styling’ or anything you like really.

By now, our web page knows what is in the file we are linking to and where the file is, but it still doesn’t know what to do with it.

With the rel attribute, you are telling the web page what its relationship with this new file will be.

In this case the relationship means how they are related in terms of making a complete website. We need to tell the web page to use this file to style its own HTML elements.

Can you guess what goes in the attribute value? I’ll give you a clue; its one of the words which makes up CSS.

        <link type=”text/css” href=”css/main.css” rel=”stylesheet” >
      

So with the last part we have told the HTML file to use this file, main.css, as a stylesheet. In other words, the file will look in this location for a file to use for its CSS.

The great thing about this is many different HTML files can reference the same CSS file to apply the same styling to each page. This is pretty convenient for a number of reasons.

Using external CSS, your styling across all of your pages could be in the same place, so if you wanted all of your text to be a different font you only need to change the code in one place. Updates and changes to your code are so much easier to manage.

Arranging your CSS in this way also makes your code simpler to read. You can quickly see what CSS is applied to numerous pages and this code could all be in one place. While it means you could have one large CSS file, at least multiple HTML files can use it.

With external CSS, adding new HTML files and keeping the same styling becomes straightforward because all the CSS is already done.

Lots of HTML elements can use the same class and so as long as the CSS for that class is accessible, adding and changing CSS becomes so much easier. External CSS is a great way to do this.

Going back to our flea treatment example, this would be like making an enormous batch which supplies numerous vets. Changes can easily be made to the big batch of treatment and then sent to each vet and if a new vet needs the treatment for some cats they can use the batch too.

With the code below, try changing the file name to change the styling of the following elements. See what it looks like with grey.css, green.css and any others you can find.

        <link type="text/css" rel="stylesheet" href="" >
      

Now we have looked at all of the different ways you can add CSS to your web page, let’s start having a closer look at some CSS properties you can use to customise your website.