Урок 5 із 239

Стили HTML-тегів

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

Стили HTML-тегів

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

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

<h1 style="color: blue;">
  Мій перший сайт
</h1>

<p style="font-size: 20px;">
  Текст абзацу
</p>

У прикладі вище використовується атрибут style. Він дозволяє додати CSS-стилі безпосередньо всередину HTML-тега.

CSS-властивість	Призначення
color	Змінює колір тексту
font-size	Змінює розмір шрифту
background-color	Змінює колір фону
width / height	Задає ширину та висоту

У великих проектах стилі зазвичай не пишуть всередині HTML. Для цього створюють окремі CSS-файли, які підключають до сторінки.

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

h1 {
  color: blue;
}

p {
  font-size: 20px;
}

❗ Важливо:

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

📌 Завдання:

Поясніть, за що відповідає HTML, а за що CSS.
Якою CSS-властивістю змінюють колір тексту?
Створіть заголовок h1 із синім кольором через атрибут style.
Назвіть перевагу використання окремого CSS-файлу.

💡 Показати підказку

Згадайте: HTML — це структура сторінки, CSS — це оформлення. Для кольору тексту використовується властивість color.

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

1. HTML створює структуру сторінки, CSS відповідає за оформлення.

2. Для зміни кольору тексту використовується властивість color.

3. Приклад:

<h1 style="color: blue;">
  Заголовок
</h1>

4. Окремий CSS-файл дозволяє зручно керувати стилями всього сайту.