SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Basics: Using ID and Class attributes?

    Hello everyone,

    I have never figured completely how to use these properly.

    I usually use #ID as 'containers' and 'sub containers', and I use .class for other elements inside the said containers. For example

    Code:
    #container{
    margin: 0 auto;
    }
    
    .nopadding h1{
    padding: 0;
    }
    
    <div id="container">
       <h1 class="nopadding">No Padding Heading</h1>
    </div>
    I have no idea WHY I used them in this manner; sometimes I randomly these in different situations.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, if you do .nopadding h1, it is selecting an <h1> element that is a child of hte .nopadding element. Make it "h1.nopadding"
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, i'm not sure if i understand your question. Do you mean when to use id's and when classes and what the difference is between them?

    This will bring you up to speed if it's the case.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be h1.nopadding, no?

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes h1.nopadding

    It goes to show how shaky my fundamental knowledge is. I will have to solidify it by reading more articles.

    Thanks for the link Luki be!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes, h1.nopadding, as I said. The h1.nopadding wil select an <h1> element with the class"nopadding"

    Just practice CSS and it'll all start to click into place. It can be a steep learning curve for beginners .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    As a general rule, I use classes for elements that I know I'll be using multiple times within a document. All other elements that only appear once within a document will be given the unique identifier (ID).

    I do try to avoid using IDs and classes wherever possible, however. Sometimes you can accomplish a lot by just using the cascade.

    Your above example does not work because the code reads (in plain English):
    "Apply this style to all H1 elements that are descendants of an element (ancestor) with a class of noPadding".

    -------------#container .noPadding----------

    ---------------------h1---------------------


    Code HTML4Strict:
    <div id="container" class="noPadding">
      <h1>I'm a descendant of .noPadding</h1>
    </div>
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •