XHTML and CSS - External Style Sheets
External Style Sheets
In this tutorial we are going to be looking at external style sheets, this is extremely useful because you can have one style sheet that you use across your whole website no matter how many pages you have. You might think why is this easier, one example would be that you have blue links on every page, say you wanted to change them to white, you would only have to change the color in one style sheet rather then on every single page. The first thing you need to do is create a style sheet so make a file called style.css and put it in the same directory as the page you're going to be adding HTML to. Next I'm going to add in some HTML so we can see this all working, I'm just going to add in a header.
<html> <head> <title> This is the title. </title> </head> <body> <h1>This is a header</h1> </body> </html>
Next we're going to add a style to our style.css file, so open that up and add the follow header style.
body { background-color: #222222; } h1 { background-color: red; color: white; }
If you view your HTML page at the moment you'll see that nothing has happened that's because we've not linked our style.css page in our HTML page yet. To do that we need to use link tags, not style tags like we was using before, for link we need 3 attributes these are the rel attribute witch we are going to set to stylesheet, the next attribute is type this is the type of file we are linking to we need to set this to text/css and finally the last attribute we need to set is the href this is the location of the file we are linking to, in our case it's in the same directory as our html page so set this to style.css.
<html> <head> <title> This is the title. </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>This is a header</h1> </body> </html>
Now when you view that page you'll see that the header has changed to a red background and white text like we set in our style.css file. Next I'm just going to add in another page to prove why this is useful so create a new file called page2.html and add in the following code.
<html> <head> <title> This is the title. </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>This is a header on page 2.</h1> </body> </html>
When you view the page2.html you'll see that the style is the same as it was on the first page.

Page generated in 0.0064 seconds.