Заголовки

На примере оформления заголовков разберемся со стилевыми параметрами, позволяющими внести некоторое разнообразие в оформление элементов.

Чтобы сделать заголовок с подчеркиванием, следует добавить к элементу стилевой параметр border-bottom, его значением могут одновременно выступать толщина линии, ее стиль и цвет:

Вот такой заголовок

Чтобы подчеркнуть только текст, применяем атрибут text-decoration со значением underline:
h5 {
font: bold 26px Arial;
text-decoration: underline;
text-align: center;
color:blue
}

Вот такой заголовок

Заголовку можно задать фон:
h1 {
font: 30px Arial;
border-bottom: 1px solid #000;
background: #ddd;
color:blue;
text-align:center
}

Заголовок с фоном

В этом случае был задан фон для всего блока заголовка, сделаем так, чтобы фон был только под буквами. В связи с этим рассмотрим подробнее само понятие блоки.

Различают два типа блоков: строчные и структурные. Структурные блоки образуют элементы <p>,<div>,<h> и т.д. Строчные блоки образуются элементами <b>,<i>,<span> и т.п.

Строчные блоки всегда находятся внутри структурных. Главное отличие в том, что структурные блоки имеют вначале и в конце переводы строк и по ширине занимают все предоставляемое им пространство. Ширина строчных блоков строго ограничена содержанием блока.

Поэтому, если требуется, чтобы фон был только под буквами, в структурный блок <h1> встраиваем строчный блок. Строчный блок <span>, который создан как раз для подобных целей.
<h1><span> заголовок </span></h1>

Задаем фон для элемента <span>, который находится внутри элемента <h1>:
h1 span {
background: #ddd;
border-bottom: 1px solid #0000ff;
color:blue
}

 заголовок 

Все, что мы сделали, можно посмотреть здесь.