External Stylesheets

External Stylesheets As you can probably tell from the name this means having an external file and then linking to it from your page so you don't have all that code in your head tags in every single page. This is a lot easier than it may seem, first of all open notepad and copy the following code:

body {
background-color: #000000;
color: #FFFFFF;
text-decoration: underline;
font-family: Courier New", Courier, monospace;
}

When you have copied this into notepad, save the file as mystyle.css. (You may need to write "mystyle.css" for this to work). The *.css is important because you are saving this file as a cascading stylesheet and this is the file extension for these. Now you have this saved make sure it is in the same folder as your HTML page.

In your HTML page, inside the head tag, where we would normally put the <style type="text/css"> part of the code, instead of using this we will link to our already made external stylesheet. The code for linking to an external stylesheet is:

The only part of this code you will ever need to change is the href="mystyle.css" part (Location of the stylesheet). You will need to change the filename to whatever you have decided to call the external stylesheet, in this case its called 'mystyle.css' but sometimes the directory of the file may change, depending on where you put the file. This is the full example of what your HTML page will look like.

<html>
<head>
<title>External Stylesheet</title>

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

<body>
</body>
</html>

If you have done everything correctly then you will have linked to your external stylesheet which will have loaded the attributes:

body {
background-color: #000000;
color: #FFFFFF;
text-decoration: underline;
font-family: Courier New", Courier, monospace;
}

In every page you have linked to this stylesheet the background colour will be black, the font colour will be white, ECT. This is much easier than writing all the CSS in the head of each page.