BananaMaster

4 Як Використовувати CSS у HTML: Покроковий Посібник (HTML та CSS, Front End)

Якщо щось забули — натисни для переходу на урок

📘 Практичні Завдання зі Стилізації CSS

Для кожного завдання створи окремий клас у style.css та застосуй його до правильного тегу HTML.

📌 Структура файлів: index.html + style.css

✏️ Завдання 1

Відтвори стиль цього тексту:

Hello World

• Колір тексту: red
• Розмір шрифту: 20px

✏️ Завдання 2

Відтвори стиль цього тексту:

My Name

• Колір тексту: #2bcd84
• Жирність шрифту: 700

✏️ Завдання 3

Відтвори стиль цього тексту:

I love coding

• Шрифт: "Courier New", Courier, monospace
• Розмір шрифту: 24px
• Колір тексту: #f0a830

✏️ Завдання 4

Відтвори стиль цього тексту:

Frontend Developer

• Колір тексту: blue
• Розмір шрифту: 34px
• Жирність шрифту: 300

✏️ Завдання 5

Відтвори стиль цього тексту:

CSS is cool

• Колір тексту: #5bc4f5
• Шрифт: Georgia, serif
• Розмір шрифту: 20px

✏️ Завдання 6

Відтвори стиль цього тексту:

JavaScript

• Колір тексту: white
• Розмір шрифту: 18px
• Жирність шрифту: 600

✏️ Завдання 7

Відтвори стиль цього тексту:

Rockstar Games

• Колір тексту: #ff6b6b
• Розмір шрифту: 50px
• Шрифт: "Courier New", Courier, monospace
• Жирність шрифту: 900

✏️ Завдання 8

Відтвори стиль цього тексту:

Small and light

• Колір тексту: #888
• Розмір шрифту: 15px
• Жирність шрифту: 100

✏️ Завдання 9

Відтвори стиль цього тексту:

GTA 6 is coming

• Колір тексту: #b89ef8
• Шрифт: Impact, fantasy
• Розмір шрифту: 36px
• Жирність шрифту: 400

✏️ Завдання 10 — 🔥 Бонус

Створи своє! Створи клас .my-style та застосуй його до будь-якого тегу.

Text

• Обери власний колір тексту
• Обери власний розмір шрифту
• Обери власну жирність шрифту
• Обери власний шрифт

📌 Важливо:
Кожен клас пишеться окремо у style.css.
Використовуй тільки HTML та CSS.
JavaScript не потрібен.
Практикуй властивості: color, font-size, font-weight, font-family.