Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users
Course Of The Month
5 days, 4 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
css redefinition question
Posted on 2004-09-29
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
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2
- +1
5 Comments
question 1:
http://www.kryogenix.org/days/2003/07/23/variables
question 2:
.style1, .style2 { margin:0; padding:1em;color:blue; ... }
or
div.style1, #style2 p, .style3 a:hover { color:blue; ... }
That will apply the styles to both/all. To add extra styles beyond the common ones you would add another style declaration:
.style2 { border: 5px green double; }
http://www.kryogenix.org/days/2003/07/23/variables
question 2:
.style1, .style2 { margin:0; padding:1em;color:blue; ... }
or
div.style1, #style2 p, .style3 a:hover { color:blue; ... }
That will apply the styles to both/all. To add extra styles beyond the common ones you would add another style declaration:
.style2 { border: 5px green double; }
You should handle the first one on the server side during generation. Otherwise you will have to use scripting whenever you want to use it. Using variables is really counter to the whole CSS concept of using inheritance to cascade down through the DOM.
For the second you you need to modify the style rule on the fly with scripting. Or you can wait to see if browser manufactures support a larger subset of CSS3 then they have with CSS2. You still won't get variables, but behaviours/imbeded script might be there, if they can figure out how to do it securely.
If you want scripting for part 2, let me know and I will post something.
Cd&
For the second you you need to modify the style rule on the fly with scripting. Or you can wait to see if browser manufactures support a larger subset of CSS3 then they have with CSS2. You still won't get variables, but behaviours/imbeded script might be there, if they can figure out how to do it securely.
If you want scripting for part 2, let me know and I will post something.
Cd&
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 .
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 .
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
<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&
Cd&
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
What is Node.js?
Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.
Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month5 days, 4 hours left to enroll
688 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.