Tutorial: External style sheets



1. Introduction & Tools

2. How external style sheets and html work together and what each does

3. Linking the html and the external style sheet

4. A bit about writing css in an external style sheet

5. Putting the css into the html code

6. Page body & page backgrounds

7. Text

8. Text links

9. Image links

10. Borders

11. Containers (DIVs)

12. Simple Containers (DIVs)

13. A DIV inside a DIV

14. Container as rows or columns

15. Two columns

16. Three columns

17. More Tools for css

18. Validating and checking the code

19. Creating a site

20. Working with backgrounds: single DIV background page

21. Working with backgrounds:
multiple DIV backgrounds

Bookmark this page

How external style sheets and html work together and what each does:

how external style sheets and html work together
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:

  • for the layout of the page,
  • columns, rows,
  • backgrounds, borders,
  • link properties,
  • font styles and
  • other repititive design elements

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.


Go to page 3

Tutorial: External Style Sheets