...

View Full Version : Can I descend from another css class?



sofakng
05-25-2007, 01:47 PM
For example, let's say I have a CSS class called "StandardTable", but I'd like to customize it without changing the original code.

Can I create a new CSS class which uses everything from StandardTable but allows me to enter new properties, etc.

Along the same lines, can I modify a class defined in another stylesheet?

Example: I have a CSS class called "Label" and it makes everything red, bold, and adds a border around it.

Well, since my HTML already is using this class I don't want to make a new class and then change my HTML. Can I override my old class, but only indicate what I want to change?

Thanks...

ahallicks
05-25-2007, 02:07 PM
OKay, not understanding this exactly. For the first one, you could just copy the code in StandardTable and call it StandardTable2, edit the lines you want to and then change the classes in the HTML that you want this to apply to to StandardTable2?

For the second, if you put a style called label in a second stylesheet it would overwrite the first stylesheet as long as you put this second stylesheet AFTER the first in the HTML. So if you had a 'Label' class that you wanted to be blue in your page, and not red you could create a new style sheet, or add an inline style after the style sheet and change the font-color to blue?

sofakng
05-25-2007, 05:14 PM
Thanks for the reply...

I understand what you're saying, but I'm trying to adjust a stylesheet without knowing the contents. I also don't want to add another style class to each element in my HTML document.

Basically, let's say I have an HTML document which I can't change and an existing stylesheet which I can't change (and I can't even read it). However, in my HTML document I can add my own style tags. What I'd like to do is modify a style coming from a different stylesheet.

I don't think this is possible, but it would allow me to change styles without modify the HTML or existing stylesheet in any way...

koyama
05-26-2007, 02:01 AM
Basically, let's say I have an HTML document which I can't change and an existing stylesheet which I can't change (and I can't even read it).
You can always read the styles. If the browser can read it so can you.


However, in my HTML document I can add my own style tags.
Do you mean you can add <style type="text/css">...</style>, but you cannot add <link rel="stylesheet" href="..."> ?


I don't think this is possible, but it would allow me to change styles without modify the HTML or existing stylesheet in any way...
I don't see why it shouldn't be possible. Do you have a live example showing what you are trying to do?

sofakng
05-26-2007, 04:39 AM
Ok, here's what I'd like to be able to do...

<-- This is from an external stylesheet -->
<script>
.CoolLabel { padding-right: 50px; color: Red; margin-top: 10px }
</script>

<-- This is inside my HTML document -->
<script>
.CoolLabel { #include_old_CoolLabel; margin-top: 5px }
</script>

As you can see, I'm trying to re-define the CoolLabel CSS style and change the margin-top from 10px to 5px...

koyama
05-26-2007, 04:45 AM
I think you mean style and not script ? This should do the trick. Or am I wrong?

<-- This is from an external stylesheet -->
<style type="text/css">
.CoolLabel { padding-right: 50px; color: Red; margin-top: 10px }
</style>

<-- This is inside my HTML document -->
<style type="text/css">
.CoolLabel { margin-top: 5px }
</style>

sofakng
05-26-2007, 04:49 AM
You're right, I meant <style> tags, sorry!

In your example, wouldn't the 2nd CoolLabel CSS tag only have the margin-top 5px property? Wouldn't it lose the padding-right and color properties from the first definition of CoolLabel?

koyama
05-26-2007, 04:52 AM
In your example, wouldn't the 2nd CoolLabel CSS tag only have the margin-top 5px property? Wouldn't it lose the padding-right and color properties from the first definition of CoolLabel?
It wouldn't.

sofakng
05-26-2007, 04:54 AM
Ahhh, so then let's say I had this:

<style type="text/css">
.CoolLabel { padding-right: 50px }
.CoolLabel { margin-top: 10px }
.CoolLabel { color: red }
</script>

You're saying that CoolLabel would have all three properties?

koyama
05-26-2007, 05:05 AM
You're saying that CoolLabel would have all three properties?
Yes, that is what I am saying.

sofakng
05-26-2007, 05:10 AM
Hmm, I must be doing something else that is causing this not to work for me but I'll figure it out.

Thanks for the help!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum