CSS отвечает за внешний вид HTML: размеры, отступы, типографику, сетки и состояния элементов. В этом гайде вы постепенно оформите простую страницу и научитесь проверять результат в браузере.
Как пользоваться гайдом
Нужны любой редактор кода, браузер и базовое понимание HTML. Если разметка пока незнакома, сначала откройте гайд по HTML. Создайте файлы index.html и styles.css в одной папке.
1. Подключаем таблицу стилей
Внутри head подключите отдельный файл CSS. Браузер прочитает его при загрузке страницы. В примере ниже текст получает цвет и размер через правило для элемента h1.
<link rel="stylesheet" href="styles.css">
<h1>Мой первый сайт</h1>Добавьте в styles.css правило h1 { color: #6b4be8; } и обновите страницу. Затем измените цвет ещё раз.
2. Селекторы: элемент, класс и состояние
Селектор сообщает браузеру, к каким элементам применить правило. Класс подходит для повторяемых блоков; состояние :hover — для реакции на указатель. Не используйте один и тот же ID для нескольких карточек.
.card { border: 1px solid #dcd8e6; }
.card__title { font-weight: 700; }
.card a:hover { text-decoration: underline; }Создайте две карточки с классом card и измените заголовок только в одной, добавив второй класс.
3. Каскад и наследование
Когда несколько правил задают одно свойство, браузер учитывает происхождение, важность, слой, специфичность и порядок правил. Для начала держите селекторы простыми и ставьте уточняющее правило после общего. Цвет текста часто наследуется, а отступы — нет.
p { color: #14121c; }
.note p { color: #6b4be8; }Откройте инструменты разработчика, выберите абзац внутри .note и посмотрите, какое правило задаёт цвет.
4. Блочная модель: содержимое и отступы
У каждого элемента есть содержимое, внутренний отступ padding, граница и внешний отступ margin. С box-sizing: border-box заданная ширина включает внутренние отступы и границу; так проще считать размеры.
*, *::before, *::after { box-sizing: border-box; }
.card {
max-width: 420px;
padding: 24px;
border: 1px solid #dcd8e6;
margin: 24px auto;
}Сравните padding и margin на карточке через вкладку Computed в инструментах браузера.
5. Текст, цвета и единицы
Для основного текста задайте удобную высоту строки и достаточный контраст. rem зависит от базового размера шрифта, проценты — от контекста свойства. Не фиксируйте высоту блока с текстом: он должен расти при увеличении масштаба.
body { font: 16px/1.6 Arial, sans-serif; color: #14121c; }
.article { max-width: 70ch; margin-inline: auto; }
.article h2 { font-size: 1.75rem; line-height: 1.2; }Увеличьте масштаб браузера до 200 % и проверьте, что текст не обрезается и остаётся читаемым.
6. Flexbox для одной строки
Flexbox хорошо подходит для навигации, ряда кнопок и карточек с переносом. Свойство gap задаёт расстояние между элементами, а flex-wrap разрешает перенос на узком экране.
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.actions a { min-height: 44px; }Сделайте ряд из трёх ссылок и уменьшите окно браузера: элементы должны переноситься, а не выходить за экран.
7. Grid для карточек
Grid удобен, когда элементы должны образовать колонки и строки. Конструкция auto-fit с minmax() сама подбирает число колонок по доступной ширине.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}Разместите четыре карточки в .cards и проверьте их на ширинах примерно 360, 768 и 1280 пикселей.
8. Адаптивность и медиаусловия
Сначала проектируйте содержимое для узкого экрана. Медиаусловие добавляйте только там, где компоновка действительно перестаёт работать. Изображения не должны выходить за ширину контейнера.
img { max-width: 100%; height: auto; }
.layout { display: grid; gap: 24px; }
@media (min-width: 800px) {
.layout { grid-template-columns: 2fr 1fr; }
}Соберите основной текст и боковой блок: на телефоне они идут друг под другом, на широком экране — рядом.
9. Наведение, фокус и доступность
Интерактивный элемент должен заметно реагировать не только на мышь. Состояние :focus-visible помогает тем, кто пользуется клавиатурой. Проверяйте контраст и не передавайте смысл одним цветом.
a:focus-visible, button:focus-visible {
outline: 3px solid #6b4be8;
outline-offset: 3px;
}
button:hover { background: #5132ce; }Пройдите все ссылки страницы клавишей Tab. У каждой должен быть видимый фокус.
10. Итоговый проект: страница услуги
Сверстайте страницу с заголовком, вводным текстом, тремя преимуществами и кнопкой связи. Используйте Grid для карточек, Flexbox для кнопок и медиаусловие для бокового блока. Достаточно одного HTML-файла и одного CSS-файла.
.benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.benefit { padding: 20px; border: 1px solid #dcd8e6; }Проверьте проект на телефоне, с клавиатуры и при масштабе 200 %. Затем найдите два правила, которые можно упростить.
Что изучать дальше
После гайда переходите к гайду по JavaScript для начинающих. Для точного синтаксиса используйте справочник CSS. Дополнительные упражнения есть в учебном разделе MDN по CSS.