CSS (Каскадні Таблиці Стилів)

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

Додавання CSS для стилізації HTML

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

Вбудовані стилі

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

index

Внутрішні стилі

Ми також можемо включати CSS стилі в межах тегів <style> у секції <head> HTML документа. Цей метод корисний для застосування стилів до кількох елементів в межах одного документа.

index

Зовнішні таблиці стилів

Для більших проектів або коли ми хочемо використовувати стилі на декількох сторінках, зазвичай використовуються зовнішні таблиці стилів. Створіть окремий CSS файл (наприклад, index.css) і підключіть його до HTML документа за допомогою тегу <link>.

Будь ласка, перевірте файли index.html та index.css у прикладі.

index

Селектори CSS

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

Селектор елемента

Націлюється на всі елементи певного типу.

Селектор класу

Націлюється на елементи з певним атрибутом класу.

Селектор ID

Цільовий елемент з унікальним атрибутом ID.

Властивості CSS

Властивості CSS визначають, як повинні бути стилізовані вибрані елементи. Ось деякі загальні властивості CSS:

color встановлює колір тексту;
background-color встановлює колір фону елемента;
font-size встановлює розмір тексту;
margin додає відступи навколо елемента.

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

Приклад:

index

Відеоурок

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 3