defining colors in CSS

[Opul4321]

Is there a way to define a color (e.g. a hexadecimal value) to reuse for different elements throughout the style sheet?

Example -

B1 = "#0000FF"

td {background-color: B1;}
p {color: B1;}

 

[Ascalonian]

No you cannot. CSS is not a programming language.

 

[bcreeve]

What exactly are you trying to do? There are usually ways of leveraging the CSS's inheritance to solve the problem of re-defining color over and over again.

 

[ChrisHunt]

There's no built-in way to do this in CSS. However, if you can use php, or another server-side language, you can get the same effect.

http://icant.co.uk/articles/cssconstants/

seems to cover it pretty well, Google for "CSS constants" and you'll find more.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Lowet]

MikeyJudd and ChrisHunt, yes you can do it.
Not supported by all browsers but by some.

JavaScript:

var a_blue_color = '#ddddee';

CSS:

div {background-color: expression(a_blue_color);}

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ChrisHunt]

Not supported by all browsers but by some

Do it server-side, via php for example, and all browsers will support it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ca8msm]

Not supported by all browsers but by some.

So what's the point in implementing it? Viewing it in IE with js turned on it will look like you wanted, viewing it in any other browser or with js disabled and it simply won't work. A server side solution is much more appropriate than a "will sometimes work" client-side one.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Ascalonian]

I think we should follow bcreeve and just wait to see exactly what the OP is asking for. Maybe he needs it to work in just IE. Maybe this is for a company intranet project and not on the extranet? All this matters before coming up with a solution.

 

[ca8msm]

Maybe he needs it to work in just IE.
...
All this matters before coming up with a solution.

That's possible, yes. But, what happens if this changes? If this is thought about and planned properly (regardless of what is actually needed at this particular point in time), then it won't be any more work to "future proof" the method so that it doesn't matter which browser is used. Therefore, I'd say it doesn't matter what solution is offered as long as it works and scales well.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

thanks MikeyJudd. like you said, look what the OP asks for.
he asked how to set CSS with javascript and i wrote an example.
i always use PHP for that stuff.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ca8msm]

he asked how to set CSS with javascript and i wrote an example.

I don't think the OP mentioned javascript at all.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

Ehrr.. OK, maybe VBScript.. However, it looked like a client-side scripting language..

B1 = "#0000FF"

td {background-color: B1;}
p {color: B1;}

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[ca8msm]

I think that was "semi pseudo-code" i.e. I think they were asking how to define a variable in css (not javascript, vbscript or any server-side language) and apply it to the rest of the css file. As was discussed, there any a few methods to do this; some better than others.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[Lowet]

OK, then sorry. I didn't see it that way. I'm not very known to the semi pseudo-coding yet, as what I know, it's not very good supported among browsers.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[j4606]

how about

H1 { font-size: 18pt;}
H2 { font-size: 14pt;}
H3 { font-size: 12pt;}
H4 { font-size: 11pt;}

H1, H2, H3, H4{ color:#00000;}

 

[trollacious]

Per Wikipedia:

As the name suggests, pseudocode generally does not actually obey the syntax rules of any particular language; there is no systematic standard form, although any particular writer will generally borrow the appearance of a particular language.

Lee

 

[iulyan26]

css = cascading style sheets ...so

you can make something like this in css & xhtml

<div class="class1 class2">Logo design</div>
<div class="class1 class3">Web development</div>
<div class="class2 class3">Css & xhtml <b>hand coding</b></div>
<div class="class1 class2">IE - Stupid browser</div>

and then in css

.class1 { some rules}
.class2 {other rules}
.class3 {other rules}

.class1,.class2 {rules rules}
.class3 b, class2 {even more}
........




whend all you need is time

http://www.fleshsoft.eu

 

[OsakaWebbie]

Sorry to resurrect a five-month-old thread, but this is an important discussion (even if the original poster deserted us), and some good points were made, so I thought I'd tie into it rather than starting a separate thread. I found it via a search, because I had the same question.

In my case I'm making Joomla sites, so I can't (easily) do the colors using PHP or Javascript, or even using multiple classes. The best solution I've seen so far is what j4606 suggested, defining the colors of all the elements/classes in one spot. The downside is that to see all the attributes of an element/class, one needs to know to look in multiple places - the Joomla template I'm starting with already has positioning (margins, etc.) and text attributes (font, etc.) in separate CSS files, so I would be adding a third layer of complexity. But I'm tired of copy/pasting hex colors all over several CSS files, and thinking about the nightmare it will be if I later want to change the color scheme.

Anyway, here's my question: When we say that CSS cascades, is it possible to use a class inside the definition of another one? What I mean is something like this (yes, this is "pseudo-code" - my imagination):

.myclass1 { color:#0000FF }
.myclass2 { class:myclass1; font-size:1.2em }

That would open up a lot of possibilities, not just for colors but all kinds of things.

 

[Vragabond]

No, you cannot do that in CSS. You could do something similar in HTML:

<div class="myclass1 myclass2"></div>

This element will have the properties of both classes. This is as close as you can get to what you want. In CSS you can also say:

.myclass1.myclass2 { ... }

And this should only work when an element has both classes applied to it. So myclass1 could define yellow colour, myclass2 would be blue colour and when both classes are used together, the colour would be green. But this is not supported by IE6.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[OsakaWebbie]

Thanks. I did already know that you can apply more than one class to an element (and it had been mentioned previously in this thread even), but in many cases in Joomla, I would have to customize the engine code to use two classes, which I would prefer not to do (because I would have to do it again every time I upgraded Joomla).

Seems to me that nesting classes, like in my example, would be in the true spirit of CSS - maybe something like that will be implemented someday. Meanwhile, I guess I'll assign all the colors in one spot in my CSS file, like j4606 suggested.