homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Are conditional statements allowed in CSS
Or am I barking up the wrong tree?

 7:57 am on Apr 5, 2003 (gmt 0)

Hello All.

I am building my first web site using an entirely CSS based layout.

Index [and several other] page[s] take the format: Banner,Left/centre/right columns, footer.

However, some pages do not need a three column layout and I want to remove the extreme right column from those pages only. With the right column removed from the HTML of those pages, I am now left with a centre column which does not extend to the right side of the page because the position of the right hand edge of the centre column is determined by padding.

Brief code as follows:

#center {
background-color : transparent;
padding : 140px 220px 35px 160px;
margin: 0;

font-size: 80%;
padding: 5px;
border : 1px solid black;

My question is this: Is there a way to control the right padding using a "conditional" statement, something like - IF PRESENT "right" THEN padding-right:160 ELSE padding-right:0

Or do I have to use a different style sheet for those pages?

Many thanks.




 11:16 am on Apr 5, 2003 (gmt 0)

There are no conditional statements in CSS, but you can override attributes by being more specific with your selectors.

So on the pages that you don't want the right column to appear you could specify an id (or class) for the body tag, like this..

<body id="indexpage">

then in your CSS rules you can specify additional rules for #center when it appears within a #indexpage body

#center {
background-color : transparent;
padding : 140px 220px 35px 160px;
margin: 0;
#indexpage #center {
padding-right: 0px;


 4:55 pm on Apr 5, 2003 (gmt 0)

Many thanks. I can't believe I missed that.

Sometimes you just can't see the wood for the trees.

My CSS is now sorted and I am off to get MY memory upgraded!



 12:49 am on Apr 8, 2003 (gmt 0)

Heh, yeah, there are inherent CSS ways to overcome some basic problems. If you positively need to have a if-then-else statement, you can always use dynamic code to output CSS directly to the page based on certain variables.

I've had to do it once before, but usually find there are really good ways to avoid having to do this.


 2:45 am on Apr 10, 2003 (gmt 0)

thanks for asking, spook and thanks for the tip, Graham!
I've been playing around with it and I've found that it can be triggered dynamically with Javascript as well.
To use your example, if the stylesheet has the rule:

#indexpage #center {
padding-right: 0px;

And no element on the page has the id 'indexpage', you can assign that ID with javascript and the page will apply the rule and redraw!
To give that ID to the body element:
document.body.id = 'indexpage';

Using javascript in this way - to trigger a bunch of "hidden" rules in the style sheet - is cleaner and simpler in many instances than the javascript-only approach.

It can work with classes, too, of course.
thanks again!


 8:12 pm on Apr 10, 2003 (gmt 0)

One thin I wish they did have in CSS is variable definitions. e.g. (let's say I'm using the '$' operator to denote variables)

$color1 {#eadfbe}
$color2 {#ffffff}
$color3 {#32f49e}

BODY {background-color: $color1; color: $color3;}
TD {border: 1px solid $color2}
.nav_bar {background-color: $color2;}

Get the idea? That way it's even easier to change your entire site's style instantly. If you want to change the color scheme, you just change your standard color variables.

I don't know if other developers are like me, but I usually come up with a style guide for my sites and I usually don't use more than 10 or so colors throughout the entire site for consistency purposes. Changing the entire site in a heartbeat would be much easier with this, especially if you could define any kind of variable this way.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved