Using CSS to layout your web page
Since tables are no longer used as a method of web page layout we have to find a way to divide the page into sections. Left-side, right-side, header, footer and so on. To do that, we will divide our page into, yep, divisions.
Divisions - Class and ID
Divisions are block level (X)HTML elements used to define sections of an (X)HTML file.
<div> your content </div>
These divisions are used to separate sections of your web page. See the example layout below.
The id attribute is identified by a preceding pound sign and can only be used in an html document once. Right-side, left-side and other divisions that are only going to be used once on a web page can use the #id attribute.
The class attribute is identified by a proceeding period and has unlimited use.
A web page is usually layed out in a 1, 2 or 3 column layout with a header and a footer. Each column is assigned a division and an ID.
For example, the html for a 3 column layout with a header and a footer would look like:
The html to layout your page
<html><head>
</head>
<body>
<div id="header">This is the header of your page.</div>
<div id="left-side">This is the left side of your page.</div>
<div id="right-side">This is the right side of your page.</div>
<div id="center">Well, duh!</div>
<div id="footer">yep, the bottom.</div>
</body>
</html>
As you can see, each division contains an id="". The id is controlled by the .css file that you attach to your web page.
The CSS
CSS page layout
The header of your page: The header spans the entire page, the font color is black, the background color is light gray and the font size is 60% larger than the text.
#header {width: 100%;
color: #000000;
background-color: #cccccc;
font-size: 160%;
}
The left side of your page: The left side panel floats left (the float attribute is important in CSS layout), the width is 16% of your page (160 pixels), the font size is 12 pixels, the font color is black and the background color is white.
#left-side {float: left;
width: 16%;
font-size: 12px;
color: #000000;
background-color: #ffffff;
}
The center of your page: Use the float left attrbute here also, the width is 66% (660 pixels), the text color is black, the text size is 12px and the background color is white
#center {float:left;
width: 66%;
color: #000000;
font-size: 12px;
background-color: #ffffff;
}
The right side of your page: The right side panel floats right, the width is 16% of your page, the font size is 12px, the font color is ba lack and the background color is white.
#right-side {float:right;
width: 16%;
font-size: 12px;
color: #000000;
background-color: #ffffff;
}
The footer of your page: The clear both centers the footer, the font is black, the background color is light gray and the font size is 11px.
#footer {clear: both;
color: #000000;
background: #cccccc;
font-size: 11px;
}
You can go to start learning html to learn how to save a .css file in Notepad.
This is the style sheet applied to the simple web page picnic tables.
The center division is the main body of your document or page. Add the css and the html to the web site that you created earlier. Once you have finished link to your .css file by placing this link in the head section of your web page.
<link href="yourstyle.css" rel="stylesheet" type="text/css" />
Creating your style sheet
To create a page menu