Введение в CSS

Добро пожаловать на курс CSS! На курсе HTML вы создавали веб-страницы и узнали, что HTML описывает, что находится на странице: заголовки, абзацы, списки или изображения. За то, как страница выглядит, отвечает другой язык — CSS. С помощью CSS вы выбираете цвета и шрифты, добавляете фоны и рамки, задаёте расстояния между элементами и располагаете их на странице, например в колонки.

CSS расшифровывается как Cascading Style Sheets — «каскадные таблицы стилей»:

• Таблица стилей — это список правил, описывающих, как должен выглядеть документ, например: «все заголовки второго уровня коричневые». Поэтому файл с кодом CSS называют таблицей стилей.
• Каскадность — это способ, которым CSS решает, какое правило победит, если один и тот же элемент оформляют сразу несколько правил, например когда одно правило требует, чтобы заголовок был коричневым, а другое — чтобы синим. Этот процесс называется каскадом, и вы познакомитесь с ним в следующем уроке, о селекторах.

Посмотрите на редактор. В файле index.html лежит страница о кошках, которую вы знаете по курсу HTML. В предпросмотре это просто чёрный текст на белом фоне, потому что у страницы пока нет стилей. Во втором файле, style.css, мы подготовили для неё таблицу стилей. Не переживайте, если пока вам в ней не всё понятно: к концу курса вы сможете написать такую же сами.

Чтобы браузер применил таблицу стилей, страница должна на неё ссылаться. Это делает элемент link в заголовочной части страницы, в элементе head:

<link rel="stylesheet" href="style.css">

Атрибут rel (сокращение от relationship — «отношение») сообщает, что подключённый файл — таблица стилей, а атрибут href указывает, какой это файл. Как и meta, элемент link не имеет закрывающего тега. Подробнее мы разберём его в конце этого урока.