Find the answer to your Linux question:
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
Why are there 2 of them? How do they differ? I'm only a beginning Javascript coder btw Thanks....
Enjoy an ad free experience by logging in. Not a member yet? Register.
  1. #1
    Linux User
    Join Date
    Mar 2013
    Posts
    335

    What's the difference bet <class> and <id> in HTML?


    Why are there 2 of them? How do they differ?

    I'm only a beginning Javascript coder btw




    Thanks.

  2. #2
    Linux Engineer docbop's Avatar
    Join Date
    Nov 2009
    Location
    Woodshed, CA
    Posts
    928
    If you're just getting going the the WC3 School is a great site to learn and look things up.

    W3Schools Online Web Tutorials

  3. #3
    Linux User
    Join Date
    Mar 2013
    Posts
    335
    Actually I'm not getting going, but I would still like an answer to this question. And I'd like the answer from a human

  4. #4
    Penguin of trust elija's Avatar
    Join Date
    Jul 2004
    Location
    Either at home or at work or down the pub
    Posts
    3,532
    If you mean
    Code:
    <p class="someclass" id="someid">dfjfjklsddjsdsjf></p>
    then id is a unique identifer for the element whereas many elements can have a class. Within css, a style is applied to a class with a . and to an id with a # such as
    Code:
    .someclass {font-size: 1em;}
    #someid {font-weight: bold; }
    What do we want?
    Time machines!

    When do we want 'em?
    Doesn't really matter does it!?


    The Fifth Continent

  5. #5
    Linux Engineer
    Join Date
    Dec 2013
    Posts
    1,188
    Quote Originally Posted by elija View Post
    If you mean
    Code:
    <p class="someclass" id="someid">dfjfjklsddjsdsjf></p>
    then id is a unique identifer for the element whereas many elements can have a class. Within css, a style is applied to a class with a . and to an id with a # such as
    Code:
    .someclass {font-size: 1em;}
    #someid {font-weight: bold; }
    Actually, I don't think that's quite accurate. Multiple elements can use the same id but generally it is used for one element. Each element can only use one id where as it can use multiple classes.

    In other words this works:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .para1
    {
    text-align:center;
    }
    .para2
    {
    color:red;
    } 
    </style>
    </head>
    
    <body>
    <p class="para1 para2">Hello World!</p>
    </body>
    </html>
    This works though may not be the best style:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1
    {
    text-align:center;
    color:red;
    } 
    </style>
    </head>
    
    <body>
    <p id="para1">Hello World!</p>
    <div id="para1">Hello, again</div>
    </body>
    </html>
    This doesn't:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1
    {
    text-align:center;
    }
    #para2
    {
    color:red;
    } 
    </style>
    </head>
    
    <body>
    <p id="para1 para2">Hello World!</p>
    </body>
    </html>

  6. #6
    Penguin of trust elija's Avatar
    Join Date
    Jul 2004
    Location
    Either at home or at work or down the pub
    Posts
    3,532
    While you can do that, you really shouldn't. There is no guarantee that it will work in all browsers and it will most probably cause issues with any javascript

    And from the horses mouth...

    Quote Originally Posted by w3c
    id = ID
    A unique identifier for the element.
    There must not be multiple elements in a document that have the same id value.
    What do we want?
    Time machines!

    When do we want 'em?
    Doesn't really matter does it!?


    The Fifth Continent

  7. #7
    Linux Engineer
    Join Date
    Dec 2013
    Posts
    1,188
    Quote Originally Posted by elija View Post
    While you can do that, you really shouldn't. There is no guarantee that it will work in all browsers and it will most probably cause issues with any javascript

    And from the horses mouth...
    You're quite right: The global structure of an HTML document

  8. #8
    Linux User
    Join Date
    Mar 2013
    Posts
    335
    So... if I want LOTS of elements to look the same, I use a class, and otherwise I use an id? That's all there is to it?

  9. #9
    Penguin of trust elija's Avatar
    Join Date
    Jul 2004
    Location
    Either at home or at work or down the pub
    Posts
    3,532
    You can do it that way, but it is better to style the elements directly And use class and id styling only when needed.
    Code:
    p { font-size: 1em; }
    will style all the p tags.
    What do we want?
    Time machines!

    When do we want 'em?
    Doesn't really matter does it!?


    The Fifth Continent

  10. #10
    Linux User
    Join Date
    Mar 2013
    Posts
    335
    Oh thanks so much for that tip elijah, you're a Godsend

Page 1 of 2 1 2 LastLast

Posting Permissions

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