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
14. Container as rows or columns
18. Validating and checking the code
20. Working with backgrounds: single DIV background 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;
}
#wrapper
{
width: 950px;
margin: 0px auto;
position: relative;
background-color: Black;
}
#leftcolumn
{
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;
}
#centercolumn
{
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>
<title></title>
<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">
</head>
<div id="wrapper">
<div id="leftcolumn">
<p> </p>
<p> </p>
</div>
<div id="centercolumn">
<p> </p>
<p> </p>
</div>
<div id="rightcolumn">
<p> </p>
</div>
</div>
</body>
</html>
Here's a screenshot of what it will look like.
Tutorial: External Style Sheets
www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK