Атрибуты управления шрифтом в CSS

Смысл таблицы стилей заключается в том, что в ней задаются определенные правила. И в этих правилах задаются определенные параметры. Например, цвет шрифта красный, начертание – полужирное, размер в 18 пт.
Пример 1 текста в файле css:
Атрибуты управления шрифтом в CSS
© Николаева Вера Александровна, 2010 - 2011
Теперь, если мы любому тегу пропишем это правило с помощью атрибута class, то этот тег начнет отображаться в соответствии с этим правилом.
Таблица стилей записывается в специальном текстовом файле, который создается в программе Блокнот и сохраняется с расширением css.
CSS
.b{
color : #ff0000;
font-weight : bold;
font-size : 18pt;
}
Пример 1 html-текста в файле веб-страницы:
Какой-то текст абзаца
HTML
Тогда этот текст в браузере:
Какой-то текст абзаца

Если в html-коде прописать атрибут class=“b” другим абзацам, то все они будут оформлены по этому правилу.
Пример 2 текста в файле css:
Атрибуты управления шрифтом в CSS
© Николаева Вера Александровна, 2010 - 2011
Если в таблице стилей записать правило для абзаца p, то все абзацы веб-страницы будут оформляться этим правилом.
CSS
p{
font-family: Arial, Helvetica, sans-serif;
color : #336633;
font-size :12pt;
}
шрифт: Arial или другой - без засечек
цвет шрифта: зеленый
размер шрифта: 12 пт

Атрибуты управления шрифтом в CSS
© Николаева Вера Александровна, 2010 - 2011
Задание
В файле history-stili-1.htm в коде html страницы внутри контейнера (перед закрывающим тегом ) запишите без ошибок строку связи файла с файлом внешней каскадной таблицы стилей styles.css:
Тем самым вы свяжите файл history-stili-1.htm с файлом styles.css
В редакторе Блокнот создайте файл styles.css (сохраните файл с расширением css)
В тексте файла history-stili-1.htm каждому абзацу запишите подзаголовок. В коде html файла заголовок оформите тегом
, а подзаголовки тегом
.
Для заголовков, подзаголовков и абзацев текста в таблице стилей – файле styles.css запишите разные стили оформления текста (имя шрифта, цвет, размер, жирность или отсутствие ее).
В html-коде страницы history-stili-1.htm задайте (запишите) заголовкам, подзаголовкам и абзацам текста атрибут class
Сохраните файл history-stili-1.htm и проверьте его вид в браузере.