SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More than 1 class in a tag?

    Is it valid to put more than 1 class definition in a tag, eg.

    <td class='form' class='bold'>

    Thanks for your comments.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Create a rule to go by ID instead of 2 classes, or use a class and an inline style. Example:
    CSS:
    Code:
    #bold {
      font-weight: bold;
      color: #000;
    }
    .form {
      border: 1px solid black;
      padding: 5px;
    }
    HTML:
    Code:
    <td id="bold" class="form">
    Be careful though, as any rules from the ID or inline styles will override any styles set in the class.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Actually I've been told that this is quite valid.

    Code:
    .bold { font-weight: bold; color: #000; } 
    .form { border: 1px solid black; padding: 5px; } 
    
    <td class="form bold"> 


    This is very useful if you want to have alternate classes but say just one element needs changing each time.

    It saves you doing something like ;

    Code:
    <div class="red">
    <div class="big">
    <p> Big red writing</p>
    </div>
    </div>


    Instead you can write this :

    Code:
    <div class="big red">
    <p>Big red writing</p>
    </div>

    Thats a simple example and not one that you'd probably use it for but it shows the usage.

    It would be useful perhaps if you wanted everyother line to be red then you could do something like :
    Code:
    <style type="text/css">
    <!--
    .big {
    font-size: large;
    }
    .red {
    color: #FF0000;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="big red"><p>Big red Writng</p></div>
    <div class="big"><p>Big writing (not red)</p></div>
    <div class="big red"><p>Big red writing</p></div>
    
    </body>

    It does need planning to make sure you're not using it unneccessarily when a single class may be better, but it's very useful to know.

    Paul




  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or what about something like this for a 'spreadsheet like' thingy:
    Code:
    td {font-size: 0.8em;}
    td.subtotal {font-weight: bold}
    td.total {font-size: 1em; font-weight: bold}
    td.negative {color: red;}
    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed, you can have multiple classes, seperated with a space, Opera, IE, and Mozilla support it.

    (IE5.5/Win, not sure about 5.0).
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just tested... works in ie5/win

  7. #7
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your comments.
    Code:
    <div class="big red">
    does it for me :-)
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this multiple class method valid according to W3C?
    It 'validates' OK, but I just wanna know for sure that it's not amongst the caveats and is being supported by accident rather than by design.

    Also is it likely to be something that is carried forward to future standards?
    Just wanna know if this handy little timesaver is a habit worth getting into.

    Fwiw, to add to the 'supported by' list:

    Camino 0.7 (Mac) = √
    IE5.2 (Mac) = √
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this multiple class method valid according to W3C?
    Yes. From: http://www.w3.org/TR/html401/struct/...tml#adef-class
    class = cdata-list [CS]
    This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
    So it's official in HTML 4.01. I suspect it's valid in XHTML1, too, so you've got it as long as those two are supported , which ought to be a while yet.

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, it is valid in XHTML 1.1 although Netscape 4.7x will most likely freak-out. It's one of those more peculiar things I had forgotten about since I typically think of single tokens.

  11. #11
    Jamison DaDaHost's Avatar
    Join Date
    Sep 2002
    Location
    Florida, USA
    Posts
    244
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I woke up this morning thinking about this thread images/smilies/wink.gif

    My thinking was wouldn't it be great if you could use background images to get a great rounded rectangle look. Something like :
    Code:
     
    <div class="cornertopleft top cornertopright 
    right middle left cornerbottomleft bottom 
    cornerbottomright">
    Look Ma! I'm in a rounded rectangle.
    </div>
    I hit a brickwall though.images/smilies/bawling.gif Background-images will override each other so my div will only have the "cornerbottomright" or whatever IE6 randomly chooses. http://www.dadahosting.com/dev/styleborder.html

    Do you think CSS will allow you to stop class override and instead treat classes as additive?

    Thanks,
    Jamie
    Last edited by DaDaHost; Jun 13, 2003 at 07:52.

  12. #12
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Create a rule to go by ID instead of 2 classes, or use a class and an inline style. Example:
    CSS:
    Code:
    #bold {
      font-weight: bold;
      color: #000;
    }
    .form {
      border: 1px solid black;
      padding: 5px;
    }
    HTML:
    Code:
    <td id="bold" class="form">
    Be careful though, as any rules from the ID or inline styles will override any styles set in the class.
    Would that not leave you with only being able to have one area of the form bolded?

    The double class method seems to be the solution anyway, and it its featured in the new book I might add
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TheOriginalH
    Would that not leave you with only being able to have one area of the form bolded?

    The double class method seems to be the solution anyway, and it its featured in the new book I might add
    Yep, I also recommend the double-class method, and have been using it lately .

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know how those browsers that do not support multiple classes react?
    Do they ignore all the classes or do they recognise the first and ignore any subsequent classes?

    I can't believe that this has been part of the HTML 4 spec and it's only just started being talked about as though it's something to look forward to.
    It seems so handy that I would have thought it would be a de facto inclusion in all web-designers' tool box.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I've been using it for a while, I believe browsers just ignore everything after the first class, as far as I can remember.

    (Been a while since using IE4)
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  16. #16
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaDaHost
    Do you think CSS will allow you to stop class override and instead treat classes as additive?
    No, because that would take the 'C' out of CSS.

    One of the great things about Cascading Style Sheets is that they cascade. It allows one to to a great many nifty things, like changing only one property for a specific paragraph (by assigning it a class) while all the other properties stay the same as for the 'standard' paragraph.

    However your rounded corners prayers will be answered in CSS3. Hve a look at the draft over here: http://www.w3.org/TR/2002/WD-css3-bo...-border-radius

    Just have a few years patience...

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


Bookmarks

Posting Permissions

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