Inheritance, variables and CSS

[Giggle Girl]

I have inherited a stylesheet that has many of the same values over and
over. Can you use a variable in CSS so I only have to hardcode a
border color once, for instance?

Here is a snip from the current sheet:

.outlook_borderRight1
{
border-right: #ff9900 solid 2px;
}

.outlook_borderBottom1
{
border-bottom: #ff9900 solid 2px;
}

.outlook_borderIFrame
{
border-top: #ff9900 solid 2px;
border-left: #ff9900 solid 2px;
border-right: #ff9900 solid 2px;
}

Since "ff9900" is used over and over, can I just set it once somewhere?
Like

var BORDER_Tabulated_Result : #ff9900;

.outlook_borderBottom1
{
border-bottom: BORDER_Tabulated_Result solid 2px;
}

I know my syntax is wrong, but you (hope, hope) get the idea.

Can using "variables" be done?

Thanks,
Ann
PS: I am a backend programmer, who is new to CSS.

[Jukka K. Korpela]

Giggle Girl wrote:

Can you use a variable in CSS
No.
Here is a snip from the current sheet:
That's irrelevant, except as evidence that makes it probable that the
style sheet (and quite probably the markup, too) is poorly designed.
Since "ff9900" is used over and over, can I just set it once somewhere?
No, there are no variables in CSS.

You can, however, set e.g.
..foobar { border: solid 2px #f90; }
and then set just e.g. border-style: none for those sides that should
have no border.
PS: I am a backend programmer, who is new to CSS.

Lesson 0: CSS is not a programming language, and won't become one.

P.S. What you wrote about, or what I wrote about, has nothing to do with
inheritance (which is a CSS term and should be used only in that term
meaning when discussing CSS; it is also misunderstood by 99 % of people
who ask questions about CSS inheritance).

[David Dorward]

Giggle Girl wrote:

I have inherited a stylesheet that has many of the same values over and
over. Can you use a variable in CSS so I only have to hardcode a
border color once, for instance?

No, but see my attempt to explain what inheritance means in CSS, why
OOP-style inheritance isn't needed, and what alternatives there are to
OOP-tyle inheritance.

http://dorward.me.uk/www/css/inheritance/
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Giggle Girl]

Thank you David Dorward for your reply. And the link was extremely
helpfull, too.

Thanks Jukka for your reply as well.

Ann

[Yucky Korpulent]

Furthermore, why do you people insist on asking such stooopid
questions?! Don't you pathetic newbies realize you are wasting my
important time by forcing me to be such an insufferably conceited twit?

Yucky, http://yuckykorpulent.com

[Harlan Messinger]

Giggle Girl wrote:

I have inherited a stylesheet that has many of the same values over and
over. Can you use a variable in CSS so I only have to hardcode a
border color once, for instance?

As with HTML, the answer is no. And as with HTML, you can use a
server-side technology such as PHP or ASP or ASP.NET to generate the
code dynamically (making sure that at the top of the program or in the
web server configuration for the file, you set the content type of the
response to the proper value--"text/css" in this case). Then you can
have a largely static file with variables inserted wherever you want.

[Trevor L.]

Giggle Girl wrote:

I have inherited a stylesheet that has many of the same values over and
over. Can you use a variable in CSS so I only have to hardcode a
border color once, for instance?

Here is a snip from the current sheet:

.outlook_borderRight1
{
border-right: #ff9900 solid 2px;
}

.outlook_borderBottom1
{
border-bottom: #ff9900 solid 2px;
}

.outlook_borderIFrame
{
border-top: #ff9900 solid 2px;
border-left: #ff9900 solid 2px;
border-right: #ff9900 solid 2px;
}

Since "ff9900" is used over and over, can I just set it once somewhere?
Like

var BORDER_Tabulated_Result : #ff9900;

.outlook_borderBottom1
{
border-bottom: BORDER_Tabulated_Result solid 2px;
}

I know my syntax is wrong, but you (hope, hope) get the idea.

Can using "variables" be done?

Thanks,
Ann
PS: I am a backend programmer, who is new to CSS.

As others have replied, there are no variables in CSS. And people get
upset when you call it a language or even use the phrase "programming"
for CSS.

But the purists can enjoy making objections as much as they like. All
you really want to know is how to *use* CSS to achieve what you want to
do

You could try this
..outlook_borderRight1 , .outlook_borderBottom1 , .outlook_borderIFrame
{
border-right: #ff9900 solid 2px;
}
..outlook_borderIFrame
{
border-top: #ff9900 solid 2px;
border-left: #ff9900 solid 2px;
}
which is quite valid CSS

This is part of the cascading rule.

A border-right style has been defined for .outlook_borderIFrame, so
this cascades into the lower defintion of .outlook_borderIFrame

In effect the style for .outlook_borderIFrame is
{
border-right: #ff9900 solid 2px;
border-top: #ff9900 solid 2px;
border-left: #ff9900 solid 2px;
}
whereas that for .outlook_borderRight1 and .outlook_borderBottom1 is
{
border-right: #ff9900 solid 2px;
}

I think this is what you want.

[Stan Brown]

Tue, 31 Jan 2006 18:53:57 +0000 from David Dorward
<do*****@yahoo.com>:

No, but see my attempt to explain what inheritance means in CSS, why
OOP-style inheritance isn't needed, and what alternatives there are to
OOP-tyle inheritance.

http://dorward.me.uk/www/css/inheritance/

I notice you suggest assigning multiple classes to an element.

IIRC, that's not supported in MSIE. You might want to mention that,
if it's true; otherwise people will complain that your suggestion
"doesn't work" when in fact it's MSIE that doesn't work.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Mark Parnell]

Deciding to do something for the good of humanity, Stan Brown
<th************@fastmail.fm> declared in
comp.infosystems.www.authoring.stylesheets:

I notice you suggest assigning multiple classes to an element.

IIRC, that's not supported in MSIE.

It is supported by IE - from version 5 at least. What isn't supported
correctly is using multiple class selectors *in CSS*, e.g.
p.someclass.otherclass {}

http://css-discuss.incutio.com/?page=MultipleClasses

--
Mark Parnell

I give up:
http://blinkynet.net/comp/uip5.html

[Stan Brown]

Wed, 1 Feb 2006 17:26:52 +1100 from Mark Parnell
<we*******@clarkecomputers.com.au>:

<th************@fastmail.fm> declared in
comp.infosystems.www.authoring.stylesheets:

I notice you suggest assigning multiple classes to an element.

IIRC, that's not supported in MSIE.

It is supported by IE - from version 5 at least. What isn't supported
correctly is using multiple class selectors *in CSS*, e.g.
p.someclass.otherclass {}

Thanks, Mark. I guess my memory was wrong.

It's good to know -- I've had one or two situations where multiple
classes would be useful, but I forbore to use them because of that
issue. Now I can.
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you