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

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*/
}