Давно хотел выделить первые буквы в абзацах красным цветом и сделать их жирными. Но, честно говоря, долго думал, что такие вещи реализуются только на JavaScript-е. Оказалось, заблуждался :-)
Чтобы выделить первый символ в тексте, можно воспользоваться псевдоэлементом first-letter языка CSS.
Для примера выделим первый символ у всех параграфов на странице...
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как выделить первый символ в тексте?</title>
<style type="text/css">
p:first-letter{
font-weight:bold;
color:#F00;
}
</style>
</head>
<body>
<p>Параграф №1.</p>
<p>Параграф №2.</p>
<p>Параграф №3.</p>
</body>
</html>
или
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Как выделить первый символ в тексте?</title>
<style type="text/css">
p::first-letter{
font-weight:bold;
color:#F00;
}
</style>
</head>
<body>
<p>Параграф №1.</p>
<p>Параграф №2.</p>
<p>Параграф №3.</p>
</body>
</html>
Вот здесь вы можете посмотреть пример страницы, для выделения первых символов параграфов которой используется first-letter.
Чем отличаются между собою два приведённых выше примера? Отличие имеется. Дело в том, что "правильнее" писать псевдоэлемент с двумя двоеточиями, но такой синтаксис не поддерживается браузерами Internet Explorer. Поэтому и используется "неправильный" синтаксис с одним двоеточием (этот синтаксис поддерживается не только IE, но и многими другими браузерами).
Во внешнем css-файле first-letter используется точно также...
Код CSS:
p:first-letter{
font-weight:bold;
color:#F00;
}
или
Код CSS:
p::first-letter{
font-weight:bold;
color:#F00;
}
По моему субъективному мнению, выделение первого символа делает текст веб-страницы более удобным для чтения. По такому тексту легче ориентироваться. Хотя, конечно, это спорное мнение.
Рейтинг поста: 
