href style inheritance 1

[tanderso]

I would like to define menu and submenu styles for links where submenu inherits all of the menu properties except for the ones it changes. Does CSS have the capacity to do this?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

 

[QuietDean]

CSS rules can be defined for where they are as well as what they are.

So if I had two Anchors, one in a <div> whose class was 'menu', and the other anchor was in a table whose class was 'submenu', I could set it like-

div.menu a {color: blue;}

table.submenu a {color: red;}

Word of warning, though. I have found in IE 5+, when you set these, unless you define everything in each rules, then it picks up on the baseline a rule as well. ie it inherits the rules from

a { text-decoration: overline }

unless you express otherwise in the div.menu a rule.

Netscape is a lot better behaved in this instance.(for once). It tends to ignore what it doesn't understand.

Hope That helps. Dean Owen

 

[tanderso]

Thanks, that was very helpful. I had to use !important in order to force overriding some of the inheritance, such as text-decoration. Is there a way to do class inheritance outside of the HTML hierarchy? For instance, div.menu.submenu?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

 

[QuietDean]

Its a nice idea, but I have never managed to make that example work. maybe in the next generation of browsers...

I have also found that as long as the inheritance is logical, ie treat it like you would a JavaScript, then it will behave itself implicably.

Remember, CSS is bound to HTML. So forcing inheritance outside of the HTML would be lethal... Dean Owen

 

[tsdragon]

In theory style sheets are SUPPOSED to work that way. That's why they are called CASCADING style sheets.
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[QuietDean]

But in practice, I have found that the Cascade just means what order of importance thay attach each rule.

In other words, which is more important, an inline rule or an embeded style sheet. Obviously, the inline rule takes precedance. This is the cascade.

For what Tanderso gave me the impression of wanting was an order of hierachy outside of the HTML structure. This seems a bit illogical to me. A bit like defining a place to attach a rule, but without that place existing. Dean Owen

 

[tanderso]

What I really want is a way to define styles based on other styles so that I don't have to reproduce most of the effects of that style. For instance, for my particular paragraph, I want a font style, size, line-spacing, etc. And I want a style based on that one which bolds and italicizes a section of text, and another based on the same one which does link text, redefining the text-decoration and color, but inheriting the other features of the style.

eg.

<span class=&quot;my_style&quot;>This text is in the font face, size, etc., which I have defined. <span class=&quot;my_style.em&quot;>This is emphasized text (or speech, or braille, etc., depending on the medium) inheriting the same font face, size, etc. as the base style.</span> <a href=&quot;link.html&quot; class=&quot;my_style.link&quot;>Click here for more info!</a> The preceding link is blue and hovers as red and underlined, but has the same font face, size, and other features as the base style.</span>

It seems that this is somewhat possible given the method that Dean showed me, except that you cannot simply define sub-styles. Instead you have to associate it with a particular HTML tag. I'd rather not use <em> to define my text, but instead to use <span class=&quot;my_style.em&quot;>. This way I can define several levels of description and also not have to associate them with tags which may not describe my usage.

eg.

<span class=&quot;my_style&quot;>This is courier 10 italic.</span>
<span class=&quot;my_style.em&quot;>This is courier 10 italic bold</span>
<span class=&quot;my_style.em.blue&quot;>This is courier 10 italic bold blue</span>
<span class=&quot;my_style.small&quot;>This is courier 8 italic</span>
etc.

And then I can change all of these styles to Times New Roman instead of Courier by simply changing the font face specified in the definition of &quot;my_style&quot;, rather than going to each sub-style and changing it in each of them.

Even better would be the addition of styles. For instance, let's say I defined .em to apply bold to the text, and I defined .blue to make the text blue. If I apply <span class=&quot;em.blue&quot;> or <span class=&quot;blue.em&quot;> then it would start with the first style defined and alter it according to the redefinitions in each succeeding style, both of the above examples producing blue, bolded text.

If any of this is remotely possible, particularly without necessarily attaching the style to a specific HTML tag, please inform me of this.

Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

 

[QuietDean]

I think I see what you mean. Classes of classes?

If so, then sorry but no. To quote w3c -

------------

Only one class can be specified per selector. 'P.pastoral.marine' is therefore an invalid selector in CSS1.

------------

However, in context most 'selectors' will inherit the attribs of their parent element. Therefore you can set your base style for the body, and the classes will go from there.

As to moving away from HTML tags, that does seem a bit strange to me. Isn't that what they are there for? Or have I misunderstood? Dean Owen

 

[tanderso]

I don't think there is any need for <font> <b> <em> or any other style tag. They should all be subsumed under <span> and <div>, thus making them entirely customizable via CSS. I don't see why you should have to attach a style to a tag. p.style1 em should be written as style1.p.em in my opinion, where .p and .em are not attached to tags, but just names of styles. Either that, or make the tags XML customizable so that I can have <submenu> and <bold-indent-small> if I want and then be able to define a style as submenu.style1 bold-indent-small. But then it just gets confusing. The best way to do it would be to have &quot;classes of classes&quot; as you put it. I'm surprised W3C did not do this. One of the great things I love about JScript is the infinite hierarchy of properties you can define. The same should be true of CSS.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

 

[QuietDean]

I agree. Although I though you could just have your own tags if you wanted them? I have used in IE5.5 a tag called <dean> to which I attached a style rule. However, I am pretty darn sure that even though it worked, it is not approved practice

Dean Owen