Web Page layout using Styles
How to layout a web page using styles.
Using styles to layout a web page allows you to avoid using awkward tables. Also you can define the layout and appearance of your website from a single external file called a style sheet.
Divide the web page into blocks
First, we will define the areas of html code that we want to position on the web page. We do this using the "div" element and an "id" tag. For example, we might want to position navigation links, page content and a footer on the web page like this:
We group the html for each section like this:
Navigation links
</div>
<div id="content">
Page content
</div>
<div id="footer">
Footer
</div>
We will use an external Style Sheet to define the positions of these blocks of code on the web page.
Referencing the Style Sheet
The Style sheet is a simple text file with a name like styles.css
To reference it, we add the following line of code to the Head section of our web page code:
In the style sheet file we will add the formatting information that the web browser will use to display the web page. The format of this information is defined by http://www.w3.org in Cascading Style Sheets, Level 1 document. This is the most basic Style Sheet definition and should be supported by all browsers these days since it is now over 4 years old.
The Box Model
The box model is used in Style Sheets to define the positioning and appearance of parts of a block-level element such as our content area. The box model consists of some content such as text or an image spaced away from a border by padding. The border may not be present with a width of zero pixels. The border is then surrounded by a margin of transparent space which may also have zero width.
The property : value pairs of the box for each block are defined in our Style Sheet.
For example, if we want a content block with padding of 10 pixels and a border of thickness 2 pixels and a margin around the border of 5 pixels we might define it in the Style Sheet like this:
margin: 5px;
border: 2px;
padding: 10px;
font: 10pt verdana;
}
The # symbol defines a once-per-use id for an html element.
So using the box model we can position the content within a block.
Positioning Blocks
We are using the DIV element of HTML to define blocks of code. In style sheets, each block-level element normally stacks up vertically. This is a problem where we want our Navigation area to be to the left of the content area i.e. arranged horizontally.
To get around this problem we use the "float: left" property of the box model. This allows us to position our block to the nearest available left-most postion on the page e.g. above a previously displayed image such as a logo.
Using the "float" property takes this block outside the normal flow of blocks stacking up on each other so the next block will sit in the same vertical position. To stop the blocks overlapping, you need to specify the "width" of the floating block and set the "left-margin" property of the next block to be wider than the width of the floating block.
Finally, the footer will be a normal block that stacks up vertically above the last block.
Here is the code of the Style Sheet and the Web Page to achieve this result:
