Из чего состоит CSS-правило? Не пойму, где селектор, где свойство, где значение

Разберём по кусочкам на твоём примере:

p {
  color: red;
}

• p — это селектор. Он отвечает на вопрос «кого красим?». Здесь — все абзацы <p>.
• { ... } — фигурные скобки, внутри них лежат правила оформления.
• color — свойство. Что меняем (цвет текста).
• red — значение. На что меняем (красный).
• color: red; целиком — это одно объявление. Между свойством и значением ставится двоеточие, в конце — точка с запятой.

Читается так: «у всех p сделать цвет текста красным». Свойств внутри скобок может быть много, каждое со своей точкой с запятой:

p {
  color: red;
  font-size: 18px;
}