Com os pseudo-elementos de CSS first-letter e first-line, fica bem fácil customizar o seu texto, tornando mais bonito (claro, também precisa de um pouco de bom gosto – mas pra isso não existe tutorial).

Esses dois recursos são bem simples de aplicar, e dão efeitos interessantes no texto. Vamos aos exemplos e códigos:

Esse é um exemplo de um parágrafo com a estilização da capitular feita com o CSS (pra quem não sabe, capitular é o nome que dão para essa letrinha maior que as outras que começa o páragrafo).

Para usar ele, eu apliquei o pseudo-elemento first-letter no seletor <p>, no qual coloquei as propriedades que eu queria pra minha letra inicial . Bem simples:

p:first-letter{font-size:200%; color:#CC9900; font-weight:bold; font-family:verdana;float:left; padding-right:5px;}

Outro recurso parecido, é o first-line, que define uma propriedade diferente para a linha inteira:

Esse é um exemplo de um parágrafo com a estilização da primeira linha. O padrão do css é o mesmo mas com efeito diferente. Com criatividade, esses recursos dão um ar legal ao site, sem recorrer a técnicas de imagem replacement.

p.linha:first-line{font-size:120%; color:#FF0000;}

Os dois efeitos também pode ser combinados. Ou estilizados de maneira totalmente diferentes… Para se conseguir melhores resultados, conta mais a parte criativa, porque o css é absurdamente simples ;)