Logical issue - css properties placement

Hello all,

I’m having this issue here and I can’t understand properly what do you commonly do.

We have an element A, let’s say DIV A with some styles applied on a HOME PAGE.

We have that same element A, with the same styles applied (but with a minor differences) on SECONDARY pages.

What do we do? Should we have two times this element styles on our css? One for home and another for the secondary pages?

Thanks in advance,

You could give the <body> a class and then differentiate :slight_smile:

.home #container{}
.about #container{}

Set up page specific styles :slight_smile:

But that way I would duplicate almost every style of this item for each page or I’m I missing something logical ?


What you can do is declare the styles that apply on all pages once in


and then declare just the styles that are unique to specific pages with these:

.home #container{}
.about #container{}

When I say logical I really mean it. sorry.
I’m getting now.

Btw, is it like this that you gurus normally do it?
Do you apply a class of each body element and that element will have only the differences on a specific page class?

Thanks in advance,

I see. I will need to create a layout on a mvc structure, and of course have some views etc… and the way we organize the css should play a role yes?.
The idea of organization given here seems to be quite interesting.

Any other suggestions would be more then welcome.

Thanks a lot,

I do this a lot, but only if it’s needed. Mind you, I use this technique on most sites because it’s handy for getting a page’s menu link to be highlighted when you are on that page… so it has multiple uses.

(I thought I’d answer this question, even though you directed it to “gurus”! :lol: )

Heh heh, “MVC structure”, “views”? We don’t speak that language here in the CSS forum. :wink: I’m not sure if MVC and CSS are logically linked (I’ve only dipped the tip of my toe into PHP frameworks), but certainly CSS plays a role in how you organize things.

It’s the safeste way. You could give the #container element a class instead of the body and reference it via #container.home{} but IE6 is buggy with that and it’s best to identify pages via a class on the body.

Besides server side options of course :slight_smile: