Web Analytics Made Easy -
StatCounter CSS Cascading !?? - CodingForum

Announcement

Collapse
No announcement yet.

CSS Cascading !??

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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...

    Comment


    • #3
      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>

      Comment


      • #4
        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]

        Comment


        • #5
          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>

          Comment


          • #6
            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>

            Comment


            • #7
              I like brainjar's way best, but is it well-supported? I've never seen it before...
              Offtone.com - In the works...

              Comment

              Working...
              X