Methodology for styling unique pages

I’m currently working on a website that requires a unique layout for each page (about 10 pages). The basic structure involves 3 columns but which column the content goes into and the widths all vary. What I’m wondering is what the best way to approach this would be. Thanks.

In each page put a unique id on the body tag. Then in your external style sheet you just say

#index #column1 {}
#about #column1 {}

Or override it by simply putting the CSS in the head below the external CSS link. The first cleaner.

That’s actually what Ive been doing thus far. It feels like I’m adding a lot of bloat to the css, and that’s something I really hate. I was just thinking maybe there was a different solution to the problem that I haven’t thought of yet.

The project description is a bit vague, but what you are saying can apply to any site and is in fact the beauty of css.

First off, any good web design assumes the content ( or at least the amount there of) will vary… greatly, thus making this project different from any other.

Now, if what you are saying is you have something like the following:

PAGE1:
HEADER
|navigation | Content| Sidebar|

PAGE2
Header ( diferent height)
|Sidebar|navigation | Content|

PAGE3
Header ( diferent height)
navigation |Sidebar| Content|

and so forth…

the the solution is still simple.

  1. Separate your css rules into content styling and structure styling.
  2. Add an ID or class to the body tag to indicate each page
  3. As always, in your markup your structural elements will be labeled with IDs and will remain the same through the site
  4. create the different structure possibilities (header/ |nav|main cont| side bar|, or small header/ content|nav |side bar) so forth; in front of each rule ad the ID for the page. It would look something like this

#home #hed { height:200px;}
#first #hed, #about #hed, #yard hed { height:50px;}
#faq #hed, #waitdontgo #hed, #last hed { height:100px;}

In this way you can reposition your structure in one stylesheet for ease of management.

It’s not CSS bloat, worse would be to add a server request for each page… when the only thing you are changing are column orders or section heights, or bg images