CSS Cascading !??

freddybee · 07-08-2002, 04:49 PM

Hello,

I do have a lot of class defined in my CSS stylesheet.
Some of them have a lot in common but I don't know how to define a new class "based" on another one, ie :

.TableText{
text-align : right;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #A1BEEF;
}

.TableText2{
text-align : right;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #A1BEEF;
font-weight : bold;
}

In fact I would like to define TableText2 as TableText1 + bold font

Remark : I don't want to use id tag (#TableText) or P tag

Thanks in advance

I hope I am clear enough but should apologize because english is not my mother tongue..

meerkat · 07-08-2002, 05:01 PM

freddy…

What you can do is the following;

.TableText, TableText2{
text-align : right;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #A1BEEF;
}

.TableText2{
font-weight : bold;
}

What you are doing is grouping all the classes with same attributes together and if (as in this case) you want to add an extra attribute you do it separately.

Hope that helps

meerkat :)

edgework · 07-08-2002, 05:48 PM

Another approach is to define your bold class as a subset of your main class. I've defined a class, tableText, and also a style for <p> tags. The middle style is for any .bold class within a .tableText class.

This simple example applies the tableText class to the table as a whole, then, calling .bold in an individual cell applies that class in that instance only. Note that calling a .bold class for the <p> tag does nothing, since my bold class is only defined to be a child of the tableText class.

If tableText1 and tableText2 are meant to be equal in the formatting hierarchy, then meerkat's method not only works as well, but is more correct, since it represents the relationship between them as well as defining their attributes. But if tableText2 is in fact a child class of tableText1, then you should define them that way in your style sheet.

<STYLE type="text/css">

.tableText{
font-weight: 400;
font-family:"Verdana";
font-size:9px;
}

.tableText .bold{
font-weight: 800;
}

p{
font-family: serif;
font-style:italic; font-size:16px;
}

</STYLE>
</HEAD>
<BODY>

<table class="tableText">
<tr>
<td>This is the bang."lass.</td><td class="bold">This is class bold</td>
</tr>
<tr>
<td>Next td</td><TD>Next after that</td>
</tr>
</table>
<p class="bold">This is a paragraph. Class bold has no effect here.</p>

</BODY>

freddybee · 07-08-2002, 06:25 PM

Thank you very much ...

Just one last question : if I do not apply the class TableText to the table but to a cell, is there a way to tell a cell to be a TableText and bold too ???

I.e. <TD Class="TableText.bold">Test</TD> ????

Have a nice day

edgework · 07-08-2002, 07:40 PM

It's all a question of how your page is actually formatted. The situation you just described suggests that instead of creating a .tableText class, you might simply place a style definition like so in your style sheet:

td {
...
...
...
}

That would handle the generic condition of your table cell formatting.

Then, you could possibly include definitions for special case classes, ie td.quote, td.costs, td.info or whatever you want to call them and style those however you wish. Any style that is applied to td and that is not modified in a subclass will be inherited as is. You would still call the subclasse the same way-- <td class="info"> cell text here </td>

BrainJar · 07-08-2002, 10:14 PM

You can also assign more than one style class to an element, just separate the class names with spaces:

.TableText{
text-align : right;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #A1BEEF;
}

.BoldText{
font-weight : bold;
}

<td class="TableText">text</td>
<td class="TableText BoldText">bold text</td>

SYP}{ER · 07-09-2002, 12:31 AM

I like brainjar's way best, but is it well-supported? I've never seen it before...