Tutorial: External style sheets
1. Introduction & Tools
How external style sheets and html work together and what each does:
To see this page live, go to http://www.anniemation.com/cats/cats1.html
For each web page, there will be two files created:
1. The html file:
for the text and images in the page
2. The external style sheet:
Below is an example of the difference between the same bit of text written in html and using a css class.
A font in bolded, italic red Arial in an html document would require the following code each time that font was used:
"<font color="#CC0000" face="Arial, Helvetica, sans-serif"><b><i>An example</i></b></font> "
In css, you can set up these text attributes one time inside the style sheet, then apply it to the html each time you need it. It will end up being something much shorter like
"<p class="arialib">An example</p> "
Imagine how much less code is required overall and the download time saved by Putting all the design elements (fonts, borders, colors, margins, padding . . .) into the external style sheet. This is a much more elegant, simple and code-saving way to construct a web page.
You can link one style sheet to any number of web pages. Therefore if you decide to change something, for example you decide that you don't like the color of the header text you chose, you can change one thing on the external style sheet and it will change across all the pages it is linked to.
Tutorial: External Style Sheets
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK