Click Here
for FREE
Web Hosting!

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

Great Gift Ideas

Recommended Resources

web hosting tutorials
Credit Help

Search the Internet
Search Engine Help

Low Fat Lifestyle
Internet Traffic

Web Hosting
Web Design

Discount Hotel Reservations

Search The Internet

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained. About the author

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

Great Gift Ideas

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