Mudar cor de negrito, itálico e demais elementos

Fonte: Jonan Macedo

Este é um post para quem está começando a aprender CSS e quer saber como mudar as cores das palavras destacadas usando a folha de estilos.

► Negrito colorido

As tags de negrito são <b> e <strong>. O Blogger, por exemplo, usa <b>, já o Windows Live Writer usa <strong>. Mas você pode definir uma regra para os dois seletores ao mesmo tempo:

b, strong {color:#990099; background:#fff0ff;}

Uso na frase:

<p>Exemplo de texto <strong>negrito colorido</strong>.</p>

Como fica:

Exemplo de texto negrito colorido.

► Itálico colorido

Também há duas tags diferentes para itálico: <em> e <i>. O WLW usa <em> enquanto o Blogger usa <i>. Então você tem que definir a mesma regra para os dois seletores:

em, i {color:#000066; background:#f0f0ff;}

Uso na frase:

<p>Exemplo de texto <em>itálico colorido</em>.</p>

Como fica:

Exemplo de texto itálico colorido.

► Sublinhado colorido

A tag de sublinhado é <u>, logo:

u {color:#ff0000; background:#fff0ff;}

Uso na frase:

<p>Exemplo de texto <u>sublinhado colorido</u>.</p>

Como fica:

Exemplo de texto sublinhado colorido.

► Riscado colorido

Para riscar o texto você pode usar <s>, <strike> e <del>.

s, strike, del {background:#ffffff; color:#f0e68c;}

Uso na frase:

<p>Exemplo de texto <strike>riscado colorido</strike>.</p>

Como fica:

Exemplo de texto riscado colorido.

► Outros elementos

Você pode mudar as cores de outros elementos inline e também dos elementos que geram quebra de linha, como <p>, <blockquote> e <div>, basta seguir os exemplos supracitados.

► Definindo classes

Você pode querer, por exemplo que apenas de vez em quando o texto em negrito fique com cor diferente do padrão. Para isso você define uma classe:

.raiva {color:#ff0000; text-transform:uppercase;}

E usa nas frases quando desejar:

<p>Exemplo de <strong class='raiva'>negrito com classe</strong>.</p>

<p>Exemplo de <em class='raiva'>itálico com classe</em>.</p>

Como fica:

Exemplo de negrito com classe.

Exemplo de itálico com classe.

Observe que, além de mudar a cor, deixei o texto em caixa alta para dar a ideia de “texto gritado”. Um exemplo real:

Comprei no site da L’Occitane dia 29/06/12 e até hoje não recebi os produtos nem o dinheiro de volta.

Você também pode usar as classes para dar a ideia de um "texto sussurado", como se estivesse cochichando com o leitor.

.sussuro {color:#999999;}

Uso em uma frase:

<p>Ele me deu uma caixa de trufas de ameixa e disse, <em class='sussuro'>como se precisasse</em>, que eu podia comer tudo sozinha.</p>

Como fica:

Ele me deu uma caixa de trufas de ameixa e disse, como se precisasse, que eu podia comer tudo sozinha.

Mais um exemplo:

.amor {color:#db7093; background:#ffe4e1; padding:1px; border:1px solid #ffb6c1; border-left:0; border-right:0;}

Uso na frase:

<p>Está lindo o <strong class='amor'>novo template</strong> do blog dela.</p>

Como fica:

Está lindo o novo template do blog dela.

Esses são apenas alguns exemplos, mas acho que você já conseguiu pegar o “espírito da coisa”.

---

Leia também:

• Como usar as cores em RGB
• Tabela de cores
• Como personalizar a fonte
• Tags inline que mudam o texto

---

Até mais!