Обычно файл со стилями хранится в корневой папке сайта и к странице подключается единственной строчкой кода:
<link rel="stylesheet" href="style.css">, где style.css - название этого файла и его расположение в серверной папке.
Т.е. данная строка кода ссылается на внешний файл с описанием стилей под именем style.css, в котором прописаны все параметры оформления используемых на странице тегов <body>, <h1>, <p> и т.д. При этом сами теги в коде HTML пишутся как обычно, ссылка лишь указывает браузеру, что он должен использовать правила отображения данного HTML-документа из указанного CSS-файла.
Одновременно несколько HTML-документов могут ссылаться на одну таблицу стилей, т.е. один CSS-файл можно использовать для управления отображением множества HTML-документов, что очень удобно при верстке сайта.
Главные преимущества CSS:
- более чистый код, который быстрее загружается, оптимизирован под поисковые системы и который легче поддерживать;
- управление отображением множества документов с помощью одной таблицы стилей, общий дизайн для всех страниц;
- возможность создания респонсивных сайтов, которые адаптивно отображаются на мониторе и мобильных гаджетах;
- более точный контроль над внешним видом страниц (позиционирование, размер, поля и т.д.) ;
- дополнительные возможности оформления, например, CSS позволяет убрать подчеркивание у ссылок или создать "липкое" меню, которое следует за скроллингом.
Синтаксис CSS
У CSS достаточно простой синтаксис. Таблица любых стилей состоит из набора правил, каждое из которых состоит из одного или нескольких селекторов, разделенных запятыми и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений.
Например:
p {
font-family: "Compact", sans-serif;
}
h2 {
font-size: 110 %;
color: blue;
background: gray;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
Выше приведено четыре правила с селекторами p, h2, p#paragraph1, a:hover. Согласно первому правилу элементы p (параграфы) будут отображаться шрифтом Compact, или каким-либо другим шрифтом с засечками из серии sans-serif, если Compact недоступен.
Второе правило задает стиль для заголовков h2,исходя из которого заголовок второго уровня будет отображаться синим цветом на сером фоне с увеличенным кеглем.
Третье правило будет применяться только к элементам p, атрибут id (идентификатор) которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
Четвертое правило определяет стиль hover для элементов a. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило убирает подчеркивание, когда курсор мыши находится над этими элементами.
Чтобы знать, какие правила задавать элементам на странице сайта, следует изучить CSS-учебник, который можно скачать ниже. С его помощью вы освоите или хотя бы ознакомитесь с возможностями форматирования веб-страницы с помощью CSS и сможете управлять исходным кодом в соответствии со своими потребностями.
В учебнике 35 страниц, каждая из которых освещает отдельное свойство CSS, написано доступно и самое главное, с примерами. Вот образец одной из страниц, где показано, как делается выравнивание текста по разному краю средствами css.