HTML and CSS Reference
In-Depth Information
It is a mistake to assume that each page needs to be built differently. Using CSS, you can
create a page structure that contains all the necessary hooks. Think of placeholders in your
CMS or editable areas in a template on something like Dreamweaver, but use CSS to display or
hide sections depending on what type of page you are in. You specify the page type by using
an id or class attribute in the body element, which, through use of contextual selectors in the
CSS, affects the rendering of elements further down in the document tree.
Let's look at another example page. A corporate design, this page needs
A header, for branding and search
A breadcrumb trail
Left navigation
Content
A third column for related information
A footer that contains copyright information, back-to-top links, and so forth
This will be the default layout. Let's take a look at how that page could be built before we
start switching the layout. Here's the complete page—CSS first:
body {
margin:10px 40px;
padding:0;
text-align:center;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:62.5%;
}
#wrapper {
text-align:left;
border:1px solid #033;
position:relative;
font-size:1.4em;
}
#header {
background-color:#033;
color:#fff;
padding:10px;
}
h1 {
padding:0;
margin:0;
}
#breadcrumb {
background: #009F9F;
color:#fff;
padding:5px 10px;
}
Search WWH ::




Custom Search