CSS - repeating colours, fonts etc "constants" 1

[Glasgow]

A web site I am building has a colour scheme for text and backgrounds. The same colour will often apply to several different styles of text. The same argument will apply to font sizes. So in my style sheet I might have:

.TxtHigh01          { color: #CC3333; font-size: 12px}
.TxtHigh02          { color: #CC3333; font-size: 8.5pt}
.TxtHigh03          { color: #CC3333; font-size: 10pt}

What would be the best approach (if one exists) to implement this example in such a way that it does not need to be changed in 3 places if the colour scheme changes? In VB I would use a constant but I am aware this is not an option in CSS.

Thanks in advance.

 

[ChrisHunt]

It's a real shortcoming in CSS (in my opinion) that there's no way to define constants of this sort. It'd be really good if you could do something like this...

definecolor my_bg #FFFFCC;

body { background: my_bg; }

Sadly, that's not the way CSS works. You can reduce the duplication by relying on the cascade - there's no need to set a colour for something if its parent element is already that colour - and you can also bulk up your declarations:

.TxtHigh01, .TxtHigh02, .TxtHigh03 { color: #CC3333; }
.TxtHigh01          { font-size: 12px}
.TxtHigh02          { font-size: 8.5pt}
.TxtHigh03          { font-size: 10pt}

If you really wanted to go to town, you could use a server-side script to generate your stylesheet on the fly, allowing you to use normal variables:

#!/usr/bin/perl

$my_bg = '#FFFFCC';

print "Content-type: text/css\n\n";

print "body { background: $my_bg; }\n";

But that's probably overkill in most cases.

What I generally do is put a big comment at the top of the stylesheet, listing the all colours and what I use them for. If I decide I need to change them I just do a global find/replace on the file.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Glasgow]

Thanks Chris - I agree re shortcoming. However, I was not aware that you could repeat references to the same class as per your first suggestion so I may be able to make good use of that.

Thanks again.

 

[ChrisHunt]

It's the first tip from

http://www.456bereastreet.com/archive/200503/css_tips_and_tricks_part_2/

- well worth a read!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Glasgow]

I'll have a look thanks.