Буквица в тексте

Буквица в качестве простого текста, увеличенного по сравнению с базовым шрифтом.

HTML

<p>Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву,
   базовая линия которой ниже на одну или несколько строк базовой линии основного текста. 
   Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его
    частью. В настоящее время существует несколько решений для создания буквицы.</p> 
<p><span class="firstletter">И</span>спользование рисунков выравненных по левому краю. Способ действенный и рабочий, но если буквица используется довольно часто на сайте, то под каждую новую, предётся подготавливать отдельную картинку, что согласитесь, не очень удобно и практично.
</p>
<p><span class="firstletter">С</span> помощью свойств CSS и дополнительных псевдоклассов <strong>:first-child</strong> и <strong>:first-letter</strong>, стало возможным создавать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Такой способ хорош, он не требует дополнительной разметки и наличия картинок, но недостаток состоит в том, что теряется контроль, создание буквицы автоматизируется, и может возникнуть некая путаница.
</p>
<p><span class="firstletter">У</span>читывая то, что не всегда и не во всех случаях применение "Буквицы" востребовано и оправдано, всё же лучше использовать метод с дополнительной разметкой. Например, начальную букву параграфа обернуть тегом <strong>span</strong> с определенным классом, и уже непосредственно в <strong>css</strong> прописать для него нужные вам свойства. В этом случае вы получаете контроль над созданием буквицы именно там где вам нужно, т.е. в том параграфе, в котором считаете наличие буквицы необходимым. 
</p>

CSS

/* Использование псевдоклассов для создания Буквицы */
p:first-child:first-letter {
    float: left;
    color: #903;
    font-size: 70px;
    line-height: 55px;
    padding-top: 4px;
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia;
}
/* Кроссбраузерный метод параграфа с Буквицей, использование дополнительного контейнера */
.firstletter {
    float: left;
    color: #008e36;
    font-size: 70px;
    line-height: 55px;
    padding-top: 4px;
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia;
}