Как подключить стили
Обычно CSS записывают в отдельный файл, например style.css, а затем подключают его в HTML. Правило состоит из селектора и набора свойств. Селектор указывает, к какому элементу применить оформление, а свойства задают результат. Например, можно выбрать все абзацы и изменить цвет текста. Попробуй поменять цвет заголовка, размер шрифта и цвет фона. После сохранения обнови страницу в браузере, чтобы увидеть изменения.
Цвета, шрифты и отступы
Цвет текста задают свойством color, цвет фона — background или background-color. Свойство font-size отвечает за размер букв, а font-family позволяет выбрать шрифт. Для пространства вокруг элементов используются margin и padding. Margin создаёт расстояние снаружи блока, а padding — внутри него. Чтобы понять разницу, добавь рамку вокруг карточки и по очереди меняй оба свойства.
Как расположить блоки
Когда на странице несколько карточек или кнопок, их нужно аккуратно выровнять. Flexbox помогает расположить элементы в строку или колонку, распределить пространство и добавить промежутки. CSS Grid удобен для сеток из строк и столбцов, например для галереи карточек. Не обязательно сразу изучать все настройки. Начни с display: flex и gap, а затем попробуй построить сетку из двух или трёх колонок.
Адаптация под телефон
Сайт должен оставаться удобным не только на большом мониторе. На телефоне места меньше, поэтому несколько колонок могут превратиться в одну, а меню — перейти на новую строку. Для этого используют медиазапросы @media. Проверь страницу, постепенно уменьшая ширину окна браузера. Если текст становится слишком тесным или блоки выходят за границы, измени размеры и расположение. Лучше ориентироваться на то, когда содержимое перестаёт помещаться, а не только на конкретную модель телефона.
Классы и повторное оформление
Класс позволяет применить одинаковые стили к нескольким элементам. В HTML его указывают через атрибут class, а в CSS селектор класса начинается с точки. Например, карточкам можно дать общий класс и оформить их одинаково. Это удобнее, чем повторять одни и те же свойства для каждого элемента. Используй понятные имена: card, button или page-title легче понять, чем случайный набор букв.
Как искать ошибки в CSS
Если свойство не работает, сначала проверь, правильно ли написан селектор и подключён ли файл стилей. Затем посмотри, не переопределяется ли правило другим правилом. В инструментах разработчика браузера можно выбрать элемент и увидеть применённые свойства. Меняй по одному значению, чтобы понять, какое из них влияет на результат. Не добавляй много новых правил наугад: лучше найти причину, чем скрыть её дополнительными исправлениями.
Практика: оформи карточку
Создай в HTML блок с заголовком, коротким описанием и кнопкой. Дай блоку класс card. В CSS добавь фон, внутренний отступ, рамку и небольшой промежуток между карточками. Затем поменяй цвет заголовка и размер текста. Попробуй сделать две карточки рядом с помощью Flexbox, а на узком экране расположить их одну под другой. Так ты увидишь, как несколько простых свойств создают цельный интерфейс.
Если стиль не меняется
Сначала проверь, что файл style.css подключён в HTML и сохранён. Убедись, что селектор совпадает с классом элемента: в HTML пишется class="card", а в CSS — .card. Если правило всё ещё не действует, открой инструменты разработчика и посмотри, не перечёркнуто ли оно другим правилом. Не добавляй сразу много новых деклараций — найди конкретную причину и только после этого исправляй её.
Мини-викторина
Какое CSS-свойство меняет цвет текста?
Выбери ответ — результат появится здесь.
Итого: 0 из 1 правильных ответов
Свойство color задаёт цвет текста.
Отметь результат и выбери одну вещь для самостоятельной практики.
Отметка сохранится в этом браузере.