Skip navigation.

Crafting Lightweight Page Templates with CSS

By Milan Negovan

Published: 9/19/2004 | Updated: 9/21/2004
Print articlePrint Download sample codeDownload
Giving your web application a consistent look and feel is a task of paramount importance. Yet, templating in ASP.NET has been complicated, to say the least. Learn how you can craft lightweight, efficient page templates with CSS.

Unfortunately, building page templates in ASP.NET has never been easy. There are several solutions to this tricky problem, but they all either involve complex inheritance with some page build-out mechanism (which is what I utilize on this site), or they put to work HttpHandlers and HttpModules and load server controls on the fly. All this is beyond the grasp of a novice developer.

There's an effective approach to building lightweight page templates. This approach requires no advanced ASP.NET skills. I didn't invent it. In fact, I think I first saw Doug Bowman use it, and then read about it in Dan Cederholm's book Web Standards Solutions. I know Mark Pilgrim has used it, and so has Ian Hickson.

By the time we're done you'll be surprised ASP.NET has very little to do with it.

<body> Styling

The idea is quite simple: we can assign the good ol' <body> element an id and a class. Next, we build a generic page template and write CSS rules that cater to each body style individually.

An example will help clarify my point. Let's create a bare-bones web log for a fictional personage, Mr. Hugh Jass. We'll create three simple pages: Home, Contact and About and fill them with Lorem Ipsum text. I've used my own web form template generator to create each one. The "blog" has no artistic value; I've thrown in just enough CSS to back up my point.

The structure of each page is the same (since we're developing a template):

<html>
...
<body>
  <div id="masthead">...</div>
  <div id="leftcol">...</div>
  <div id="rightcol">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>
</html>

You see a header (masthead), footer and three columns. We'll establish up front this much: some pages will show all three columns, others—two. We'll remember to assign each <body> element a corresponding class.

<body class="twocolumns">
...
</body>

Or

<body class="threecolumns">
...
</body>

On a three-column page I float the left and right columns and squeeze content in between:

#content {
    background: #eee;
    padding: 0 2%;
    margin-left: 25%;
}

#leftcol {
    width: 20%;
    float: left;
    padding: 0 2%;
}

body.threecolumns #rightcol {
    width: 20%;
    float: right;
    padding: 0 2%;
}

body.threecolumns #content {
    margin-right: 25%;
}

The left column will always be there (in our imaginary blog). Both columns are given a 20% width with content taking up the rest. Note the body.threecolumns #content selector. The entire rule is applied to #content within a <body> of class threecolumns:

<body class="threecolumns">
 ...
 <div id="content">...</div>
 ...
</body>

The Home page of our blog has all three columns.

On we go to a two-column page. The About page is built this way. We simply use the CSS display property to hide it and adjust content to stretch and take the rest of the space:

body.twocolumns #content {
   margin-right: 2%;
}

body#contact #footer {
    display: none;
}

The Contact page is a modification of a two-column page. It shows no footer. By this I wanted to demonstrate that in addition to assigning <body> a class you can also take advantage of its id:

<body id="contact" class="twocolumns">
...
</body>

The CSS rule that hides the footer on this page only (!) is shown below.

body#contact #footer {
 display: none;
}

Done and done.

class or id?

If you research this subject on the web you'll see different opinions on whether to assign <body> an id or a class. I'll throw my opinion into the mix.

I give <body> an id only if I want to make a modification that is catered to that page only. If a modification is of a generic kind (such as hiding a column, which is done on a number of pages) a class is more appropriate. You should choose whatever works better for each project and go with it. There's no crime in using only classes or ids.

visibility or display?

Another tricky question. The CSS display: none declaration generates no element box, i.e. the hidden element "disappears" and takes no space. On the other hand, visibility: hidden does generate an element box and takes space, even though you don't see the element itself.

Since we needed to hide the right column completely—and couldn't afford having a gaping hole that visibility produces—I chose display.

Spicing Up the Template

If you download the code you'll see ASP.NET really played no part here! It's all HTML and CSS. You can take it from here and wrap the masthead into a user control, for example. Have it produce a consistent header with a logo and navigation. You can wrap the footer into a user control as well. Finally, you may have other static content or database-driven custom server controls to do heavy lifting. Plug them in where you see fit.

Conclusion

Templating with CSS is an approach that is easy to master even by novice ASP.NET developers. Of course, it has its own shortcomings, but so does every templating solution out there. I hope I taught you a new way to leverage (such a popular term these days) the power of CSS!

Discuss

Liked it? Hated it? Discuss this article