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

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

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

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

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

index.html

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

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

index.html

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

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

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

index.html

index.css

Селектори CSS

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

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

Застосовується до всіх елементів певного типу.

p {
  /* styles */
}

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

Вибирає елементи з певним атрибутом класу.

.highlight {
  /* styles */
}

Селектор ID

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

#header {
  /* styles */
}

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

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

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

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

Приклад:

index.html

index.css

Відеоурок

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

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

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

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 5

Свайпніть щоб показати меню

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

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

index.html

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

index.html

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

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

index.html

index.css

Селектори CSS

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

Застосовується до всіх елементів певного типу.

p {
  /* styles */
}

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

Вибирає елементи з певним атрибутом класу.

.highlight {
  /* styles */
}

Селектор ID

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

#header {
  /* styles */
}

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

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

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

Приклад:

index.html

index.css

Відеоурок

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

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

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

Вступ до CSS для Стилізації Веб-Сторінок

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

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

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

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

Селектори CSS

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

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

Селектор ID

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

Приклад:

Відеоурок

Awesome!

Вступ до CSS для Стилізації Веб-Сторінок

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

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

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

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

Селектори CSS

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

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

Селектор ID

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

Приклад:

Відеоурок