Язык CSS имеет свой определенный синтаксис  (обязательные правила, по которым таблицы создаются). Важно знать, что в CSS нет ни каких элементов и тегов, как в HTML. Главной структурной единицей CSS есть правило, именно оно и определяет как будет выглядеть ваш объект в таблице.

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

Как нужно устанавливать стили в таблице.

Как можно увидеть на рисунке, предоставленном вверху, вначале записывается так называемый селектор, который показывает, к какому из html тегу (или же тегам) будет применяться то или другое свойство. О типах селекторов в мы поговорим с вами в 8-ом занятии CSS, ведь к тому времени Вы узнаете все базовые свойства CSS и будете легко понимать, о чем идет речь.

Сразу же за селектором прописываем блок объявления стилей, который нужно обязательно включить в фигурные скобки.

Каждое из этих объявлений состоит из свойства и значения. Всегда после свойства нужно ставить двоеточие. Одно правило может заключать в себе несколько объявлений. Если так случится, то они должны разделяться друг от друга точкой с запятой, как показано на рисунке, (запомните, что после последнего объявления можно не ставить уже точку с запятой).

На картинке можно увидеть, что все заголовки первого уровня будут 14-ого шрифта и голубого цвета.

Так как между HTML и CSS полно общего, то свойства CSS Вам будет очень легко запомнить.

Как можно подключить таблицу CSS к документу HTML?

Как вы уже поняли, преимущество css в том, что во время смены стилевого правила, мы можем управлять огромным количеством страниц одновременно.

Подключаем таблицу стилей ко всем файлам сайта.

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

Внешняя таблица стилей представляется как файл с .css расширением.
Представим, что мы имеем таблицы стилей style.css и парочку страниц html, и расположено это всё у нас в одной папке. Для этого, голове (между тегами <head> и </head>) каждого документа, который нам необходим, нужно прописать строчку:

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

Данная строчка указывает браузеру, о том, что он должен использовать правила отображения HTML-файла из CSS-файла.

Давайте теперь сами:

Открывайте блокнот и при помощи него создайте два файла, которые будут располагаться в одной папке: CSS файл – style.css и HTML файл – index.html . Открываем блокнот, нажимаем «Файл» затем «сохранить как» и в поле имя файла пишите style.css . Так же само и  для index.htm .

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

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>

style.css

h1{color:blue;font-size:14px}

Если же все верно, то открыв в браузере файл index.html вы будете наблюдать следующее:

Учимся применять таблицу стилей.

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

Сами правила стилей можно располагать в самой голове документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
<style>
h1{color:blue;font-size:14px}
</style>
</head>
<body>
<h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Работаем со стилями</title>
</head>
<body>
<h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1>
</body>
</html>

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

Я думаю, с этим мы разобрались. В следующем уроке будем изучать уже основы CSS .