$ sudo teach IT

До сих пор наш лендинг выглядел одинаково скучно: чёрный текст на белом фоне. За внешний вид страницы отвечает не HTML, а второй язык — CSS. Именно он задаёт цвета, размеры, отступы, шрифты — всё, что делает сайт красивым. А чтобы разбираться, что и почему выглядит так, а не иначе, разработчику нужны инструменты браузера (DevTools).

После этого урока вы сможете подключить к странице файл стилей, написать первое CSS-правило и заглянуть «под капот» любой страницы через инспектор элементов.

Что уже умеем / что добавим

Вы уверенно размечаете страницу: текст, списки, изображения, ссылки. Теперь начинаем управлять её внешним видом. В сквозном проекте мы подключим отдельный файл style.css и зададим первые стили — фон и цвет заголовка нашего лендинга.

Что вы узнаете в рамках статьи

  • Что такое CSS и как он связан с HTML.
  • Как подключить внешний файл стилей через <link>.
  • Как устроено CSS-правило: селектор, свойство, значение.
  • Как открыть DevTools и пользоваться инспектором элементов.
  • Как проверять и временно менять стили прямо в браузере.

Ключевые термины

  • CSS — язык описания внешнего вида страницы (Cascading Style Sheets).
  • Правило — блок стилей: селектор и объявления в фигурных скобках.
  • Селектор — указывает, к каким элементам применить стили.
  • Свойство — что меняем (color, background-color).
  • Значение — как меняем (red, 16px).
  • DevTools — встроенные инструменты разработчика в браузере.
  • Инспектор элементов — вкладка DevTools для просмотра HTML и стилей.

Что такое CSS

CSS (Cascading Style Sheets — «каскадные таблицы стилей») — это язык, который описывает, как элементы HTML должны выглядеть. HTML отвечает на вопрос «что это?» (заголовок, абзац, список), а CSS — на вопрос «как это выглядит?» (какого цвета, размера, с какими отступами).

Разделять содержание и оформление — важный принцип. Благодаря этому один и тот же HTML можно оформить совершенно по-разному, просто поменяв стили, и не трогать саму разметку.

Как подключить стили

Самый правильный способ — вынести стили в отдельный файл и подключить его к странице. Создайте рядом с index.html файл style.css. Затем внутри <head> добавьте тег <link>:

<head>
  <meta charset="UTF-8">
  <title>Курс по вёрстке</title>
  <link rel="stylesheet" href="style.css">
</head>

Атрибут rel="stylesheet" сообщает, что это таблица стилей, а href указывает путь к файлу — так же, как в ссылках. <link> — одиночный тег, закрывать его не нужно. Теперь всё, что вы напишете в style.css, будет применяться к странице.

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

Стили пишут в виде правил. Каждое правило состоит из селектора и одного или нескольких объявлений «свойство: значение» в фигурных скобках:

h1 {
  color: darkblue;
  font-size: 40px;
}

Разберём по частям. h1 — селектор: правило применится ко всем заголовкам первого уровня. Внутри фигурных скобок — объявления: color: darkblue красит текст в тёмно-синий, font-size: 40px задаёт размер шрифта. Каждое объявление заканчивается точкой с запятой.

В браузере все заголовки h1 станут тёмно-синими и крупнее. Обратите внимание на синтаксис: свойство и значение разделяются двоеточием, объявления — точкой с запятой. Пропущенная точка с запятой или скобка — самая частая причина, по которой «стили не работают».

Инструменты браузера (DevTools)

У каждого браузера есть встроенные инструменты разработчика — DevTools. Откройте страницу и нажмите F12 (или правой кнопкой по элементу → «Просмотреть код» / Inspect). Откроется панель, где во вкладке Elements («Элементы») видно всё дерево HTML, а рядом — стили выбранного элемента.

Наведите на любой элемент в панели — браузер подсветит его на странице. Выберите заголовок — и справа увидите применённые к нему CSS-правила. Здесь же стили можно временно изменить: снимите галочку с правила или впишите новое значение, и страница мгновенно обновится. Эти правки не сохраняются в файл — они нужны, чтобы быстро поэкспериментировать и понять, что менять в коде.

DevTools — главный помощник верстальщика. Когда что-то «не так выглядит», ответ почти всегда находится именно здесь.

Применяем в проекте

Подключим к лендингу файл стилей и зададим первое оформление: светлый фон страницы и цвет главного заголовка.

В <head> добавьте подключение (если ещё не сделали):

<link rel="stylesheet" href="style.css">

А в файл style.css впишите:

body {
  background-color: #f5f5f5;
}

h1 {
  color: #1a3c8c;
}

Сохраните оба файла и обновите страницу через Live Server. Фон станет светло-серым, а заголовок — насыщенно синим. Откройте DevTools и найдите h1 — вы увидите там своё правило color. Поздравляем: ваш лендинг впервые получил собственный стиль.

Частые ошибки

  • Неверный путь в href у <link>.
    Если стили не применяются, проверьте имя и расположение style.css.
  • Забытая точка с запятой или скобка.
    Пропуск ; или } ломает правило и часто все следующие за ним.
  • Двоеточие и точка с запятой перепутаны.
    Между свойством и значением — двоеточие, в конце объявления — точка с запятой.
  • Ожидание, что правки в DevTools сохранятся.
    Изменения в инспекторе временные; настоящие правки вносите в файл.

Итоги

Это была важная веха — вы перешли от «скелета» страницы к её внешнему виду! Теперь вы умеете подключать внешний файл стилей, писать CSS-правила из селектора, свойства и значения и пользоваться инструментами разработчика, чтобы разбираться в любой странице. Ваш лендинг наконец обрёл цвет и характер.

Вы прошли весь первый раздел курса — это серьёзное достижение, гордитесь собой! Впереди второй раздел, где мы погрузимся в CSS глубже: научимся выбирать элементы разными способами и красиво оформлять текст.

На следующий урок