Создаем симпатичные цитаты всего двумя стилями

И вы тоже это прочитали. Простой и действеный способ привлечь внимание посетителей и выделить часть текста. Причем делается это в несколько строк.

Любому блочному контейнеру задается класс, в котором мы описываем следующие правила и в последствии присваиваем этот класс по требованию :) Помимо этого нам нужны две картинки с кавычками, ну или хотя бы одна, в зависимости от дизайна.

Стили описаны так, что закрывающие кавычки вложены как background для всего блока, а открывающие кавычки через псевдоэлемент :first-letter. Через padding указаны необходимые нам отступы, чтобы текст не наезжал на кавычки. Все остальное по вкусу.

CSS:

.pullquote {
width: 25%;
font-size:125%;
line-height:140%;
margin:10px;
background: url(/images/closequote.gif) no-repeat bottom right !important;
padding:0px 35px 5px 5px;
border: 1px dotted #9b4b4b;
text-align:justify;
}
.pullquote:first-letter {
background: url(/images/openquote.gif) no-repeat left top!important;
padding:5px 2px 10px 35px!important;
}

Рабочий пример для ленивых смотрим и забираем здесь.

P.S. Как верно подметил Number One, не совсем семантически верно использовать для цитат тэг p, так как для этих целей существует спецтэг blockquote. Но это не критично. В любом случае решать вам.

Единственная разница в том что стили надо прописывать не для “любого блочного контэйнера” а для blockquote ;)