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







Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)