SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    difference between ID and class

    Code:
    <style type="text/css">
    #outer{
     width:403px;
     border:1px solid #000;
    }
    
    .top { border-top: 1px solid #000 }
    .left {border-left:1px solid #000;}
    .top_left {  border-top: 1px solid #000; border-left:1px solid #000; }
    
    .none, .left, .top, .top_left {
     width:100px;
     height:30px;
     line-height:30px;
     float:left;
     text-align:center;
    }
    
    </style>
    
    
    <div id="outer"> 
    
      <div class="none">none</div>
      <div class="left">left</div>
       <div class="left">left</div>
      <div class="left">left</div>
      
      <div class="top">top</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      
      <div class="top">top</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
    
    </div>
    I made the above code. it works fine.

    and I changed a little like the following for understanding about what is different between "ID" and "class."

    Code:
    <style type="text/css">
    .outer{
     width:403px;
     border:1px solid #000;
    }
    
    .top { border-top: 1px solid #000 }
    .left {border-left:1px solid #000;}
    .top_left {  border-top: 1px solid #000; border-left:1px solid #000; }
    
    .none, .left, .top, .top_left {
     width:100px;
     height:30px;
     line-height:30px;
     float:left;
     text-align:center;
    }
    
    </style>
    
    
    <div class="outer"> 
    
      <div class="none">none</div>
      <div class="left">left</div>
       <div class="left">left</div>
      <div class="left">left</div>
      
      <div class="top">top</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      
      <div class="top">top</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
      <div class="top_left">top_left</div>
    
    </div>
    although I changed ID into class, I see there is no difference in result.
    I am still like to know about what is difference between ID and class.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The difference is ID should be applied to one tag per page, as CLASS should be used on myltiple elements, just as you have done.

    While that's their use, browsers still reneder multiple id elements, but it won't validate as far as i know.

    I find it also makes it a little bit easier when going through your code to make changes.


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
  •