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

Самое интересное в цитатах это то, что их все читают. Это простой и действеный способ привлечь внимание посетителей и выделить часть текста. Причем делается это в несколько строк кода.

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

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

CSS:

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

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

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

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