SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking some n00b CSS questions

    First off, what does .name mean? Like, in your style sheet,

    Code:
    .name   { color: #457623;  }
    When should you use id or class? Or does it matter?

    Code:
    #name { }  div.name { }
    I know class only applies to div's, in that case, and you can define anything as an id, but i f you are just working with <div>'s to say, id or class?

    Styling <ul><li>, I don't get how to do this. Could someone give me an example of making a list look like a vertical menu? How do you take away to diamond/square before each list item?


    Thanks!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you go and read some of the many excellent CSS articles or tutorials here at Sitepoint or elsewhere on the web?

    Answers are:

    .name means that the style will be applied to any element given the class of "name" - e.g. <p class=name>Your text</p>

    Use id if the element will only apply once on the page. Use class if it will be used several times.

    You can give anything an id or class - it's not restricted to DIV tags (although that may well be the most common usage).

    Use ul li {list-style: none} to remove the bullet point on a list (I think).

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    First off, what does .name mean? Like, in your style sheet
    This is just a class that has been made up to colour any element that it is applied to.
    Code:
    <p class="name">This text will be colour #457623 </p>
    The word name could be defined as anything you want e.g. .title {color:#000}

    Code:
    <p class="title">This text will be colour #457623 </p>
    When should you use id or class? Or does it matter?
    You use a class when you want to re-use the deifinition again. A class can be used as many times as you like in the same page.

    An ID should only be used once uniquely (although a lot of people forger this, whiich is why browers are so forgiving (javscript is not however)).

    Most times id's are use for important parts of the page to give structure and meaning.

    eg #mainheader, maincontent, #mainfooter : These id's should be the only time that each one will be used on the page. (you can make your own names up of course).If you find you need to use it again then it should be a class.

    I know class only applies to div's, in that case, and you can define anything as an id, but i f you are just working with <div>'s to say, id or class?
    Classes and id's can be applied to virtually all html elements and are not just for divs.

    Which one you use is as mentioned above. Id it's a once only use for a main section the use id.

    Classes and id's are more or less the same and perform the same function (except that id's have a higher specifity than a class of the same name, but that's unlikely to ever be a problem).

    If you wanted you could just use classes all the time and never have to worry about id. However for more semantic code identifying the main sections with id's uniquely is good practice.

    Styling <ul><li>, I don't get how to do this. Could someone give me an example of making a list look like a vertical menu? How do you take away to diamond/square before each list item?
    Have a look here at this tool and then examine the code:

    http://www.accessify.com/tools-and-w...st-o-matic.asp

    The bullet is hidden using list-style-type:none:
    Code:
    ul{ list-style-type: none;}
    Hope that answers some of your questions

    Paul

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Oh, and, when I said "only applies to divs, in that case" I ment that when I defined "div.name" in the css, that class could only be used on divs, not tables or cells or etc.
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    You can give anything an id or class
    Not forgetting of course that you can give something and id and a class

    For instance, you might have several divs which need the same border so you'd give them all the same class. However, each div may need a different background so you may additionally decide to give each div a unique ID.


    Andy
    From the English nation to a US location.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    For instance, you might have several divs which need the same border so you'd give them all the same class. However, each div may need a different background so you may additionally decide to give each div a unique ID.
    Yes that's correct you can apply an id and a class to the same element. But just to complicate matters you could also apply two classes to the same element and save some code.
    e.g
    Code:
    .red {color:red}
    .blue {color:blue}
    .big {font-size:x-large}
    .small {font-size:x-small}
    Code:
    <div class="big red">This is big red</div>
    <div class="big blue">This is big blue</div>
    <div class="small red">This is small red</div>
    etc...
    Put the class in the same class definition separated by a space and both will apply.

    Paul

  7. #7
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    just to complicate matters you could also apply two classes to the same element and save some code.
    Ooh, that's slick! I can't understand how I've gone this long without knowing that, but thanks for the revelation


    Andy
    From the English nation to a US location.

  8. #8
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that is really neat
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::


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
  •