Что такое CSS

HTML говорит, что на странице есть. CSS говорит, как это выглядит: цвет, размер, отступы, расположение. Без него браузер рисует страницу шрифтом Times New Roman в одну колонку — всё на месте, но смотреть невозможно.

Зачем это знать

Код за вас напишет нейросеть, но просить придётся вам. А просьба «сделай красиво» ответа не имеет: красиво — это двадцать решений, каждое из которых нужно назвать. Понимая устройство CSS, вы просите «отступ между карточками 24 пикселя, при наведении рамка синяя» — и получаете ровно это.

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

Как устроено правило

Правило состоит из двух частей: селектор говорит, к чему применять, а объявления — что менять. Каждое объявление это свойство и значение.

.card {              /* селектор: все элементы с классом card */
  padding: 24px;     /* свойство: значение */
  border-radius: 16px;
  background: #FFFFFF;
}

Селекторы бывают разные, и на практике хватает четырёх видов.

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

Буква C в названии — это cascading, каскад. К одному элементу могут подойти десять правил сразу, и браузер решает, какое главнее. Порядок такой.

• Сначала — насколько точен селектор. Правило с классом (.card) перебивает правило с тегом (div). Правило с двумя классами перебивает правило с одним.
• При равной точности — кто ниже. Из двух одинаковых по весу правил побеждает то, что написано позже: в конце файла или в файле, подключённом ниже.
• Атрибут style в разметке сильнее всего. Именно поэтому его стараются не использовать: перебить его потом почти нечем.

Переменные: цвет записан один раз

Свои значения в CSS можно называть и переиспользовать. Синий цвет сайта объявляется однажды, а дальше везде стоит его имя — и меняется он тоже в одном месте.

:root {
  --c-blue-500: #2E8BFF;
  --space-5: 24px;
}

.btn {
  background: var(--c-blue-500);
  padding: var(--space-5);
}

Раскладка: Flexbox и Grid

Расположить блоки на странице — отдельная задача, и под неё есть два инструмента. Разница между ними простая.

И то, и другое включается одной строкой у родителя: display: flex или display: grid. Дальше настраивается расстояние (gap) и выравнивание.

Один сайт на всех экранах

Правила можно включать при условии — например, только на экранах шире 768 пикселей. Такое условие называется медиавыражением.

.page-layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .page-layout { grid-template-columns: 260px 1fr; }
}

Порядок здесь важен: сначала пишутся стили для телефона, потом добавки для экранов побольше. Это называется mobile-first и работает лучше обратного порядка, потому что узкий экран — случай более сложный, и его честнее решать первым.

Что просить у нейросети

Просьба про стили работает, когда в ней есть три вещи: какая разметка уже есть, как должно выглядеть и какие ограничения вы ставите.

Как проверить, что получилось

• Сузить окно браузера до 320 пикселей: страница не должна ехать вбок.
• Увеличить шрифт в браузере до 200 %: текст не должен обрезаться.
• Пройти по странице клавишей Tab: у каждого элемента должна быть видимая обводка.
• Открыть «Просмотреть код» и убедиться, что победило то правило, которое вы написали.