Link to home
Start Free TrialLog in
Avatar of troyd1
troyd1

asked on

css redefinition question

This is a 2 part question.
First, how can I or can I set a color and then use that throught my style sheet, something like:

defcolor=#990000

<style>
.css1 {color:defcolor}
.css2 {background-color:defcolor}
.
.
</style>

so I do not have to track down this color everywhere if I want to change it.

Question 2
How can I set one style equal to another?

<style>
.css1 {
color:red;
font-size:12;
padding:2;
}
.css2 {
(.css2=.css1)
background-color:blue;
text-align:right;
}
.
.
</style>

I know I can put the css2 in the first section also, but that does not accomplish how I want to manage my styles.

Thanks, Troy
SOLUTION
Avatar of php-webdesign
php-webdesign

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of arantius
arantius

1: Variables are beyond the scope of CSS.  Doesn't your editor have a Search/Replace All functionality?

2: If you want 2 elements to share a lot of common traits, and differ in a few ways:

.css1, .css2 {
color:red;
font-size:12;
padding:2;
}
.css2 {
background-color:blue;
text-align:right;
}

This is the "Cascading" part of "Cascading Style Sheets" .  The styles you define cascade down until they are overwritten.  Both by one element containing another, or one rule following another.
The first rule there applies styles to .css1 and .css2, the second applies some different ones to just .css2 .
Avatar of troyd1

ASKER

Ok, the first question is not supported, I do not think the second is either, but here is what I am trying to do:

<style>
.b10 {
 font-size:12;
 font-color:#000000;
 font-weight:bold;
}
.b10u {
 style=.b10;
 text-decoration:underline;
)
.b10uc {
 style=.b10u;
 text-align:center;
)
.b10ur {
 style=.b10u;
 text-align:right;
)

I know I could have done it like this:

<style>
.b10,.b10u,.b10uc,.b10ur {
 font-size:12;
 font-color:#000000;
 font-weight:bold;
}
.b10u {
 text-decoration:underline;
)
.b10uc {
 text-align:center;
)
.b10ur {
 text-align:right;
)

but I have a good style sheet application that is very extensive if the other is possible.

Thanks, Troy
As I said earlier.  It cannot be done with straight CSS.  You have to use scripting at load time to generate additional properties for the rules using the existing rule as the source.  If you want to go a scripting route let me know and I will script it.  I don't believe there is going to be a non-scripted solution.

Cd&