Что такое каскад в CSS

Каскад (Cascading) — это основной механизм, определяющий, какой стиль будет применён, если на один и тот же элемент приходят несколько CSS-правил.

CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Слово "каскадные" указывает на то, что стили накладываются друг на друга и применяются по определённым правилам приоритетности.

Что влияет на выбор стиля?

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

div a        /* низкая специфичность */
.menu a      /* выше */
#header a    /* ещё выше */

p { color: red !important; } 

Пример: как работает каскад

<p class="text" id="paragraph" style="color: green;">Hack Frontend</p>

p {
  color: red;
}

.text {
  color: blue;
}

#paragraph {
  color: orange;
}

p {
  color: black !important;
}

Что применится?

• color: black — у него !important → максимальный приоритет.

• Без !important сработал бы style="color: green;", потому что инлайн-стиль имеет более высокий приоритет, чем селекторы в CSS.

Таблица приоритетов (по убыванию)

Итог

• Каскад — это то, как CSS решает, какое свойство применить, когда конфликтуют стили.
• Основные факторы: специфичность, !important, источник и порядок.
• Понимание каскада помогает избегать конфликтов в стилях и писать чистый и предсказуемый CSS.