Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSS Селектори для Стилізації HTML Елементів Челендж: Додайте Свої Перші Стилі Челендж: Додайте Стилі за Допомогою Імені Класу Псевдокласи Дій Користувача Челендж: Псевдокласи Дій Користувача Кольори Тексту Ефективна Робота з CSS Челендж: Змінні в CSS

2. CSS для Тексту

Стилізація Тексту Форматування Тексту Челлендж: Форматування Тексту Додавання Користувацьких Шрифтів до Веб-сторінки Властивості Шрифту Челендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс Модель Бокс Сайзінг Додавання Простору Елементам Челендж: Бокс-сайзінг Структурні та Функціональні Псевдокласи Челендж: Структурні Псевдокласи Типи Елементів Робота з Блочними Елементами Робота з Інлайн Елементами Челендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex Напрямок Вирівнювання Вмісту по Горизонталі Вирівнювання Елементів по Вертикалі Властивості Flex-Елементів Челендж: Flexbox Челендж: Робота з Flexbox

5. Декоративні Ефекти

Колір Фону Фонове Зображення Робота з Зображеннями Декоративні Псевдо-Елементи Тіні Челендж: Декоративні Ефекти Подальші Кроки

Основи CSS

Челлендж: Форматування Тексту

Завдання

Щоб покращити візуальне представлення елемента h1, застосуйте наступні стилі:

Додайте підкреслення.
Перетворіть усі літери у верхній регістр.
Відцентруйте текст по горизонталі.
Встановіть висоту рядка 2.
Налаштуйте інтервал між буквами на 2px.
Збільште відстань між словами до 5px.
Застосуйте тінь до тексту зі значеннями 2px 2px #000000.

index.html

index.css

index.js

text-decoration: Підкреслює текст.
text-transform: Перетворює текст у верхній регістр.
text-align: Вирівнює текст по горизонталі.
line-height: Задає висоту тексту.
letter-spacing: Збільшує відстань між літерами.
word-spacing: Збільшує відстань між словами.
text-shadow: Додає тінь.

index.html

index.css

index.js

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

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

Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSS Селектори для Стилізації HTML Елементів Челендж: Додайте Свої Перші Стилі Челендж: Додайте Стилі за Допомогою Імені Класу Псевдокласи Дій Користувача Челендж: Псевдокласи Дій Користувача Кольори Тексту Ефективна Робота з CSS Челендж: Змінні в CSS

2. CSS для Тексту

Стилізація Тексту Форматування Тексту Челлендж: Форматування Тексту Додавання Користувацьких Шрифтів до Веб-сторінки Властивості Шрифту Челендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс Модель Бокс Сайзінг Додавання Простору Елементам Челендж: Бокс-сайзінг Структурні та Функціональні Псевдокласи Челендж: Структурні Псевдокласи Типи Елементів Робота з Блочними Елементами Робота з Інлайн Елементами Челендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex Напрямок Вирівнювання Вмісту по Горизонталі Вирівнювання Елементів по Вертикалі Властивості Flex-Елементів Челендж: Flexbox Челендж: Робота з Flexbox

5. Декоративні Ефекти

Колір Фону Фонове Зображення Робота з Зображеннями Декоративні Псевдо-Елементи Тіні Челендж: Декоративні Ефекти Подальші Кроки

Основи CSS

Челлендж: Форматування Тексту

Завдання

Щоб покращити візуальне представлення елемента h1, застосуйте наступні стилі:

Додайте підкреслення.
Перетворіть усі літери у верхній регістр.
Відцентруйте текст по горизонталі.
Встановіть висоту рядка 2.
Налаштуйте інтервал між буквами на 2px.
Збільште відстань між словами до 5px.
Застосуйте тінь до тексту зі значеннями 2px 2px #000000.

index.html

index.css

index.js

text-decoration: Підкреслює текст.
text-transform: Перетворює текст у верхній регістр.
text-align: Вирівнює текст по горизонталі.
line-height: Задає висоту тексту.
letter-spacing: Збільшує відстань між літерами.
word-spacing: Збільшує відстань між словами.
text-shadow: Додає тінь.

index.html

index.css

index.js

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

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

some-alt