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:
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.
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: