External
Sheets part 1External
Sheets part 1
This page doesn't have a cascading style sheet in its <HEAD> section. Instead it has this statement:
<link REL="stylesheet" HREF="MyStyles.css">This brings in a style sheet from a separate file called "MyStyles.css" (incidentally, the '.css' filename extension is merely a convention - the external sheet is just a plain text file, and you can call it .txt, .htm or whatever). Here are the contents of the external file:
H1 {color:blue; font-size:36pt}
H2 {font-family: Arial; color:blue}
There's no need to include <STYLE>....</STYLE> tags, although you can if you wish. As you can see below, the style rules are applied exactly as if they'd been included in an in-document sheet. You can, in fact, use both external and in-document sheets in the same page - click here to see how it's done.
You can link an external file into as many pages as you wish, which makes them very powerful. For example, by creating an external sheet like this:
BODY {background-image: url(MyBack.gif); font-family:sans-serif}
then linking it into every page in your site, you can set the entire site's page background and basic typestyle. If you wanted to change the site's standard page background image, you'd just need to edit the style sheet file and upload the new version to your server. The pages themselves wouldn't need any modifications or uploads.