Newbie Question re CSS 'classes' and #

[Damien Sawyer]

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

 

[Neal]

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.

 

[Mark Parnell]

Can someone please explain what the # is for? Are these like classes?

http://www.google.com.au/search?q=difference+between+class+and+id

 

[Damien Sawyer]

Thanks guys - that's great.


DS

 

[William Desrochers]

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>

 

[Jari Lehtinen]

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>

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 {

}

 

[Sam Hughes]

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.

 

[Neal]

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;
}