Setting property values to other property values

@bunkleOct 29.2007

S’okay. This isn’t a big deal but I’d like to do…..

BODY{
font-size: 10;
}

A{font-size: 11;}

H1 A{font-size: <whatever h1 font-size is set to and whenever h1 font-sized might be changed so should the A font size>;}

In other words can I define a value in terms of the value of another element property?

to post a comment

CSS

9 Comments(s) _↴

@KravvitzOct 29.2007 — #Units are required. :p

This is one of the benefits of using EMs and/or percentages for font-sizes. font-size:1em is the same as font-size:100% which means that that element's font-size should be the same as its parent's.

@bunkleauthorOct 29.2007 — #That wasn't really what I was getting at ?

Let's say I want to get something else, say colors.

Can I do

H5 {color:<whatever color DIV (or whatever element) is>;}

@KravvitzOct 29.2007 — #Ah. For other properties, you can use the [url=http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit]inherit value[/url]. However, if I remember correctly, IE doesn't support the inherit value on all properties.

@soccermatrixOct 29.2007 — #something link this might work:

h1 {

color:#000000;

font-size:14px;

}

h1 a:link, h1 a:visited {

color:#333333;

text-decoration:none;

}

h1 a:hover {

text-decoration:underline;

}

@bunkleauthorOct 29.2007 — #something link this might work:

[/QUOTE]

I'm sorry. Might work for what?

Okay, to make what I'm asking for clearer:

HTML:

<link rel="stylesheet" href="blue.css">

<link rel="stylesheet" href="generic.css">

CSS: blue.css

BODY{

background-color:blue;

color: yellow;

}
----------

red.css

BODY{

background-color:red;

color: green;

}
---------

generic.css

....

.... oodles of CSS rules....

DIV{

background-color: white;

color: BODY=>background-color;

}
======

In other words, I want to set a property (in this example DIV=>color but in actuality it could be *any* element or any property) to the value of *another* element property value (in this example BODY=>background-color) which can be blue sometimes or red sometimes or something different altogether but whatever it is set to, *that's* what I want DIV=>color set to.

I.E. Somewhere somehow BODY=>background will be set somehow. Is it possible to write a CSS rule that says "set DIV=>color to whatever BODY=>background-color NO MATTER WHAT SPECIFIC VALUE BODY=>background-color may have been set to who knows when or who knows how"?

@KravvitzOct 29.2007 — #Only if the element is a direct child of <body> or all of the elements in the ancestor chain between the element and <body> have the same value for the property.

If you really want to do something like in your newest example, you might be best off using a server-side language, e.g. PHP, to dynamically create a stylesheet based on certain variables.

Two additional points I should have made earlier:

1) For XHTML compatibility, always use lowercase element names in CSS.

2) CSS is not a programming or a scripting language. It is a stylesheet language. The similarities it has with programming/scripting languages are superficial.

@bunkleauthorOct 29.2007 — #Only if the element is a direct child of <body> or all of the elements in the ancestor chain between the element and <body> have the same value for the property.

If you really want to do something like in your newest example, you might be best off using a server-side language, e.g. PHP, to dynamically create a stylesheet based on certain variables.
[/Quote]
I'm not really trying to program per se. When, if, I need to do that I will use PHP. All I'm really trying to do is organize me rules as globally as CSS will allow.

The issue came up on one of my style-sheets where I had set the default font-weight to bold. Thus by [B]default all text was bolded. So how should bold (well, actually, I also wanted links to also appear bold) ... so how should bold tags and link tags appear distinct from the default bold of the text? I set B and A:LINK to a [SIZE="4"]larger font size[/SIZE]. Which was fine until I had a link in an H1 tag. I wasn't going to bother with defining the H1 tag but as a result having a link in an H1 tag looked like "[SIZE="6"]And how[/SIZE] [SIZE="4"][COLOR="Red"]are[/COLOR][/SIZE] [SIZE="6"]You?[/SIZE]"[/B]

For some reason H1 A:LINK{font-size: inherit;} didn't work. Why? Don't know-- don't care. So I figured I'd specify H1 A:LINK {font-size: .. hmm, what *is* the font size of H1? Well, it was probably for the best that I assign a font size to H1 anyway so I did.

But it got me thinking. I *thought* I had read in one of my manuals with a lousy index that there was some way to refer element values via references. Something like "H3 {font-size: P.font-size;} where P.font-size was simply syntax to recall what the font-size of P was.

Maybe I didn't read this. (I can't find it if I had.) Maybe what I'm trying to do is impossible. Sure would be usefull though. If I were to have a color or a size or whatever else in several indirect (not inheritence) but dependent values, It'd be nice to define values just once for simple upkeep and future editing.

Two additional points I should have made earlier:

1) For XHTML compatibility, always use lowercase element names in CSS.
[/quote]

That's good to know. Better I find out now than two months from now.

2) CSS is not a programming or a scripting language. It is a stylesheet language. The similarities it has with programming/scripting languages are superficial.[/QUOTE]
I know. But what I'm asking for isn't really programming. (But it'd be cool if I *could program!) CSS rules define that a <goo> tag property will get a specific value. So it does register goo.property<=>value. It'd make sense that thered be a way to refer to the value somehow.

Well, if there isn't, then there isn't but it'd be neat if you could.

Actually what I'd really like is a way to say:

A:Link {

...... Use however bold is defined in the same context....;

color:#12AB3D;

}

or something like:

A:Link = B;

A:Link {color:#12AB3D;}

but I don't suppose *that's* possible, is it?

@KravvitzOct 29.2007 — #I don't understand what you mean by
A:Link = B;[/quote]

@bunkleauthorOct 29.2007 — #When I said "A:LINK = B;" I was engaging in wishful thinking.

In practicality, it'd be the same as

A:LINK, B{...}

Except it'd called later so it'd be more like:

B{...stuff ...}

....

A:LINK{... same stuff ...}

only it'd be shorthand to write.

A:LINK = B; <=> A:LINK{... same stuff ...}

It's wishful thinking. There is no way to do this and I didn't think there was.

===

Well I just read through http://www.w3.org/TR/CSS2/syndata.html#values and there was absolutely nothing about values being variables or references so whatever I read that made me think it might be a way was either wrong, or more likely I misremember it. For all I know, it might have been something I read about JavaScript. (Actually the O'Reilley CSS cookbook has chapter on JavaScript integrated with CSS).

Anyway thanks for your patience and answers.

To sum up, after a *lot* of web surfing I think the best way to have worded my question would have been "Can a declared value in a CSS rule be a *reference* to a value, preferably a reference to a value of a previous rule? If so what would be the syntax?"

To which, I conclude the answer would be. "No. A declared value must be one of:

4.3.1 Integers and real numbers

4.3.2 Lengths

4.3.3 Percentages

4.3.4 URL + URN = URI

4.3.5 Counters

4.3.6 Colors

4.3.7 Angles

4.3.8 Times

4.3.9 Frequencies

4.3.10 Strings

If I were "King of CSS" I'd add the ability to set a value to a *reference* so that something like

P {color: blue;}

H1{background-color: P->color;}

would be allowed. But I'm not and I cant and there isn't. Oh, well....

Also in #CSS _↴

[RESOLVED] Background Image problems in Opera & Safari.Color without the #Text-decoration does not work

Success!

Help @bunkle spread the word by sharing this article on Twitter...

Tweet This

Setting property values to other property values

9 Comments(s) _↴

}
----------

}
---------

}
======

Also in #CSS _↴

Success!

Social

Version

Setting property values to *other* property values

9 Comments(s) ↴

} ----------

} ---------

} ======

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

Setting property values to other property values

9 Comments(s) _↴

}
----------

}
---------

}
======

Also in #CSS _↴