Урок 24 із 239
10%
← Назад

Основи роботи з мовою CSS

Познайомтеся з CSS, його призначенням та підключенням стилів до HTML-сторінки.

Основи роботи з мовою CSS

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

За допомогою CSS можна змінювати колір тексту, розмір шрифту, фон, відступи, розташування елементів та багато іншого.

Що таке CSS

CSS (Cascading Style Sheets) — це мова стилів, яка використовується для оформлення HTML-документів.

МоваВідповідає за
HTMLСтруктуру сторінки
CSSЗовнішній вигляд сторінки
JavaScriptІнтерактивність сторінки

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

Зазвичай стилі зберігають у окремому файлі з розширенням .css. Такий файл можна підключити до багатьох HTML-сторінок.

Перевага такого підходу в тому, що нам не потрібно змінювати кожну HTML-сторінку окремо. Достатньо змінити один CSS-файл, і стилі оновляться всюди.

Підключення CSS до HTML

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

Тег link зазвичай розміщується всередині тегу head, тому браузер завантажує стилі перед відображенням сторінки.

Приклад HTML з підключеним CSS

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>
    My page
  </title>

  <link
    rel="stylesheet"
    href="styles.css"
  >
</head>

<body>

  <p>
    This is a paragraph.
  </p>

</body>

</html>

Файл styles.css

p {
  color: red;
}

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

❗ Важливо:

CSS-файл може бути один для всього сайту. Це дозволяє швидко змінювати дизайн великої кількості сторінок.

📌 Завдання:
  1. Створіть файл styles.css.
  2. Підключіть його до своїх HTML-сторінок через тег link.
  3. Додайте CSS-правило для тегу p.
  4. Змініть колір тексту абзаців.
💡 Показати підказку

CSS файл потрібно підключати всередині тегу head за допомогою link.

✅ Показати відповідь
HTML:

<head>
  <link 
    rel="stylesheet"
    href="styles.css"
  >
</head>


styles.css:

p {
  color: red;
}