В чем разница между запуском блока кода в CSS с помощью. [точка] и # [hash]?

Пожалуйста, ответьте на следующие вопросы для двух примеров кода CSS, приведенных в конце.

1. В чем разница между двумя кодами?Один начинается с точки, а другой - с хеша.
2. Как я могу вызвать эти стили в HTML? Должен ли я использовать class = "searchwrapper" или мне следует использовать id = "searchwrapper" ? И почему, в чем разница?

Пример 1: Начиная с # [hash]

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

Пример 2: Начиная с. [Dot]

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