Почему не применяется стиль CSS

Файл не подключён или не найден. Проверьте строку <link rel="stylesheet" href="…"> в <head> и путь в ней: он считается от страницы. На вкладке «Network» («Сеть») после обновления страницы у ненайденного файла код 404.

Браузер показывает старую копию файла (кэш). Браузер запоминает CSS и не всегда скачивает его заново. Обновите страницу с очисткой кэша: Ctrl+F5 или Ctrl+Shift+R, на macOS — Cmd+Shift+R. Пока открыты инструменты разработчика, кэш можно отключить совсем: флажок Disable cache («Отключить кэш») на вкладке «Network». На сайте, который уже выложен, помогает новое имя файла или метка версии в адресе:

<link rel="stylesheet" href="css/style.css?v=2">

Селектор не совпадает с элементом. Частые опечатки:

• забыта точка у класса: menu { … } вместо .menu { … };
• регистр: в HTML class="Menu", в CSS .menu — это разные классы;
• у элемента два атрибута class: <div class="card" class="big"> — браузер берёт только первый. Нужно class="card big";
• в селекторе или свойстве русская буква вместо латинской, например «с» в .card: на вид не отличить, но это другой символ. Наберите имя заново в английской раскладке.

Значит, его перебило другое правило — оно показано выше в той же панели. Кто побеждает:

1. Объявление с !important.
2. Атрибут style у самого элемента.
3. Более точный (специфичный) селектор.
4. При равной точности — правило, которое стоит ниже в файле или в файле, подключённом позже.

Точность считается так: каждый id весит больше любого числа классов, а каждый класс, псевдокласс (:hover) или атрибут ([type="text"]) — больше любого числа тегов.

#main a {
  color: red;
}

.content a {
  color: blue;
}

Ссылка внутри <main id="main" class="content"> будет красной: id + тег сильнее, чем класс + тег, хотя синее правило стоит ниже.

Как исправить:

• напишите свой селектор точнее, чем перебивающий: .content .menu a;
• или поставьте своё правило ниже, если точность одинаковая;
• в своём CSS оформляйте всё классами, без id — тогда спорных случаев почти не будет.

Ошибка в самом объявлении, браузер его пропустил:

• опечатка в свойстве: colr, backgroud-color;
• неверное значение: width: 100 px (пробел между числом и единицей), color: #12345 (пять цифр), число без единицы: margin: 10;
• пропущена ; — следующая строка склеивается с предыдущей и ломает обе;
• пропущена } — правила ниже попадают внутрь незакрытого и перестают работать.

Свойство не действует в этих условиях:

• width, height и вертикальные margin у строчных элементов (<a>, <span>) — нужен display: inline-block или block;
• justify-content и align-items без display: flex или grid у того же элемента;
• height: 100%, когда у родителя высота не задана;
• margin: 0 auto у блока без ширины.