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. Advertisements

  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. Advertisements

  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. Advertisements

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. Jacques Koorts

    newbie question on mouse hand and css

    Jacques Koorts, Apr 2, 2004, in forum: HTML
    Replies:
    13
    Views:
    5,154
    Mark Parnell
    Apr 29, 2004
  2. =?ISO-8859-1?Q?G=E9rard_Talbot?=

    Whining and bitching about MSIE 6 CSS bugs and CSS support

    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Jul 9, 2005, in forum: HTML
    Replies:
    0
    Views:
    551
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    Jul 9, 2005
  3. Replies:
    6
    Views:
    495
  4. richard
    Replies:
    12
    Views:
    977
    dorayme
    Mar 9, 2010
  5. August0866
    Replies:
    1
    Views:
    208
    Sebastian Hungerecker
    Mar 17, 2008
  6. Jerry C.
    Replies:
    8
    Views:
    543
    Uri Guttman
    Nov 23, 2003
  7. Mark Smith

    CSS classes within classes

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