CSS Styles Inheritance

[dannymook]

I was wondering if anyone can tell me if it is possible to do the following (or equivalent) in CSS:

.MasterColour1 { color:red; }
.MasterColour2 { color:blue: }
.MasterColour3 { color:green: }

.MasterText1 { font-family:verdana; }
.MasterText2 { font-family:arial; }

.style1 { color:MasterColour1;font-family:MasterText1; }
.style2 { color:MasterColour3;font-family:MasterText2; }
.style3 { color:MasterColour2;font-family:MasterText2; }
and so on...

So if I now want to change any of the colours or fonts I only have to edit those particular styles. Also if I want to add any new styles I just need to reference the original master styles.

Any help most appreciated.

Cheers - Danny

[Nick_W]

Hi, and Welcome to WebmasterWorld! [webmasterworld.com]

You can't do that I'm afraid, at least not at present. However, were you aware that you can Specify more than one class per element? [webmasterworld.com]

That revelation (if it is one) will give you a very similar funcionality. ;)

Nick

[DrDoc]

Well, actually you can... But not using pure CSS.

CSS is not a programming language, nor a scripting language. It is a set of rules, plain text...

I don't know how your PHP skills are?

Create a stylesheet called basic.php instead.

<?php
$MasterColour1 = "red";
$MasterColour2 = "blue";
$MasterColour3 = "green";

$MasterText1 = "verdana";
$MasterText2 = "arial";
?>

.style1 {
color: <?php echo $MasterColour1;?>;
font-family: <?php echo $MasterText1;?>;
}
.style2 {
color: <?php echo $MasterColour3;?>;
font-family: <?php echo $MasterText2;?>;
}
.style3 {
color: <?php echo $MasterColour2;?>;
font-family: <?php echo $MasterText2;?>;
}

[dannymook]

Thanks fellas your help is most appreciated. Think I'll go for the multiple class specifications as this would be most suited to the system we use.

I just have a couple of quick questions to ask: What specification of CSS does this lie under and what browsers support this behaviour?

Thanks (again) in advance,

Danny

[drbrain]

Just about any of them, even back to NS4 (ick)

[dannymook]

I'm not too sure if that's the case. I've tried this on netscape 4.08 and 4.79 and neither of them seem to support this behaviour. Am I doing something wrong or is netscape once again a load of old plop?

[marek]

dannymook, although multiple clases, as Nick_W suggested, may be the best option for a particular case, you can also consider selector grouping:

.style1, style4, style7 {color: #f00}

[dannymook]

Cheers Marek but im not sure that I like that method. In my case I have multiple stylesheets with lots of classes. In total probably around 150. I reckon that the stylesheets could get incredibly messy and very hard to read.

I can't believe there isn't a better way of doing this. Maybe Dr Docs suggestion of having some form of global variables might be a better one instead. Might look into defining a xml configuration file containing all master properties which can be easily changed and replicated for my needs across a large number of brands, skins, regions and locales.

It's a shame there's no simple CSS way of doing what I need.

But thanks to you all for your help anyway :)

Danny

[drbrain]

Why do you need NS4 to work? (I just installed 4.8 to test it, and it doesn't work, pity.)

Why do you need so many classes? It seems you're missing some important things, like re-opening classes:

.foo { color: red }
/* ... */
.foo { font-weight: bolder }