Оформление цитаты в блоге - blockquote

Правильное оформление цитирования - очень хорошая привычка при ведении блога.
Цитаты должны отличаться от основного текста статьи и легко читаться, это не просто монотонный скопипастенный текст. Читатель должен понять, что вы хотите донести до него, уловить вашу мысль.

Для цитат есть специальный HTML тег blockquote. Его аналог в редакторе поста в Blogger - это кнопка с двойной кавычкой. Сама область с цитатой должна быть практичной, красивой, а не размахай на 1000px, как я видел на одном блоге.

Пример 1

Цитата:

Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

скороговорка

Код оформления:

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
}

blockquote:before {
color:gray;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}

blockquote p {
text-align:right;
color: #60758a;
}

blockquote - оформляет блок цитаты, где:

• background - цвет фона

Если сюда добавить возможные шрифты, типа:
font: italic 1.4em Georgia, "Times New Roman", Times, serif;, то получим такой вид цитаты (отступы margin и padding нужно подровнять):

Или же эту строчку можно добавить в следующий блок, чтобы правило распространилось только на кавычку.

blockquote:before - открывающая кавычка, где:

• color - цвет кавычки
• content:open-quote - тип кавычки
• font-size:4em - размер кавычки

blockquote p - оформляет подпись цитаты, где:

• text-align - выравнивание
• color - цвет текста

Код цитаты:

<blockquote>
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.
<p>
скороговорка</p>
</blockquote>

Подпись заключил в тег p ради разнообразия (см. выше blockquote p).

Так же возможно определить сам вид кавычки.

Пример 2

Цитата:
Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

Код оформления:

q {
 font-family: Times New Roman, Times, serif;              
 font-style: italic;                             
 color: #273b4e;                                 
 quotes: "\201c" "\201d";                 
}

Фон и размеры по вкусу.
А вот и сами кавычки - quotes: "\201c" "\201d";

Код цитаты:

Гурбангулы Бердымухамедов украл у Танирбергена Бердонгарова кораллы.

Коды кавычек:

Единственная запара - это то, что прорисовка кавычек не всегда одинакова во всех браузерах, так что приходится проверять во всех трёх (O, F, Ch). Коды оформления записываются разово в шаблон Blogspot (как правило, область css начинается после тегов ]]></b:skin>), коды цитат используются в статьях в html режиме редактора сообщений.
С линуксом немного сложнее, там другие, свободные, шрифты и все кавычки выглядят несколько иначе.

Ссылки по теме::
quotes тег. Справочник по CSS
Playing with BLOCKQUOTE and CSS
htmlbook.ru - CSS - quotes