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
