Newbie Question re CSS 'classes' and #

Discussion in 'HTML' started by Damien Sawyer, Aug 16, 2004.

  1. Hi,

    I'm trying to learn CSS.

    I found a site saying that you set up a 'class' like this

    ..MyClass
    {
    background-color: #468;
    }

    And that you can use the class in the actual document by using the class
    keyword

    <p class="menu">

    Can someone please explain what the # is for? Are these like classes? What
    are they called? They seem to me to do the same thing. Is there a
    difference?

    eg

    #links
    {
    background-color: #468;
    }
    #links a
    {
    font-size: xx-large;
    }

    And then in to use them, use "ID" instead of "CLASS"


    eg

    <div id="links">


    Thanks in advance :)



    Damien Sawyer
    Damien Sawyer, Aug 16, 2004
    #1
    1. Advertising

  2. Damien Sawyer

    Neal Guest

    On Mon, 16 Aug 2004 17:14:16 +1000, Damien Sawyer <>
    wrote:

    > Hi,
    >
    > I'm trying to learn CSS.
    >
    > I found a site saying that you set up a 'class' like this
    >
    > .MyClass
    > {
    > background-color: #468;
    > }
    >
    > And that you can use the class in the actual document by using the class
    > keyword
    >
    > <p class="menu">


    Except that in the above, there are 2 different classes, sure.

    > Can someone please explain what the # is for? Are these like classes?
    > What
    > are they called? They seem to me to do the same thing. Is there a
    > difference?


    As a . denotes a class, # denotes an ID. There are 2 major differences
    between classes and IDs - Each specific ID can be used once in a page (you
    cannot have two elements with id="example" on a page, but there's nothing
    wrong with using many IDs on the page) and elements with an id can be used
    like <a name="example">. Other than these differences, CSS handles them
    similarly.

    http://www.w3.org/TR/html4/struct/global.html#adef-id provides more
    information.
    Neal, Aug 16, 2004
    #2
    1. Advertising

  3. Damien Sawyer

    Mark Parnell Guest

    Mark Parnell, Aug 16, 2004
    #3
  4. Thanks guys - that's great.


    DS
    Damien Sawyer, Aug 16, 2004
    #4
  5. Is this a wrong way of using id's? , have 2 same id's on a page, W3 says you
    can't? but in IE6 it looks ok?

    <div id="nav">
    <div class="title">
    &nbsp;
    </div>
    <div>
    <p></p>
    </div>
    </div>

    <div id="nav">
    <div class="title2">
    &nbsp;
    </div>
    <div>
    <p></p>
    </div>
    </div>

    > As a . denotes a class, # denotes an ID. There are 2 major differences
    > between classes and IDs - Each specific ID can be used once in a page (you
    > cannot have two elements with id="example" on a page, but there's nothing
    > wrong with using many IDs on the page) and elements with an id can be used
    > like <a name="example">. Other than these differences, CSS handles them
    > similarly.
    >
    > http://www.w3.org/TR/html4/struct/global.html#adef-id provides more
    > information.
    William Desrochers, Aug 16, 2004
    #5
  6. On Mon, 16 Aug 2004 08:59:32 -0400, William Desrochers
    <> wrote:

    > Is this a wrong way of using id's? , have 2 same id's on a page, W3 says
    > you
    > can't? but in IE6 it looks ok?
    >
    > <div id="nav">
    > <div class="title">
    > &nbsp;
    > </div>
    > <div>
    > <p></p>
    > </div>
    > </div>
    >
    > <div id="nav">
    > <div class="title2">
    > &nbsp;
    > </div>
    > <div>
    > <p></p>
    > </div>
    > </div>
    >
    >> As a . denotes a class, # denotes an ID. There are 2 major differences
    >> between classes and IDs - Each specific ID can be used once in a page
    >> (you
    >> cannot have two elements with id="example" on a page, but there's
    >> nothing
    >> wrong with using many IDs on the page) and elements with an id can be
    >> used
    >> like <a name="example">. Other than these differences, CSS handles them
    >> similarly.
    >>
    >> http://www.w3.org/TR/html4/struct/global.html#adef-id provides more
    >> information.


    It works alright when viewed but validators say it's a no-no.
    Alternatively you could use classes, where stylesheet would be...

    ..nav .title {

    }

    ....compared to when using IDs it's...

    #nav .title {

    }

    --
    Jari Lehtinen
    http://www.jarilehtinen.net
    Jari Lehtinen, Aug 16, 2004
    #6
  7. Damien Sawyer

    Sam Hughes Guest

    "William Desrochers" <> wrote in
    news:cfqb3i$g0r$:

    > Is this a wrong way of using id's? , have 2 same id's on a page, W3
    > says you can't? but in IE6 it looks ok?


    You have 2 of the same id names on a page; yes, that is illegal. It
    looks okay because IE 6 doesn't know what else to do with it. IDs can't
    be repeated because they're used for things other than CSS.


    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 16, 2004
    #7
  8. Damien Sawyer

    Neal Guest

    On Mon, 16 Aug 2004 08:59:32 -0400, William Desrochers
    <> wrote:

    > Is this a wrong way of using id's? , have 2 same id's on a page, W3 says
    > you
    > can't? but in IE6 it looks ok?


    Remember the other use of id's - link points. Given your code:

    <div id="nav">
    <div class="title">
    &nbsp;
    </div>
    <div>
    <p></p>
    </div>
    </div>

    <div id="nav">
    <div class="title2">
    &nbsp;
    </div>
    <div>
    <p></p>
    </div>
    </div>

    what if I wanted to link to one of these divs directly? <a
    href="yourpage.html#nav">Link goes where?</a>

    A good way to remember to use one unique ID per page. I'd change the first
    div to id="nav1" and the other to id="nav2", and the stylesheet could look
    like:

    #nav1, #nav2 {
    foo: bar;
    tip: toe;
    }
    Neal, Aug 16, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Beckwith
    Replies:
    2
    Views:
    4,310
    Sid Ismail
    Jul 12, 2003
  2. richard
    Replies:
    12
    Views:
    752
    dorayme
    Mar 9, 2010
  3. August0866
    Replies:
    1
    Views:
    113
    Sebastian Hungerecker
    Mar 17, 2008
  4. Mark Smith

    CSS classes within classes

    Mark Smith, Dec 22, 2008, in forum: Javascript
    Replies:
    3
    Views:
    124
    Mark Smith
    Dec 22, 2008
  5. Larry Lindstrom
    Replies:
    19
    Views:
    1,284
    Jonathan N. Little
    Jun 12, 2012
Loading...

Share This Page