Селекторы в CSS

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Поздравляем! Вы только что подключили внешние CSS-стили к своей HTML-страничке.

Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили. Но когда стили подключаются с помощью внешнего файла или через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».

С селекторами вы уже немного знакомы: в предыдущем задании вы использовали селектор p, который находился перед фигурными скобочками в CSS-коде. В общем случае синтаксис CSS-правил выглядит так:

селектор {
  свойство1: значение1;
  свойство2: значение2;
  …
}

Язык селекторов очень мощный и гибкий. Простейший тип селекторов — селекторы по имени тега: p, h1 и так далее. Когда браузер видит такой селектор, он применяет стили из правила ко всем подходящим тегам. Например, ко всем абзацам или ко всем заголовкам первого уровня.

Но, Хьюстон, у нас проблемы с конспектом! Селектор p подсветил все абзацы зелёным. А они должны быть разного цвета. Как быть?

Давайте попробуем добавить внутрь абзацев разные теги для разных цветов. Тогда в CSS можно будет использовать разные селекторы.