Иногда при работе с сайтом стоит задача выделить первую букву абзаца, к примеру, определенным шрифтом или цветом. Естественно, это можно сделать с помощью HTML, задав вручную стиль отображения первой буквы в каждом абзаце текста. Но этот вариант малоэффективен. Гораздо проще реализовать эту задачу с помощью CSS.
Исходный код имеет вид:
<html>
<head>
<style type="text/css">
p:first-letter {font-size: 100%; color: red;}
</style>
</head>
<body>
<p>Первый абзац текста</p>
<p>Второй абзац текста</p>
<p>Третий абзац текста</p>
</body>
</html>
Как видно, ничего сложного нет — используется псевдоэлемент «first-letter», который отвечает за формирования стиля первой буквы абзаца. В примере у нас первая буква имеет размер 100% и отображается красным цветом. Таким образом, это очень простой и эффективный способ решения поставленной задачи.