Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Paris, France
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Cascading !??

    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..
    [color=dark blue]Freddy Bee[/color]

  • #2
    New Coder
    Join Date
    Jun 2002
    Location
    Glasgow, Scotland
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Classes

    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 :)
    Ya don't need a weatherman to know
    which way the wind blows...

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    NYC
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    New Coder
    Join Date
    Jun 2002
    Location
    Paris, France
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    [color=dark blue]Freddy Bee[/color]

  • #5
    New Coder
    Join Date
    Jun 2002
    Location
    NYC
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like brainjar's way best, but is it well-supported? I've never seen it before...
    Offtone.com - In the works...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •