Continuing with CSS and internal style sheets
Over the past few classes you’ve created internal style sheets that control how a single webpage looks. You’ve formatted your text, headlines, and links, and also learned how to make an image as a background for your webpage.
Using CSS to create a layout for a webpage
You can also use CSS to create a layout for your webpage. For example, our class website has a two-column layout with a header. The left-hand column is bigger than the right-hand column. Basically you can use CSS to create distinct, separate areas on your webpage for your content. Another example: The school district website has a three-column layout with a header, with the left and right-hand columns the same size and smaller than the center column.
We’re going to create a new page with a CSS layout.
1. Copy and paste the following into Notepad:
<html>
<head>
<title>Three Column CSS Layout</title>
<style type=”text/css”>
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
#left {
position: absolute;
left: 5px;
padding: 0px;
top: 0px;
width: 150px;
}
#center {
margin-left: 200px;
padding: 0px;
margin-right: 200px;
top: 0px;
}
#right {
position: absolute;
right: 15px;
padding: 0px;
top: 0px;
width: 150px;
}
</style>
</head>
<body>
<div id=”left”>
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
</div>
<div id=”center”>
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>
<div id=”right”>
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
</div>
</body>
</html>
2. Please save this as csslayout.html in your folder.
3. Open up the file in Firefox so you can see how it looks.
You will notice there are three distinct areas- a large middle section and two smaller, equal-sized left and right sections.
4. Check out the div tags in your Notepad file
Notice there are three <div> tags in your <body> section. They say <div id=”left”>, <div id=”center”> and <div id=”right>. They correspond to the code in your internal style sheet in the <head> section- #right, #center, and #left. That code is basically saying where each section will be located on the page and how big each section will be.
5. Start changing the text and adding some content
Delete the text in the <body> section and type your name. Start experimenting to see how things look. Add an image from your folder. Add a link. Embed a video. Pay attention to how large each section- see the width information in your style sheet. You can change the width if you’d like.
Your content should not be bigger than the width of your section. For example, the left and right sections are 150 pixels wide, so you don’t want to embed a video that is wider than 200 pixels or add an image that is larger than that, either. If you change the size of the left and right sections you might also want to change the margin size in the center section as well so there is some buffer space between your content areas.