How to insert External Style to a Web Page

Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it all in a separate text file. You then “tell” the browser where the text file is. The text file (along with its code) is then treated as though it were in the HEAD section. You set up an External stylesheet like this:



To embed a stylesheet the LINK tag is used. The REL attribute tells the browser that you want to link to a stylesheet; the TYPE tells the browser what sort of file is being used; the HREF attribute tells the browser the name of the file, and where the file is. (You haven’t done file referencing yet, so don’t worry about HREF for the moment.)

External stylesheets have a big advantage over embedded ones because they can be used for all the pages in your web site. All you need do is insert the LINK tag in the HEAD section of your website’s pages. With Embedded stylesheets, you would have to have the same STYLE code in the HEAD section of every page. External Stylesheets can save you a heck of a lot of typing (or copying and pasting).

External stylesheets are just text files, so you can write them in any text editor. Something like Windows Notepad is ideal. Here’s a screenshot of an external stylesheet written with Notepad:



Note that no TAGS are used in the external stylesheet. There are no <STYLE> tags or HTML tags, just the Selectors and their Properties and Values.

If you are using external stylesheets, you are not limited to only one. You can use as many external stylesheets as you need. All that is required is a different LINK tag for each stylesheet.

 

The CSS you have been using so far has been placed in the HEAD section of your HTML code. A better place to put all your CSS, however, is in an external file. (By this, we mean a separate file.)

In a new text file type the following (click File > New in Notepad, if you're using this):



This is going to be our external stylesheet. It has just one Class set up, a Pseudo Class for the hover style. Underlines are switched off when the mouse is over the link, and the text colour turns red.

The main thing to notice here is that we don't need any opening and closing STYLE tags: you just type your selectors and curly brackets.

Click File > Save in Notepad to save your work. When the dialogue box appears, navigate to your HTML folder and create a new folder called css. Move inside of this folder. In the File Name box, type styles.css. Make sure that Save as type read All Files, if you're using Windows. After you have saved your new document, your explorer window should look like this:



When you go one folder up to your HTML folder you should have this:



So that a web page can see our new external stylesheet, you need to add some code in the HEAD section.

Open up your about.html code. Add the following in the HEAD section:

<LINK REL = Stylesheet TYPE ="text/css" HREF ="../css/styles.css">

Your code should look like this:



To link to an external stylesheet, then, you start with the word LINK, after a left-pointy bracket. The other three attributes are these:

REL=
TYPE=
HREF=

The REL stands for relationship, meaning the relationship between this about.html file and the document you're going to be pointing to. REL can take many other values, but only Stylesheet is commonly used.

The TYPE refers to something called a MIME type. For stylesheets, you need the value "text/css".

The final attribute is HREF. This is the path to your CSS file. It is used in exactly the same way as for hyperlinks. Note the path for us:

HREF ="../css/styles.css"

The link is in the about.html page. The location of the stylesheet is one folder up, hence the two dots and the forward slash, followed by the folder name css. If our stylesheet was in the same folder as the about.html page we could have just done this:

HREF ="styles.css"

But save your work and load up your about.html page in your browser. Move your mouse over your hyperlink. If all went well then it should turn red, and the underline will disappear. If it doesn't, make sure your file referencing is OK, and that you have your stylesheet in the right place.

Placing all your CSS code in an external stylesheets is much better than placing it in a particular web page, as you can just make changes to the external stylesheet and it will affect the whole site. For example, if your H1 headings are all blue, it could take you many hours of work to change them to red, if you have placed CSS code in all the web pages. With an external stylesheet, you only have to make one change and your site is updated! So if you can, always use external stylesheets