Поздравляем!

Поздравляем, вы прошли курс CSS! Вы самостоятельно оформили целую веб-страницу: её шрифты, цвета, отступы и раскладку.

Вот что вы узнали на этом курсе:

CSS описывает, как выглядит страница. Правило состоит из селектора и объявлений вида свойство: значение. CSS можно писать в атрибуте style, в элементе style или, чаще всего, во внешней таблице стилей, подключённой элементом link.
Селекторы выбирают элементы по типу, классу, id или атрибуту, а также по состоянию, например :hover. Их можно группировать, соединять в цепочки и комбинировать, чтобы выбирать потомков или дочерние элементы.
Когда несколько правил оформляют один и тот же элемент, побеждает правило с более специфичным селектором, а если специфичность одинакова — то, что написано позже. Это каскад. Некоторые свойства, например цвет текста и шрифт, наследуются дочерними элементами.
Цвета можно записывать названиями, в RGB, шестнадцатеричными кодами или в HSL, в том числе полупрозрачные. Свойство opacity делает прозрачным весь элемент.
Текст: семейства шрифтов с запасными вариантами, веб-шрифты, жирность и размер шрифта (в px или rem), межстрочный интервал и выравнивание.
Блочная модель: содержимое, внутренний отступ, рамка и внешний отступ. Ширина и высота в разных единицах, скруглённые углы, box-sizing и overflow.
Нормальный поток и то, как его меняют display и position.
Flexbox для раскладки элементов в строку или в столбец и CSS Grid для строк и столбцов сразу.

Сохраните свою страницу. Страница с таблицей стилей состоит из двух файлов, и они должны лежать в одной папке:

Создайте на компьютере новую папку, например my-page.
Откройте простой текстовый редактор, например «Блокнот» в Windows или TextEdit на Mac (переключённый в меню «Формат» на обычный текст), либо редактор кода, например Visual Studio Code. Вставьте код файла index.html и сохраните его в эту папку под именем index.html.
Таким же образом создайте второй файл с кодом style.css и сохраните его в ту же папку под именем style.css.
Дважды щёлкните по index.html, и страница откроется в браузере уже со стилями.

Почему в одной папке? href="style.css" — относительный адрес: браузер ищет файл style.css в той папке, где лежит index.html. Если его там нет, страница откроется без стилей. Если вы не сохранили свой код, можно сохранить нашу страницу из редактора здесь.

Шрифт с Google Fonts загружается из интернета. Без подключения браузер использует запасной шрифт из вашего font-family, ведь именно для этого запасной шрифт и нужен. И, как в курсе HTML, остерегайтесь изображений: адрес вроде /learn/html/cats.webp работает только на нашем сайте. Используйте полный адрес изображения, https://www.startcoder.com/learn/html/cats.webp, или сохраните изображение в ту же папку и напишите только имя файла.

Что дальше?

Адаптивная вёрстка. Медиазапросы (правила @media) позволяют применять некоторые стили только на узких или только на широких экранах, например чтобы на телефоне карточки показывались в один столбец.
Переходы и анимации. Со свойством transition изменение при :hover происходит не мгновенно, а плавно, а с помощью animation элементы можно привести в движение.
JavaScript. HTML задаёт странице содержимое, CSS — внешний вид, а JavaScript оживляет её: он может реагировать на клики, менять содержимое страницы или работать с данными из формы. Продолжайте с курсом JavaScript.

Задание

Поздравляем с завершением курса CSS! Сохраните свою страницу на компьютере, а когда будете готовы, переходите к курсу JavaScript.

Поздравляем!

Вот что вы узнали на этом курсе:

CSS описывает, как выглядит страница. Правило состоит из селектора и объявлений вида свойство: значение. CSS можно писать в атрибуте style, в элементе style или, чаще всего, во внешней таблице стилей, подключённой элементом link.
Селекторы выбирают элементы по типу, классу, id или атрибуту, а также по состоянию, например :hover. Их можно группировать, соединять в цепочки и комбинировать, чтобы выбирать потомков или дочерние элементы.
Когда несколько правил оформляют один и тот же элемент, побеждает правило с более специфичным селектором, а если специфичность одинакова — то, что написано позже. Это каскад. Некоторые свойства, например цвет текста и шрифт, наследуются дочерними элементами.
Цвета можно записывать названиями, в RGB, шестнадцатеричными кодами или в HSL, в том числе полупрозрачные. Свойство opacity делает прозрачным весь элемент.
Текст: семейства шрифтов с запасными вариантами, веб-шрифты, жирность и размер шрифта (в px или rem), межстрочный интервал и выравнивание.
Блочная модель: содержимое, внутренний отступ, рамка и внешний отступ. Ширина и высота в разных единицах, скруглённые углы, box-sizing и overflow.
Нормальный поток и то, как его меняют display и position.
Flexbox для раскладки элементов в строку или в столбец и CSS Grid для строк и столбцов сразу.

Создайте на компьютере новую папку, например my-page.
Откройте простой текстовый редактор, например «Блокнот» в Windows или TextEdit на Mac (переключённый в меню «Формат» на обычный текст), либо редактор кода, например Visual Studio Code. Вставьте код файла index.html и сохраните его в эту папку под именем index.html.
Таким же образом создайте второй файл с кодом style.css и сохраните его в ту же папку под именем style.css.
Дважды щёлкните по index.html, и страница откроется в браузере уже со стилями.

Что дальше?

Адаптивная вёрстка. Медиазапросы (правила @media) позволяют применять некоторые стили только на узких или только на широких экранах, например чтобы на телефоне карточки показывались в один столбец.
Переходы и анимации. Со свойством transition изменение при :hover происходит не мгновенно, а плавно, а с помощью animation элементы можно привести в движение.
JavaScript. HTML задаёт странице содержимое, CSS — внешний вид, а JavaScript оживляет её: он может реагировать на клики, менять содержимое страницы или работать с данными из формы. Продолжайте с курсом JavaScript.