Tutorial: External style sheets

Contents

 

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

Containers (DIVs)

I've found naming things after what they are (or do) is a really good practice, thus I call the DIVS "containers". Containers here will mean any kind of "holder" that seperates things within a web page. That must sound extremely simple but this - I think - this is where a lot of people get confused with css and stylesheets. Containers (DIVS) ARE very simple and have a lot of different, practical uses on a web page. They can show important text in a different background color. They can define a different font for an area. Containers can also become columns and rows. It's all about how they are defined in the external style sheet and how they are put into the html that makes them do what they do. It's also possible to use many containers (DIVS) within one web page and put DIVS inside of other DIVS.

They are a DIV and written in the external style sheet like so:

#container
{
whatever properties you want to have
}

Notice that they begin with a # in the external style sheet. That's important.

The html with this would look like the following. Notice that they have to be closed with a </div> tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>one column example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="column-example1.css" media="screen">
</head>
<body>

<div id="container">


<p>This is an example of how to write a DIV into html.</p>

</div>

</body>

</html>

Go to next page

 

Tutorial: External Style Sheets

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK