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

Запитати АІ

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

Suggested prompts:

Can you explain the difference between class and ID selectors in CSS?

What are some best practices for organizing CSS in larger projects?

Can you give more examples of common CSS properties and their uses?

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

Приклад:

Відеоурок