Текст
Вспомним пример с текстом начала Сказки о царе Салтане и добавим в него таблицу стилей, в которой для тэга <body> записан стиль - цвет фона белый (такой фон - фон по умолчанию, есои не указано ничего другого):
<HTML>
<head>
<style>
body{background:#ffffff;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
Выглядит, как и раньше. Добавим стиль для параграфа, такая запись в таблице стилей заставит обозреватель выравнивать текст каждого параграфа по центру:
<HTML>
<head>
<style>
body{background:#ffffff;}
p{text-align:center;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
Все параграфы выровнялись по центру. Чтобы и заголовок встал в центр, нужно записать соответствующий стиль и для него:
<HTML>
<head>
<style>
body{background:#ffffff;}
p{text-align:center;}
H3{text-align:center;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
p, H3{text-align:center;}
то ничего не изменится, кроме того, что таблица стилей станет короче. Попробуйте и убедитесь. Шрифт для элемента задается выражением приблизительно такого вида:
font:24pt arial,helvetica,serif;
в котором 24pt - размер шрифта в типографских пунктах (короче, чем больше номер, тем больше и шрифт), arial serif - гарнитура (внешний вид). Соответственно, пример:
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
H3{font:24pt arial,helvetica,serif;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
Тем же способом можно изменить размер и вид шрифта в параграфах. Цвет шрифта задается так:
color:#00f0ff;
Изменим цвет и начертание шрифта в параграфах:
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
p{font:18pt courier,serif;
color:#0ff;}
H3{font:24pt arial,helvetica,serif;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
Посмотрим на изменения. Можно изменить вид и цвет первых букв параграфов, смотрим текст примера и обращаем внимание на строку p:first-letter :
<HTML>
<head>
<style>
body{background:#ffffff;}
p, H3{text-align:center;}
p{font:18pt courier,serif;
color:#0ff;}
H3{font:24pt arial,helvetica,serif;}
p:first-letter{font-size:32pt;
color:#f00;}
</style>
<head>
<body>
<H3>Сказка о царе Салтане</H3>
<p>Ветер по морю гуляет<BR>
И кораблик подгоняет;<BR>
Он бежит себе в волнах<BR>
На поднятых парусах<BR></p>
<p>Мимо острова крутого,<BR>
Мимо города большого;<BR>
Пушки с пристани палят,<BR>
Кораблю пристать велят.<BR></p>
</body>
</HTML>
Вот что получилось. И теперь к структуре страницы.