Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Is it possible to "inherit" and "override" CSS files? 1

Status
Not open for further replies.

milton747

Programmer
Apr 21, 2005
133
US
Is it possible to "inherit" and "override" CSS files?

EG: Imagine I have A.css containing a style called A101.
Is it possible to have B.css which includes A.css and then overrides style A101, either:
i) Simply rename it to B202, and keep all the characteristics unchanged
or
ii) Rename it to B202 and then override some of the settings, and add new ones.
(Essentially, traditional OO class inheritance mechanism)

*REASON*
I have a s/ware product that can apply CSS styles to elements BUT the styles must be specific names. So, I want to use my existing css files, but somehow rename the styles to fit the required names I have to use. (Without mucking with, or duplicating, the original css files.)

Thanks to all.
 
There's at least two ways that I can think of. The CSS and the HTML way.

1. Using CSS:
Code:
.A101, .B202, .C301 {
  color: red;
  font-size: 2.3em;
  font-family: Verdana, sans-serif;
}

.B202 {
  text-decoration: underline;
}

.C301 {
  color: blue;
}
This will have the effect of all three classes having Verdana text at size 2.3em. A and B will be red (settings for all) and C will be blue (specific override setting). B will be underlined on top of everything else (added setting).

2. Using HTML:
Code:
<style type="text/css">
.A101 {
  color: red;
  font-size: 2.3em;
  font-family: Verdana, sans-serif;
}

.B202 {
  text-decoration: underline;
}

.C301 {
  color: blue;
}
</style>

<p class="A101">I am red!</p>
<p class="A101 B202">I am red and underlined!</p>
<p class="A101 C301">I am blue!</p>

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I had about the same question earlier this year and transformed my CSS through several stages, maybe this thread helps you understand it:
As you can see from the CSS sample from Vragabond there is no way to denote that B202 inherits from A101, the CSS way of a common parent CSS is to give the CSS definition all the multiple names of it's subclasses.

There's no real inheritance by pointing back to a parent class. A clever way to copy with more complex situations is to dynamically create CSS files, which you generate from real classes in your favourite language, havin the css attributes, then you can do OOP and let the resulting classes write their properties to a CSS file.

Bye, Olaf.
 
TO: Vragabond and Olaf.

Thanks guys.
I'll try out the solutions you posted.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top