can I define & use constants in CSS?

**shi_bmz** · Jan 2, 2004, 00:35

I'd like to be able to do something like the following in my stylesheet file, allowing me to define easily customizable colour schemes and beyond:

...
define colr1="#FF0000"; // red
define colr2="#0000FF"; // blue
define size1="12pt";

P.style1
{
color=colr1;
font-size=size1;
}
P.style2
{
color=colr1;
background-color=colr2;
}
...

is this possible?

**r2d2** · Jan 2, 2004, 01:42

You need to parse your css file as PHP or ASP. This is a good thread about it.

**CatsEyeDesigns** · Jan 2, 2004, 03:14

Yeah, you can. That's one of the biggest reasons to use CSS. For example:

<style type="text/css">
body
{
color: black;
font-size: 13px;
}
p
{
color: blue;
}
p.big-red
{
color: red;
font-size: 20px;
}
</style>

In that example, all text that's not wrapped in paragraph (<p>) tags would be black. All text within the <p> tags would be blue, unless you set the the class of that <p> to "big-red" (<p class="big-red">) in which case the text would be red and have a font size of 20 pixels. This is an ugly example but it should help you understand.

Hope that helps.

**shi_bmz** · Jan 2, 2004, 10:21

thanks r2d2, I guess that's as close as I'd get to my ideal, which would be to achieve this "natively".

Ryan, what you suggest is not what I was seeking. Essentially, I want to be able to define my *own* constants, e.g.
...
P
{
color : myblue;
}
...

where somewhere above I've defined the value of 'myblue' - can anyone tell me if the way css works renders this dream physically impossible without the use of server-side scripting?

I suppose some of my reasons for wanting to do this can also be satisfied (albeit at the expense of scattered definitions) by grouping the common definitions together, e.g.

H1, H2, H3
{
color: blue;
}
H1
{
font-size: large;
}

etc...

**Paul O'B** · Jan 2, 2004, 11:34

Hi,

You can't do exactly what you want but as you've shown above you can group things together.

You can also do things like this that may help to modularise your code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.red {color:red}
.big {font-size:x-large}
.blue {color:blue}
.small {font-size:x-small}
.greenbg {background:green}
</style>
</head>
<body>
<p class="big red">Big Red Writing</p>
<p class="big blue">Big Blue Writing</p>
<p class="small red">Small Red Writing</p>
<p class="big blue greenbg">Big Blue Writing with a Green background</p>
</body>
</html>

Hope that helps.

Paul

**shi_bmz** · Jan 2, 2004, 12:48

Paul, that *almost* does what I want - can I now take those small and red class definitions and define another class that combines them?

e.g.

<style type="text/css">
.red {color:red}
.small {font-size

-small}
.errortext {red, small}
</style>

most likely I don't have the right syntax, but hopefully you get the idea...

**Paul O'B** · Jan 2, 2004, 13:21

Unfortunately, you can't do that, but it would be quite useful if you could.

You'd need to define it like so:

Code:

<style type="text/css">
.red, .errortext {color:red}
.small, .errortext {font-size:x-small}
</style>

Which is not what you want I know

. You'd have to resort to some sort of script etc as mentioned above. (You could probably do something similar with ie expressions but only IE understands them so it wouldn't be much use either.)

Paul

The SitePoint Forums have moved.

User Tag List

Thread: can I define & use constants in CSS?

Thread Tools

Display

can I define & use constants in CSS?

Bookmarks

Bookmarks

Posting Permissions