Use one CSS style for both border and background color?

  • Thread starter Thread starter Bob Altman
  • Start date Start date
B

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
 
Bob Altman said:
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").
Click to expand...

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.
 
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
 
Is there any way to have a single CSS style that I can attach to both the
Scott M. said:
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.
Click to expand...


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, 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
 
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 ;-)
 
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
 
Back
Top