определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.
CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

к html: 1. Подключение отдельного CSS-файла  2. Прописываем стили непосредственно в самом html файле (первый способ) 3. Прописываем стили непосредственно в сама html файле (второй способ) 4. Ссылка на CSS-файл внутри файла этого же типа

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

Заголовок

Текст

файла mysite.css подключаемого посредством тега  
Пример Файл со стилем
H1 {
color: blue;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
} P { padding-left: 20px; }
Если у padding'а задано только одно значение, то оно устанавливает отступ со всех сторон элемента - сверху, справа, снизу и слева.

лучший Блог
 

Тут пример: отображение CSS-стилей в документе HTML

red;
}

пример отображения CSS-стилей в документе HTML

с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.
И далее выполняем следующие действия:

Тут пример: отображение CSS-стилей в документе HTML

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

свойство2: значение; ...},
где
селектор (указатель), селектор,... - перечень имен тегов, классов, идентификаторов, для которых определяется стиль, разделенных запятыми; - свойство1: значение; ... - список задаваемых свойств и присваиваемых им значений, разделенных точками с запятой и заключенных в {...}. Например
h3 {font-family: arial; font-size: 10pt; text-align: center; color: green; background: white; },

пункт=1/72дюйма),
выравнивание заголовка выполняется по центру окна или ячейки таблицы, где он размещен,
цвет - зеленый, фон, на котором он будет отображен – белый

Для заголовка третьего уровня задано правило стиля в CSS

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

Для заголовка третьего уровня задано правило стиля в CSS

в отдельном файле стилей и сделали ссылки на него в других страницах, то и у них) будут оформлены одинаково (указанным стилем). Аналогично можно и для других элементов веб-документов задать описание правил стилей (

, и т.д.).
А если нужно, чтобы таким же стилем были оформлены и некоторые другие элементы страницы (разных типов), не все на странице, а выборочно. Вариант вставки указанного стиля, непосредственно в тег каждого элемента, исключаем. Для решения этой проблемы применяются следующие атрибуты:
class="имя_класса"; id="имя_идентификатора".
class означает, что многим элементам страницы присваивается определенный стиль, своего рода, целому классу.  id (идентификатор) - используется тогда, когда только один элемент на странице соответствует этому стилю, например id="header", id="main", id="bottom", т.е по одному идентификатору для "шапки", основной и заключительной части страницы.

и выравнивается по центру окна документа или ячейки таблицы, цвет текста - серый.
Точка перед названием класса обязательна.
Наберем html-код:
             ,     

Данная ячейка оформлена стилем класса “prim"

Текст этого абзаца оформлен стилем класса “prim"

color: "#0000FF"; } ,
шрифт - полужирный, размер - 12 пунктов, начертание шрифта - курсив, текст выравнивается по центру, цвет - синий.
Знак # перед именем идентификатора является обязательным и обозначает, что данный селектор есть идентификатор.
Применим описанный идентификатор к одному из абзацев веб-страницы:

Стиль текста этого абзаца описан идентификатором "prim_id"

.
В результате получим следующее:
Стиль текста этого абзаца описан идентификатором "prim_id"

запятую, мы определяем для них один стиль.
.prim, a, h5 {font-weight: bold; text-alight: left; color="#660000"}
Для класса prim, элементов а и h5 задан один стиль, определенный значениями свойств элементов, заключенных в фигурные скобки.
Селекторы наследования
В CSS применим механизм наследования. Задавая в правиле стиля селекторы через пробел, мы получаем вложение одних в другие. В приведенном ниже правиле,
p a {font-weight: bold; color: green;},
все ссылки, находящиеся внутри абзацев будут выделены полужирным шрифтом зеленого цвета.

это можно изобразить так, как показано на рисунке ниже.

бордюра (границы) ("padding"); - бордюра (границы) элемента ("border"); - внешнего поля вокруг элемента ("margin").







Свойства элементов языка HTML