Use one CSS style for both border and background color?

[Bob Altman]

Hi all,

I have a table whose style is:

..main_table
{
border: thin solid #000000;
width: 666px;
border-collapse: collapse;
}

This table contains a cell whose style looks like this:

..copyright
{
height: 22px;
font-size: small;
text-align: right;
color: #FFFFFF;
background-color: #000000;
}

Is there any way to have a single CSS style that I can attach to both the
table and the cell to specify the table's border color as well as the cell's
background color? The tricky part (for me) is that I don't know how to
separate the table border color from the other border attributes ("thin" and
"solid").

TIA - Bob

[Anthony Jones]

"Bob Altman" <rd*@nospam.nospamwrote in message
news:eD**************@TK2MSFTNGP04.phx.gbl...

Hi all,

I have a table whose style is:

.main_table
{
border: thin solid #000000;
width: 666px;
border-collapse: collapse;
}

This table contains a cell whose style looks like this:

.copyright
{
height: 22px;
font-size: small;
text-align: right;
color: #FFFFFF;
background-color: #000000;
}

Is there any way to have a single CSS style that I can attach to both the
table and the cell to specify the table's border color as well as the

cell's

background color? The tricky part (for me) is that I don't know how to
separate the table border color from the other border attributes ("thin"

and

"solid").

You can separate out border attributes as:-

{border-width: thin; border-style: solid; border-color:black}

However since border-color and background-color are different attributes you
can't create style that will let you include the color value once.
--
Anthony Jones - MVP ASP/ASP.NET

[Scott M.]

You can't do that because you want one rule that affects different
properties of different elements. The fact that these two things happen to
use the same color isn't enough to be able to make one rule out of them.

-Scott

"Bob Altman" <rd*@nospam.nospamwrote in message
news:eD**************@TK2MSFTNGP04.phx.gbl...

Hi all,

I have a table whose style is:

.main_table
{
border: thin solid #000000;
width: 666px;
border-collapse: collapse;
}

This table contains a cell whose style looks like this:

.copyright
{
height: 22px;
font-size: small;
text-align: right;
color: #FFFFFF;
background-color: #000000;
}

Is there any way to have a single CSS style that I can attach to both the
table and the cell to specify the table's border color as well as the
cell's background color? The tricky part (for me) is that I don't know
how to separate the table border color from the other border attributes
("thin" and "solid").

TIA - Bob

[Bob Altman]

>Is there any way to have a single CSS style that I can attach to both the

>table and the cell to specify the table's border color as well as the
cell's background color?

"Scott M." <s-***@nospam.nospamwrote in message
news:eO**************@TK2MSFTNGP06.phx.gbl...

You can't do that because you want one rule that affects different
properties of different elements. The fact that these two things happen
to use the same color isn't enough to be able to make one rule out of
them.

Thanks Anthony and Scott. Now that I've learned a bit more about how to
slice and dice CSS styles, let me ask a slightly different question on the
same theme.

Suppose my web page is laid out inside of a top-level table, and one or more
of the table cells always wants to be the same color as the table border. I
can create a CSS rule that I attach to the table that includes "border: thin
solid #aabbcc". I can create another rule that I attach to the specific
table cells that want to match the border color, with "background-color:
#aabbcc".

Obviously, what I'd like is some way to define the color ("aabbcc") once and
plug it in to both rules automagically. How is this sort of thing done?

Bob

[Scott M.]

Bob, that would be done using JavaScript because it requires the
functionality of a data variable that can hold a value that can be accessed
from other spots. CSS is not a programming language, it is more declarative
(you declare what you want and that happens).

In short, for your scenario, you're just going to have to specify the same
color value in the two spots if you plan to do the work solely in CSS.

-Scott

"Bob Altman" <rd*@nospam.nospamwrote in message
news:O8**************@TK2MSFTNGP06.phx.gbl...

>>Is there any way to have a single CSS style that I can attach to both
the table and the cell to specify the table's border color as well as
the cell's background color?

"Scott M." <s-***@nospam.nospamwrote in message
news:eO**************@TK2MSFTNGP06.phx.gbl...

>You can't do that because you want one rule that affects different
properties of different elements. The fact that these two things happen
to use the same color isn't enough to be able to make one rule out of
them.

Thanks Anthony and Scott. Now that I've learned a bit more about how to
slice and dice CSS styles, let me ask a slightly different question on the
same theme.

Suppose my web page is laid out inside of a top-level table, and one or
more of the table cells always wants to be the same color as the table
border. I can create a CSS rule that I attach to the table that includes
"border: thin solid #aabbcc". I can create another rule that I attach to
the specific table cells that want to match the border color, with
"background-color: #aabbcc".

Obviously, what I'd like is some way to define the color ("aabbcc") once
and plug it in to both rules automagically. How is this sort of thing
done?

Bob

[Bob Altman]

That's what I figured, but I was hopeful that this was a common enough
scenario that there would be an elegant approach baked into something that
"every experienced web developer" knew about. Oh well... maybe in the next
version of CSS ;-)

"Scott M." <s-***@nospam.nospamwrote in message
news:ec**************@TK2MSFTNGP02.phx.gbl...

Bob, that would be done using JavaScript because it requires the
functionality of a data variable that can hold a value that can be
accessed from other spots. CSS is not a programming language, it is more
declarative (you declare what you want and that happens).

In short, for your scenario, you're just going to have to specify the same
color value in the two spots if you plan to do the work solely in CSS.

-Scott

"Bob Altman" <rd*@nospam.nospamwrote in message
news:O8**************@TK2MSFTNGP06.phx.gbl...

>>>Is there any way to have a single CSS style that I can attach to both
the table and the cell to specify the table's border color as well as
the cell's background color?

"Scott M." <s-***@nospam.nospamwrote in message
news:eO**************@TK2MSFTNGP06.phx.gbl...

>>You can't do that because you want one rule that affects different
properties of different elements. The fact that these two things happen
to use the same color isn't enough to be able to make one rule out of
them.

Thanks Anthony and Scott. Now that I've learned a bit more about how to
slice and dice CSS styles, let me ask a slightly different question on
the same theme.

Suppose my web page is laid out inside of a top-level table, and one or
more of the table cells always wants to be the same color as the table
border. I can create a CSS rule that I attach to the table that includes
"border: thin solid #aabbcc". I can create another rule that I attach to
the specific table cells that want to match the border color, with
"background-color: #aabbcc".

Obviously, what I'd like is some way to define the color ("aabbcc") once
and plug it in to both rules automagically. How is this sort of thing
done?

Bob

[Scott M.]

Again, CSS isn't a programming language, so you aren't going to find any
kind of built in behaviors like this. That is what JavaScript and DHTML are
for. I wouldn't hold my breath for any new versions of CSS that
fundamentally change the fact that you can't program with it alone.

-Scott
"Bob Altman" <rd*@nospam.nospamwrote in message
news:ee**************@TK2MSFTNGP05.phx.gbl...

That's what I figured, but I was hopeful that this was a common enough
scenario that there would be an elegant approach baked into something that
"every experienced web developer" knew about. Oh well... maybe in the
next version of CSS ;-)

"Scott M." <s-***@nospam.nospamwrote in message
news:ec**************@TK2MSFTNGP02.phx.gbl...

>Bob, that would be done using JavaScript because it requires the
functionality of a data variable that can hold a value that can be
accessed from other spots. CSS is not a programming language, it is more
declarative (you declare what you want and that happens).

In short, for your scenario, you're just going to have to specify the
same color value in the two spots if you plan to do the work solely in
CSS.

-Scott

"Bob Altman" <rd*@nospam.nospamwrote in message
news:O8**************@TK2MSFTNGP06.phx.gbl...

>>>>Is there any way to have a single CSS style that I can attach to both
the table and the cell to specify the table's border color as well as
the cell's background color?

"Scott M." <s-***@nospam.nospamwrote in message
news:eO**************@TK2MSFTNGP06.phx.gbl...
You can't do that because you want one rule that affects different
properties of different elements. The fact that these two things
happen to use the same color isn't enough to be able to make one rule
out of them.
Thanks Anthony and Scott. Now that I've learned a bit more about how to
slice and dice CSS styles, let me ask a slightly different question on
the same theme.

Suppose my web page is laid out inside of a top-level table, and one or
more of the table cells always wants to be the same color as the table
border. I can create a CSS rule that I attach to the table that
includes "border: thin solid #aabbcc". I can create another rule that I
attach to the specific table cells that want to match the border color,
with "background-color: #aabbcc".

Obviously, what I'd like is some way to define the color ("aabbcc") once
and plug it in to both rules automagically. How is this sort of thing
done?

Bob