Styles in the HEAD section are useful but if you want to style a whole site it is easier to have an external stylesheet. This is made up of styles exactly the same as those in the HEAD but they can be applied to many pages and not just one. This might be the hardest to get used to but it is also the most powerful.
First you need to create the stylesheet. Create a new file in your editor and call it myfirststyles.css. Now put this into it:
body {
background-color:black;
}
p {
color:white;
font-size:12pt;
}
You also need to tell the Web browser where to look for the styles when it loads your web page.
Open your second page from the HTML tutorial (page2.html) or any other Web page and save it as externalcss.html. View in a browser.
Put this at the end of your HEAD section but before the </HEAD> tag:
<link rel="stylesheet" type="text/css" href="myfirststyles.css" />
This creates a link to an external resource. The resource is a stylesheet in text. The href gives the location of the stylesheet.
Save this new file and then open it in a browser and you should see the page black with white text. You can apply those styles to other pages by adding the LINK element to them.
You might want to add the LINK element into your HTML template so it is ready to use. This template was created in the page describing the HTML HEAD element.
