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

Three columns

To set up three columns, start with the body background property in the external style sheet, then put in a container (to hold it all) and three columns. The outside container will width of the page, 950 pixels. Then inside of that, will be three columns: leftcolumn (200 pixels wide, floating left), centercolumn, and rightcolumn (200 pixels wide, floating right). Set the left and right columns to "absolute".

body {
background-color: #333333;
margin-top: 0;
margin-left: 0;
margin-right: 0;

width: 950px;
margin: 0px auto;
position: relative;
background-color: Black;

position: absolute;
top: 0px;
left: 0px;
width: 200px;
padding: 0 0 0 0;
background-color: #F0F8FF

#rightcolumn {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
float: right;
padding: 0 0 0 0;
background-color: Fuchsia;

top: 0px;
margin-left: 200px;
margin-right: 200px;
padding: 0 0 0 0;
position: static;
background-color: Blue;

Here's the css added into the html:

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


<div id="wrapper">

<div id="leftcolumn">
<div id="centercolumn">

<div id="rightcolumn">


Here's a screenshot of what it will look like.

three column example

Go to next page



Tutorial: External Style Sheets