HTML і CSS: як вони працюють разом

HTML і CSS виконують різні завдання: HTML описує структуру та зміст вебсторінки, а CSS визначає її оформлення. Заголовок, абзац і посилання створюють у HTML; кольори, шрифти, відступи та розташування задають через CSS.

Різницю найпростіше побачити на практиці. Спочатку браузер показує звичайний текст зі стандартним оформленням. Після підключення таблиці стилів той самий текст може опинитися в білій картці з кольоровим заголовком і виразним посиланням.

Розберімо, як пов’язані HTML і CSS, чим відрізняються три способи підключення стилів і як зібрати невелику сторінку з двох файлів.

Чим відрізняються HTML і CSS

HTML — мова гіпертекстової розмітки. Вона позначає, де розташовані заголовки, абзаци, зображення, списки та посилання. Важливий не лише вигляд елемента, а й його призначення.

Наприклад:

<h1>Моя перша сторінка</h1>
<p>Тут починається знайомство з веброзробкою.</p>

Елемент <h1> позначає головний заголовок, а <p> — абзац. Навіть без авторських стилів браузер покаже їх зі своїм стандартним оформленням.

CSS — мова каскадних таблиць стилів. Вона задає кольори, розміри, шрифти, відступи, межі та розташування елементів.

HTML не варто зводити до «тексту на екрані», а CSS — лише до прикрашання. Правильна розмітка допомагає зрозуміти структуру документа, а стилі роблять його зручним для читання й використання.

Більше прикладів заголовків, абзаців і виділення фрагментів є в матеріалі про роботу з текстом у HTML.

Як браузер поєднує розмітку та стилі

Браузер обробляє HTML і будує структуру документа — DOM. Підключені CSS-правила визначають, як оформити відповідні елементи. Далі браузер обчислює їхні розміри, положення та відображає сторінку.

Це спрощений опис: на практиці завантаження й обробка ресурсів можуть відбуватися паралельно. Для початку важливо зрозуміти зв’язок між елементом і правилом.

Ось CSS для заголовка:

h1 {
  color: #2563eb;
  font-size: 32px;
}

• h1 — селектор: він вибирає елементи, до яких застосовується правило.
• color і font-size — властивості.
• #2563eb і 32px — значення цих властивостей.

Заголовки отримають синій колір і розмір шрифту 32 CSS-пікселі, якщо інші правила не визначать інший результат. Сам текст заголовка при цьому залишиться в HTML.

Як підключити CSS до HTML: три способи

Стилі можна записати в атрибуті style, усередині елемента <style> або в окремому файлі. Усі три способи працюють, але по-різному зручні для підтримки.

Атрибут style: оформлення одного елемента

<p style="color: blue; font-size: 18px;">
  Абзац із синім текстом
</p>

Тут CSS-оголошення записані безпосередньо в HTML. Крапка з комою розділяє властивості.

Це зручно для короткого експерименту. Але повторювати однаковий атрибут у десятках елементів незручно: кожну зміну доведеться вносити в кількох місцях.

Елемент style: правила всередині документа

Таблицю стилів можна розмістити в <head>:

<style>
  p {
    color: blue;
    font-size: 18px;
  }
</style>

Правило стосується всіх абзаців документа, до яких воно застосовне. Такий варіант підходить для невеликої самостійної сторінки або навчального прикладу.

Важливо розрізняти style="..." і <style>...</style>: перше — атрибут конкретного елемента, друге — елемент із таблицею стилів.

Окремий CSS-файл

Створіть файл style.css, а в <head> HTML-документа додайте:

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

У самому style.css записуйте лише CSS, без тегів <style>:

p {
  color: blue;
  font-size: 18px;
}

Один файл можна підключати до кількох сторінок. Це спрощує підтримку спільного оформлення. Три способи підключення докладніше пояснює початковий посібник MDN із CSS.

Кольори, шрифти та розміри: основні властивості

Колір тексту й фону

Властивість color задає колір тексту, а background-color — фону:

body {
  background-color: #f1f5f9;
}

h1 {
  color: #1d4ed8;
}

Колір можна записати назвою, HEX-кодом або функцією. Наприклад, red, #ff0000 і rgb(255, 0, 0) позначають червоний.

Шрифт і міжрядковий інтервал

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
  font-weight: 700;
}

Якщо Arial недоступний, браузер використає відповідний шрифт без зарубок. Значення line-height: 1.6 задає міжрядковий інтервал відносно розміру шрифту.

Для оформлення тексту використовуйте CSS. Застарілий HTML-елемент <font> для нових сторінок не потрібен.

Ширина, відступи та box-sizing

Фіксована ширина на зразок width: 600px може не поміститися на вузькому екрані. Для простої картки зручніше:

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  padding: 24px;
}

Картка займатиме доступну ширину, але не перевищуватиме 600 пікселів. За box-sizing: border-box внутрішні відступи й межі входять у задану ширину; зовнішні відступи margin — ні.

Різницю між content-box і border-box показано в довідці MDN про box-sizing.

Як працюють класи та каскад

Селектор p вибирає абзаци. Якщо потрібне оформлення лише певної групи елементів, використовуйте клас.

HTML:

<p class="notice">Зміни збережено.</p>
<p>Звичайний абзац.</p>

CSS:

.notice {
  padding: 16px;
  color: #166534;
  background-color: #dcfce7;
}

Точка перед notice позначає селектор класу. Він відповідає атрибуту class="notice", тому другий абзац цього оформлення не отримає.

А якщо правила суперечать одне одному?

p {
  color: blue;
}

p {
  color: green;
}

У цьому прикладі за інших рівних умов переможе останнє оголошення, і текст стане зеленим.

Але правило «нижче в коді — завжди сильніше» неправильне. Браузер враховує походження та важливість стилів, шари каскаду, специфічність селекторів та інші умови. Для простого прикладу з однаковими селекторами достатньо пам’ятати про порядок, а під час відлагодження — перевіряти, яке оголошення справді застосувалося.

Практичний приклад: сторінка з окремим CSS

Створіть папку my-site і два файли в ній: index.html та style.css. Для роботи підійде Visual Studio Code або інший текстовий редактор.

Якщо ще не створювали HTML-файлів, окремо є інструкція зі створення першої HTML-сторінки. Тут зосередимося на підключенні й зміні оформлення.

Крок 1. Розмітка index.html

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя перша сторінка з CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <h1>Привіт, світе!</h1>
    <p>Це моя перша HTML-сторінка з окремою таблицею стилів.</p>
    <a class="button"
       href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started"
       target="_blank"
       rel="nofollow noopener">Більше про CSS</a>
  </main>
</body>
</html>

Збережіть файл у UTF-8. Атрибут lang="uk" позначає українську мову документа, а <link> підключає файл стилів із тієї самої папки.

Посилання має клас button, але залишається посиланням: воно відкриває документацію. Для переходу на іншу сторінку доречний <a>; для дії в інтерфейсі зазвичай використовують <button>.

Крок 2. Оформлення style.css

body {
  margin: 0;
  padding: 24px;
  background-color: #f1f5f9;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
}

h1 {
  color: #1d4ed8;
  font-size: 28px;
}

p {
  color: #475569;
  line-height: 1.6;
}

.button {
  display: inline-block;
  padding: 10px 16px;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 8px;
  text-decoration: none;
}

.button:hover {
  background-color: #1d4ed8;
}

.button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

У цьому прикладі body задає загальний фон і шрифт. Клас .card оформлює основний блок, а .button — посилання.

Стан :hover змінює фон при наведенні вказівника. Правило :focus-visible робить помітним фокус, зокрема під час навігації клавішею Tab.

Крок 3. Перевірка в браузері

Збережіть обидва файли й відкрийте index.html у браузері. Має з’явитися світло-сірий фон і біла картка із синім заголовком та посиланням.

Для цієї локальної вправи не потрібні хостинг, CMS або JavaScript. Саме оформлення не завантажує зовнішніх бібліотек чи шрифтів; інтернет знадобиться для переходу до документації.

Тепер змініть кілька значень у CSS:

• колір заголовка з #1d4ed8 на #dc2626;
• максимальну ширину картки з 480px на 600px;
• фон сторінки;
• внутрішній відступ картки.

Після кожної зміни натискайте Ctrl + S і оновлюйте сторінку. Так добре видно, що HTML зберігає зміст, а CSS змінює його подання.

Для порівняння тимчасово приберіть рядок підключення <link>, збережіть HTML і оновіть сторінку. Текст залишиться, але авторське оформлення зникне. Після перевірки поверніть рядок на місце.

Чому CSS не застосовується

Якщо сторінка не змінюється, спочатку перевірте підключення. Для файлів в одній папці потрібне href="style.css". Якщо таблиця стилів лежить у підпапці css, шлях буде іншим:

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

Переконайтеся, що файл не збережено як style.css.txt. Перевірте також назви: .card не відповідає class="cards". На багатьох серверах регістр символів у шляхах має значення, тому краще одразу писати назви однаково.

Для перевірки правил відкрийте інструменти розробника клавішею F12. У Chrome або Edge виберіть елемент на вкладці Elements і перегляньте Styles. Перекреслені оголошення можуть показувати, що значення переважене іншим правилом.

Зміни в інструментах розробника зазвичай тимчасові: перенесіть потрібне виправлення у свій CSS-файл. Якщо підозрюєте кеш, спробуйте Ctrl + Shift + R.

Після цієї вправи варто вміти три речі: підключити таблицю стилів, знайти потрібний елемент селектором і зрозуміти, чому певна властивість застосувалася або була переважена. Це надійніша основа для подальшої верстки, ніж випадкове копіювання готових стилів.