Difference between below css styles?

Question

Possible Duplicate:
In CSS what is the difference between “.” and “#” when declaring a set of styles?

I am new to web development. may i know the difference between below two CSS styles?

.styleName{
color:red;
}

and

#styleName{
color:red;
}

Thanks!

It's great that you are new to web development, but please make an effort to learn the basics on your own before asking rudimentary questions here that can be answered by any [beginner's tutorial](http://www.htmldog.com/guides/cssintermediate/classid/). Where are you learning CSS from? — Wesley Murch, Dec 21 '11 at 13:42

score 2 · Answer 1 · answered Dec 21 '11 at 12:58

the . prefix refers to the class of an element. The # prefix refers to the ID of an element.

So your first example would look for something like <element class="styleName">.... . Your second example would look for something like <element id="styleName">....

score 1 · Answer 2 · answered Dec 21 '11 at 12:57

One references an element with a class name of styleName (class="styleName" in your HTML), the other references one with an ID of styleName (with the id="" atrribute).

A # in CSS denotes an ID selector, whereas a . (dot) denotes a class selector. An ID must be unique to the document, whereas a class can be given to more than one element.

score 1 · Accepted Answer · answered Dec 21 '11 at 12:57

The dot means "class" where the "#" sign means "id".

The first is matching all tags with which are of class type "styleName". The second is the same for ids.

Example:

<p class="styleName">hi</p> <!-- first matches, its a class of name styleName -->
<p id="styleName">hi</p> <!-- second matches, its an id of type styleName -->

Note that you misspelled "color" in the #styleName.

score 0 · Answer 4 · edited Dec 21 '11 at 18:38

0

.styleName would match any objects with the class of styleName eg <span class="styleName> #styleName would match any objects with the id of styleName eg <span id="styleName> Also you spelled color wrong in the #styleName section

edited Dec 21 '11 at 18:38

Mike DeSimone

41,631
10
72
96

answered Dec 21 '11 at 12:59

Matt Fellows

6,512
4
35
57

score 0 · Answer 5 · answered Dec 21 '11 at 13:00

0

They match on different thing. The first (.styleName) matches on all elements having the class styleName. This can be multiple elements. The second on #styleName matches the element having the id styleName. There can be only one element with that id.

answered Dec 21 '11 at 13:00

Roger Lindsjö

11,330
1
42
53

Difference between below css styles?

5 Answers5