Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Додайте Стилі за Допомогою Імені Класу | Вступ до CSS
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

1. Вступ до CSS
Що таке CSS?Поєднання HTML і CSSСелектори для Стилізації HTML ЕлементівЧелендж: Додайте Свої Перші СтиліЧелендж: Додайте Стилі за Допомогою Імені КласуПсевдокласи Дій КористувачаЧелендж: Псевдокласи Дій КористувачаКольори ТекстуЕфективна Робота з CSSЧелендж: Змінні в CSS
2. CSS для Тексту
Стилізація ТекстуФорматування ТекстуЧеллендж: Форматування ТекстуДодавання Користувацьких Шрифтів до Веб-сторінкиВластивості ШрифтуЧелендж: Шрифти
3. Бокс Модель та Відстань між Елементами
Бокс МодельБокс СайзінгДодавання Простору ЕлементамЧелендж: Бокс-сайзінгСтруктурні та Функціональні ПсевдокласиЧелендж: Структурні ПсевдокласиТипи ЕлементівРобота з Блочними ЕлементамиРобота з Інлайн ЕлементамиЧелендж: Спрогнозуйте Макет Сторінки
4. Флексбокс
Що таке Flexbox?Flex НапрямокВирівнювання Вмісту по ГоризонталіВирівнювання Елементів по ВертикаліВластивості Flex-ЕлементівЧелендж: FlexboxЧелендж: Робота з Flexbox
5. Декоративні Ефекти
Колір ФонуФонове ЗображенняРобота з ЗображеннямиДекоративні Псевдо-ЕлементиТініЧелендж: Декоративні ЕфектиПодальші Кроки

Челендж: Додайте Стилі за Допомогою Імені Класу

Завдання

На сайті представлена коротка інформація про планети. Завдання полягає в наступному:

  • Виберіть всі елементи з іменем класу text і застосуйте до них властивість color зі значенням brown.
  • Виберіть всі елементи з іменем класу sub-text і застосуйте властивість color зі значенням grey.
html

index

css

index

js

index

  • Використовуйте . та назву класу (наприклад, .text), щоб вибрати елемент за назвою його класу.
html

index

css

index

js

index

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

Секція 1. Розділ 5
We're sorry to hear that something went wrong. What happened?
some-alt