Break the `<FONT ...>` Habit: External Style Sheets

In the first example we set the styles rules inside a <STYLE ...> tag which was inside the <HEAD> section. That allows us to set a rules for the entire page. However, for even a small web site it gets tiring setting rules for every page. For that reason styles allow you to create a set of rules in a separate file and then load those into each page. External style sheets allow you to set all the rules for the entire site in one place, giving your site a consistent look across all the pages.

For example, create a text file called mystyles.css. Type this styles code into the file. Notice that this code does not have the <STYLE ...> tag in it:

H2
   {
   color:red;
   font-weight:900;
   font-family:sans-serif;
   }

These styles can be loaded into a web page with a <LINK ...> tag. In <LINK ...> set REL to STYLESHEET and HREF to the name of the file that has the styles rules (in this case mystyles.css). Set TYPE to TYPE="text/css" to indicate that we are loading a CSS stylesheet.

<LINK REL=STYLESHEET HREF="mystyles.css" TYPE="text/css">

When the browser sees the <LINK ...> tag it will download the file and apply the styles to the page. So in our example an <H2 ...> element gets the styles:

<H2>Great Gift Ideas</H2>

which gives us

Break the <FONT ...> Habit: External Style Sheets

Great Gift Ideas

Break the `<FONT ...>` Habit: External Style Sheets