Практична робота №2: Вступ до CSS

Мета:

Ознайомитися з основами CSS.
Навчитися стилізувати HTML-сторінки.
Вивчити основні селектори та властивості CSS.

1. Що таке CSS?

CSS (Cascading Style Sheets) – це мова стилів, яка використовується для оформлення HTML-документів. Вона визначає, як виглядають елементи веб-сторінки.

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

Є три способи підключення CSS до HTML:

Вбудований стиль: всередині тегу <style> у <head>.
Зовнішній файл: підключення через <link rel="stylesheet" href="styles.css">.
Inline-стилі: стилі прямо в HTML-елементі через атрибут style.

2. Основні CSS-селектори

Селектор	Опис	Приклад
`h1`	Застосовує стиль до всіх заголовків h1	`h1 { color: blue; }`
`.class`	Застосовує стиль до елементів із певним класом	`.text { font-size: 20px; }`
`#id`	Застосовує стиль до елемента з унікальним ID	`#header { background-color: gray; }`
`*`	Застосовує стиль до всіх елементів	`* { margin: 0; }`

3. Основні CSS-властивості

color – колір тексту.
background-color – колір фону.
font-size – розмір шрифту.
margin – зовнішні відступи.
padding – внутрішні відступи.
border – рамка навколо елемента.
width та height – ширина та висота елемента.

4. Завдання

Створіть файл styles.css та підключіть його до index.html.
Застосуйте колір тексту blue для заголовків h1.
Змініть фон сторінки на #f0f8ff.
Додайте рамку 2px solid black для таблиці.
Зробіть шрифт усіх абзаців 16px.

5. Додаткове завдання

Створіть окремий блок-контейнер та задайте йому стиль (ширина, висота, колір фону, відступи).

Успіхів у навчанні!