SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot mattyj's Avatar
    Join Date
    Mar 2004
    Location
    Western Australia
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    id seems to work same as class

    After reading more about XHTML Syntax Rules at w3schools.com I discovered that:

    "The id attribute replaces the name attribute"

    <img src="picture.gif" name="picture1" /> (old-html)
    <img src="picture.gif" id="picture1" /> (new-xhtml)

    I'm not sure what a use for the name is, I've never used it in my work to date as I'm not yet programmer-savvy.

    What I really want to know is I am modelling my homepage on the layout template from Cross-Browser.com (see Kevin Yanks css article on multi-column layout) at:

    http://cross-browser.com/x/examples/layout2.html

    this (template) uses id's, ie ..

    <div id="centerColumn">
    <div id="centerColumnContent">

    ..which seem to work the same as css classes. Back in the css sheet a hash (#) is used instead of a period (.) for the id/class. Are the id and class one and the same? in other words can I officially put in my css page:

    #specialcolumn {
    width: 760px;
    background-color: #000000;
    }

    and then put in my xhtml page:

    <div id="specialcolumn">content</div>

    rather than:

    .specialcolumn {
    width: 760px;
    background-color: #000000;
    }

    <div class="specialcolumn">content</div>


    I've done it to a number of web page elements and the ID method seems to work just as if 'class' is used.

    The Cross-Browser template works with a Javascript to make columns line up in the multicolumn layout, hence I think the use of the 'ID' rather than class for the divs so they're recognised. But it's raised this question for me as to whether this is an enhancement of XHTML because I'm migrating (migraining).

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Id vs. class

    In (X)HTML, an id must occur no more than once in a page, uniquely identifying one single element. A class can be used for any number of elements, and for different elements at that.

    In a CSS selector, using an id value has greater weight than using a class value; therefore, styles selected using an id will outweigh those selected using a class when applying to the same element.
    Regards,
    Ronald.

  3. #3
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    An id is for one container per page. If you want to use the style more than once, use class.

    Name is also used by IE for anchors (I think), so moving to id alone can cause problems if you want to use anchors. I have a feeeling that it makes java a little more complicated in addressing elements on the page.

    However, id styling has more importance than class styling. So it can be useful in providing localised styling to a tag. If you have a class with a font color specified, say, and applied this to a number divs, the divs would all have the same font color. Say there was a lot of styling in that style, then they would all get it.

    Now, on ONE of those divs you wanted a different font color, but the rest of the styling the same, if the div has an id, you can set the more important font color there, by putting both an id and class in the same div tag.




    Trevor

  4. #4
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID = Identification. Just like the ID in your wallet, it's unique to you. In XHTML, the ID must be unique to the owner.

    Class = Group. Just like classes in school, it's a group of objects. In XHTML, the class can be a group of objects.

    It's that simple.

  5. #5
    ☆★☆★ 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 ClevaTreva
    Name is also used by IE for anchors (I think), so moving to id alone can cause problems if you want to use anchors. I have a feeeling that it makes java a little more complicated in addressing elements on the page.
    IE uses id for anchors just fine, just like Opera, Mozilla, etc. can still use name for anchors. I believe it was really old versions of IE and Netscape that only used name. In any case, both name and id are allowed under XHTML 1.0 Transitional, so use both if needed:
    HTML Code:
    <a name="books" id="books">books</a>

  6. #6
    SitePoint Zealot mattyj's Avatar
    Join Date
    Mar 2004
    Location
    Western Australia
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all very much, I wasn't sure if ID could be used for styles or if it's best left alone. From what I can see it can be used for styling purposes and along with classes in the same tag if necessary.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Id perfect for styles

    Using ids in CSS selectors makes it possible to very directly target elements that are decendant of the element that has the id. Typically, a page would be divided up into a number of divs, all representing specific sections of the page, like "header", "menu", "content", "footer", etc.
    Giving each div an id, using these ids in CSS selectors you can specifically target elements that are in these divs.

    I cooked up a simple example to illustrate this:

    CSS:
    Code:
    #special {
    border: 1px dashed #999;
    }
    #special p {
    color: #c00;
    }
    .normal {
    color: #090;
    }
    p {
    color: #00c;
    }
    HTML:
    Code:
    <div id="special">
      <p class="normal">Is this text green?</p>
      <p>This text should be red, anyway</p>
    </div>
    <div>
      <p class="normal">This text is definitely green</p>
      <p>This text is blue, with a <span class="normal">green bit</span> I guess</p>
    </div>
    The text color of the first paragraph in the "special" div is not green but red, since the "#special p" selector overrides the ".normal" class selector; the second p is red because of that same "#special p" selector.

    In the second div, the first paragraph is green because of the class; the second p is blue, apart from the spanned bit which has the same (green) class as the first p.
    Regards,
    Ronald.

  8. #8
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a further variation: elements can have more than one class. For example, CSS:
    Code:
    .bigtext { font-size: 2em; }
     .red {color: red}
    HTML
    HTML Code:
    <p class="bigtext">big text!</p>
     <p class="red">red text!</p>
     <p class="red bigtext">red big text!</p>

  9. #9
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a further variation: elements can have more than one class. For example, CSS:
    Code:


    .bigtext { font-size: 2em; }
    .red {color: red}HTML
    HTML:


    <p class="bigtext">big text!</p>
    <p class="red">red text!</p>
    <p class="red bigtext">red big text!</p>
    That is one thing I never knew. Are they just supposed to be separated by spaces, or commas, or what?

  10. #10
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Spaces. The last one gets the importance in application (i.e. overrides the earlier ones, just like in a style sheet, except if you use the !important attribute).





    Trevor


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
  •