Урок 10. Классы: стилизуем то, что нужно

До сих пор мы писали селекторы по имени тега: p { color: red; } — и красными становились все абзацы сразу. Но так почти никогда не нужно.

Чтобы выбрать конкретные элементы, им дают класс — это просто имя, которое ты придумываешь сам:

<p class="vazhno">Это важный абзац</p>
<p>А это обычный</p>

И в CSS обращаются к этому имени через точку:

.vazhno {
  color: #ff5d9e;
  font-weight: bold;
}

Несколько классов сразу

Одному элементу можно дать несколько классов через пробел — и он получит стили от каждого:

<p class="karta bolshaya">Текст</p>

Как называть классы

• по смыслу, а не по виду: opasnost лучше, чем krasniy — иначе завтра ты перекрасишь его в синий, и имя начнёт врать;
• латиницей, без пробелов, маленькими буквами;
• слова разделяют дефисом: glavnaya-knopka.

Частые вопросы