What is the difference between starting a block of code in CSS by . [dot] and by # [hash]?

Question

Please answer the following questions for the two CSS example codes given in the end.

1. What is the difference between the two codes? One is starting with dot and one with hash.
2. How can I call these styles into HTML? Should I use class="searchwrapper" or should I use id="searchwrapper" ? And why, what is the difference?

Example 1: Starting with #[hash]

#searchwrapper {
    /*some text goes here*/
}

Example 2: Starting with .[dot]

.searchbox {
    /*some text goes here*/
}

Answer 1

These are CSS selectors:

• #foo means an element with id foo
• .foo means all element with class foo

See http://www.w3.org/TR/CSS2/selector.html

IDs are unique, so you can only have one element with the same ID. While a class can be the same for many elements (and every element can have several classes).

Answer 2

The Difference:

. specifies a class

# specifies an ID

Class Example:

.myElement {...}

will match

<div class="myElement">

ID Example:

#myElement {...}

will match

<div id="myElement">

Class or ID: How to choose

Only one element may have a particular ID, but multiple elements may share a particular class.

• If you target one specific element, give that element an ID and use # in your CSS.
• If you target multiple related elements, give them a class and use . in your CSS.