Урок 1 из 53 · 8 мин

Что такое CSS

Правило, селектор, свойство и значение: из чего состоит любой стиль.

Новый член команды

Страница на HTML готова. Но она… серая. Как документ из налоговой.
Ника
Значит, пора за CSS. HTML отвечает за содержимое, а CSS — за то, как оно выглядит.
Бро
HTML говорит мне, ЧТО на странице. CSS — КАК это выглядит. Без CSS я рисую всё по умолчанию: чёрное на белом, Times.

Понятие

CSS

Что это: Каскадные таблицы стилей: цвета, шрифты, отступы, раскладка, анимации.
Зачем: HTML отвечает за смысл, CSS — за вид. Один файл стилей меняет весь сайт.
Как: HTML
<style> h1 { color: #6b3e26; font-family: sans-serif; } </style> <h1>Мой сайт</h1>
Так это выглядит

Понятие

Правило

Что это: селектор { свойство: значение; }. Селектор говорит, КОГО красить, объявления — КАК.
Зачем: Это вся грамматика CSS. Остальное — словарь свойств.
Как: HTML
<style> p { color: crimson; font-size: 20px; } </style> <p>Скидка 20% на пенал</p>
Так это выглядит

Понятие

Объявление

Что это: Пара свойство: значение; — одно изменение вида. Точка с запятой разделяет объявления.
Зачем: Забытая ; ломает следующее объявление — частая ошибка новичков.
Как: HTML
<style> .price { color: green; font-weight: bold; } </style> <p class="price">290 ₽</p>
Так это выглядит

Ника
Пиши правило так: селектор, фигурные скобки, каждое объявление на своей строке и с ; в конце.

Ваш ход

Задание

Сделай заголовок h1 тёмно-коричневым: цвет #6b3e26, а абзацам p задай цвет #444.

<style>

</style>
<h1>Мой сайт</h1>
<p>Заметки о путешествиях и фото.</p>

<style>

</style>
<h1>Мой сайт</h1>
<p>Заметки о путешествиях и фото.</p>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Что в правиле p { color: red; } называется селектором?

Домашнее заданиеДля закрепления

Выберите один ответ.

За что отвечает CSS?