Урок 1. Вступ до CSS: Що таке CSS, підключення CSS до HTML

Name: Урок 1. Вступ до CSS: Що таке CSS, підключення CSS до HTML
Author: admin

admin

Адміністратор

Уроки CSS 14 0

План уроку: Вступ до CSS (25-30 хвилин)

1. Вступ (5 хвилин)

Що таке CSS?
- CSS (Cascading Style Sheets) — це мова стилів, яка використовується для опису вигляду HTML-елементів на сторінці.
- CSS дозволяє змінювати кольори, шрифти, відступи, розміри елементів, а також робити сторінки більш привабливими та структурованими.
Приклад:
- HTML дає структуру сайту, а CSS робить його гарним. Якщо HTML — це кістяк сайту, то CSS — це одяг та аксесуари.

2. Підключення CSS до HTML (10 хвилин)

Способи підключення CSS до HTML:
- Inline-стилі: Стилі прописуються безпосередньо в HTML-елементі за допомогою атрибуту style.
- Вбудовані стилі (internal CSS): Стилі додаються у секції <head> HTML-документа за допомогою тега <style>.
- Зовнішні стилі (external CSS): Стилі зберігаються у зовнішньому файлі з розширенням .css, який підключається до HTML через тег <link>.

Приклад коду:

Inline-стилі:

<p style="color: red;">Це текст з червоним кольором</p>

Вбудовані стилі (internal CSS):

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Вбудовані стилі</title>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Це текст із синім кольором</p>
</body>
</html>

Зовнішні стилі:

Створіть файл style.css з таким вмістом:
```
p {
  color: green;
}
```

У HTML додайте цей код у <head>:

<!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>
  <p>Це текст із зеленим кольором</p>
</body>
</html>

3. Огляд основних стилів (5 хвилин)

Колір тексту: зміна кольору тексту за допомогою властивості color.
- Приклад:
```
p {
  color: red;
}
```

Шрифти та розмір тексту: зміна шрифтів і розміру за допомогою font-family та font-size.

Приклад:

p {
  font-family: Arial, sans-serif;
  font-size: 20px;
}

4. Практична частина (10 хвилин)

Попросіть учнів створити базову HTML-сторінку з текстом і підключити до неї зовнішній CSS-файл.
Учні повинні спробувати змінити колір тексту та шрифт за допомогою CSS.

5. Підсумок уроку (5 хвилин)

Що повторити:
- Що таке CSS і як він працює разом із HTML.
- Як підключати CSS до HTML: inline-стилі, вбудовані та зовнішні стилі.
Запитання для обговорення:
- Який спосіб підключення CSS найбільш гнучкий для великих проєктів?
- Чому краще використовувати зовнішні стилі, ніж inline?

Домашнє завдання

Створити просту веб-сторінку з кількома елементами і застосувати до неї CSS для зміни кольору тексту та шрифтів.

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