What is the difference between # and . with CSS?

Question

What is the difference between # and . with CSS?

#main
{
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}


.main
 {
    background-color: #fff;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
 }

Answer 1

'#' represents an id. the '.' is a class.

So.. <tagname id="main"> and <tagname class="main">....

hope that helps.

Answer 2

'#' sign represents the id of a html element. it is for:

<div id='main'>...</div>

'.' sign represents the class of a html element. and this is for:

<div class='main'>...</div>

Sinan.

Answer 3

A class (.my_class_name) may be present multiple times in the same page while an id (#my_id_name) is unique.

Answer 4

'#' represents using a id, and . represents an class. As you are aware, you can't duplicate IDs in HTML, so if you want the same styling to represent multiple items, you'd use a class instead.

Answer 5

# is applied automatically to element with same id CSS

#id1 {some style}

HTML

<div id="id1"> <-- automatically applied here...

CSS

.Dot1 {}
DIV.Dot2 {}

DIV.Dot2 an only be applied to DIV with class "Dot2" if any other element tries to use Dot2 it will not work

HTML

<div class="Dot1"> <-- only applies when you give class..

. is not applied automatically indeed you have to use it in "class" attribute of every element where you want to apply them.

Answer 6

http://www.w3.org/TR/html401/struct/global.html#id-and-class

The id attribute assigns a unique identifier to an element.

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g. for identifying
  fields when extracting data from HTML pages into a database, translating
  HTML documents into other formats,
  etc.).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

Answer 7

The # indicates an ID selector, the . a class selector. IDs must be unique in a document (so there is only one element with one specific ID) while a class can contain multiple elements and an element can be in multiple classes.

So #main will select the one element that’s ID main is while .main will select all elements that are in the class main. Apart from that, both selectors have a different specificity that affect the order in which CSS properties are applied to elements or overwrite existing properties.