Отличительной особенностью CSS является отсутствие таких понятий как элемент, тег или атрибут.

Структура таблиц состоит из ПРАВИЛ, которые определяют, какой внешний вид должен иметь определенный элемент в документе.

Рассмотрим структуру правила:

Как работает css

На изображении видно, что сначала пишется селектор, указывающий к какому html тегу (тегам) предназначается данное свойство. Затем идет блок объявления стилей, который содержит в себе свойство и значение, заключенный в фигурные скобки. После свойства пишется двоеточие. Если правило содержит в себе несколько объявлений, как в случае на рисунке, то после каждого пишется точка с запятой, кроме самого последнего. Таким образом, на рисунке выше правило показывает, что все заголовки заключенные в тег H1 в документе будут синего цвета (color: blue) с размером шрифта 14 пикселей (font-size: 14px).

Создание таблицы CSS и подключение к HTML документу

Нам известно, что изменив стилевые правила во внешней таблице стилей, можно поменять дизайн всех страниц сайта.

Подключение CSS  к HTML

Только для этого сначала следует подключить внешнюю таблицу стилей ко всем страницам сайт.

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

<link rel="stylesheet" type="text/css" href="/style.css">

Попробуем сделать самостоятельно:
Для этого открываем блокнот и создаем один файл - index.html и второй - style.css. Затем располагаем их в одной папке.

Файлы имеют содержание:

index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Создать таблицу CSS</title>
<link rel="stylesheet" type="text/css" href="/style.css" >
</head>
<body>
<h2>Создаем таблицу CSS и подключаем к html страницам</h2>
</body>
</html>

style.css:

h2{color:green;font-size:16px}

В браузере увидим:

Подключение CSS таблицы

Встроенные таблицы стилей

Могут быть включены прямо в html-документ в раздел <head>. Такой метод используется очень редко, так как не очень удобен, но на всякий случай может пригодится:
Расположим правила стилей в самой голове документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Создать таблицу CSS</title>
<style type="text/css">
h2{color:green;font-size:16px}
</style>
</head>
<body>
<h2>Создаем таблицу CSS и подключаем к html страницам</h2>
</body>
</html>

Также, можно задать стили с помощью атрибута style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Создать таблицу CSS</title>
</head>
<body>
<h2 style="color:blue;font-size:14px">Создаем таблицу CSS и подключаем к html страницам</h2>
</body>
</html>

Данные примеры не желательно использовать, так как они не дают весомых преимуществ перед html. Если появится необходимость менять дизайн полностью сайта, то для этого придется редактировать каждую страницу, что займет очень много времени.

Следующая - Цвет фона и текста в CSS

Предыдущая - Что такое CSS. Отличие CSS от HTML. Преимущества CSS