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

Linking the HTML and the External Style Sheet:

In the <head> part of your html document under the metatags, you will link to the css document. Here is the line of code in the image example below:

<link rel="stylesheet" type="text/css" href="your-style-sheet.css" media="screen">.

You also need to tell the browser what type of html page it is so another tag is required - the "DOCTYPE". It will be the very first line in your html page. Here is the one I use: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">. This says that the page uses HTML version 4.01. This is the one we'll be using for this tutorial, you can read more about them at wc3.org.

putting the DOCTYPE into the html

Later you will set up the css properties (DIVS and classes) inside the html - more about this later. First we'll set up some css in the external style sheet.





Go to next page



Tutorial: External Style Sheets