CSS селекторы, свойства и значения

CSS строится на трёх ключевых понятиях: селекторы, свойства и значения. Понимая эти три элемента, вы сможете создавать любые стили для HTML-документов.

Селектор

Селектор указывает, к какому HTML-элементу применяется стиль.

p {
  color: red;
}

В этом примере p — селектор, который применяет стиль ко всем параграфам.

Свойство

Свойство определяет, какую характеристику элемента мы изменяем. Например:

  • color — цвет текста
  • font-size — размер шрифта
  • margin — внешний отступ
  • border — границы

Значение

Значение — конкретное значение для свойства. Например:

h1 {
  font-size: 24px;
  color: blue;
}

Здесь значение 24px задаёт размер шрифта, а blue — цвет текста.

Общий формат

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

Пример

div {
  background-color: lightgray;
  padding: 10px;
}

Этот код задаёт всем <div> серый фон и внутренний отступ 10px.

Резюме

  • Селектор выбирает элементы.
  • Свойство показывает, что изменяем.
  • Значение задаёт конкретный параметр.