Complete CSS Example and Page Template

Structure of the document

<div id="frame">
    <div id="header"> </div> 
        <div class="logo"> </div> 
        <div class="sitetitle"> </div> 
    <div id="sidebar"> </div> 
    <div id="content"> </div> 
</div>
<div id="footer"> </div>

The frame divider holds: header, sidebar and content.
The header divider holds an image and the title of the site.

First level IDs

1. frame, the page is stored inside a centered frame.
2. footer, bottom of the page, usually displays a copyright.
   

Second level

Inside a container we can define other dividers.

1. header, top of the page, may hold a logo, a title, etc...
2. sidebar, left panel to store links to other pages.
3. content, the body of the page. May be the only part of page that change from page to page.
   

Third level

In this example, we have defined two dividers inside the header.

1. logo, the image at left.
   We have to define the height and the width in the stylesheet (defaults are 0).
2. sitetitle, le titre de page.
   The stylesheet define the font and its size, the position.