Skip to content

Como alterar a cor de uma palavra com a tag Span e CSS

13 de abril de 2021

Com CSS, é fácil definir a cor do texto em um documento. Se você deseja que os parágrafos de sua página sejam renderizados em uma determinada cor, basta especificar isso em sua folha de estilo externa e o navegador exibirá seu texto na cor escolhida. O que acontece então quando você deseja alterar a cor de apenas uma palavra (ou talvez apenas de algumas palavras) dentro de um parágrafo de texto? Para isso, você precisará usar um elemento embutido como a tag. No final das contas, mudar a cor de uma única palavra ou de um pequeno grupo de palavras dentro de uma frase é fácil usando CSS, e as tags são HTML válidos, então não se preocupe se isso for algum tipo de hack. Com essa abordagem, você também evita o uso de tags e atributos obsoletos como “fonte”, que é um produto de uma era HTML que já passou. Este artigo é para desenvolvedores da Web iniciantes que provavelmente são novos em HTML e CSS. Isso o ajudará a aprender como usar a tag HTML e CSS para alterar a cor de um texto específico em suas páginas. Dito isso, existem algumas desvantagens nesse método, que abordaremos no final deste artigo. Por enquanto, continue lendo para aprender as etapas para alterar a cor do texto. É muito fácil e deve demorar cerca de dois minutos.

Instruções passo a passo

  1. Abra a página da web que deseja atualizar em seu editor de texto HTML favorito. Pode ser um programa como o Adobe Dreamweaver ou um editor de texto simples como o Notepad, Notepad ++, TextEdit, etc.
  2. No documento, localize as palavras que deseja exibir em uma cor diferente na página. Por causa deste tutorial, vamos usar algumas palavras que estão dentro de um parágrafo maior de texto. Esse texto estará contido no par de tags. Encontre uma das duas palavras cuja cor você deseja editar.
  3. Posicione o cursor antes da primeira letra da palavra ou grupo de palavras cuja cor você deseja alterar. Lembre-se, se estiver usando um editor WYSIWYG como o Dreamweaver, você está trabalhando na “visualização do código” agora.
  4. Vamos envolver o texto cuja cor deseja alterar com uma tag, incluindo um atributo de classe. O parágrafo inteiro pode ter a seguinte aparência: Este é o texto enfocado em uma frase.
  5. Acabamos de usar um elemento embutido, o, para dar a esse texto específico um “gancho” que podemos usar em CSS. Nossa próxima etapa é pular para nosso arquivo CSS externo para adicionar uma nova regra.
  6. Em nosso arquivo CSS, vamos adicionar:
  7. .focus-text {
  8. cor: # F00;
  9. }
  10. Essa regra definiria esse elemento embutido, o, para ser exibido na cor vermelha. Se tivéssemos um estilo anterior que definisse o texto do nosso documento como preto, esse estilo embutido faria com que o texto da extensão fosse focalizado e se destacasse com a cor diferente. Poderíamos também adicionar outros estilos a esta regra, talvez deixando o texto em itálico ou negrito para enfatizá-lo ainda mais?
  11. Salve sua página.
  12. Teste a página em seu navegador favorito para ver as alterações em vigor.
  13. Observe que, além do, alguns profissionais da web optam por usar outros elementos, como os pares de tags ou. Essas tags costumavam ser usadas especificamente para negrito e itálico, mas foram descontinuadas e substituídas por e. As tags ainda funcionam em navegadores modernos, no entanto, muitos desenvolvedores da web as usam como ganchos de estilo embutidos. Essa não é a pior abordagem, mas se você quiser evitar elementos obsoletos, sugerimos manter a tag para esses tipos de necessidades de estilo.

Dicas e coisas a serem observadas

Embora essa abordagem funcione bem para pequenas necessidades de estilo, como se você precisar alterar apenas uma pequena parte do texto em um documento, ela pode sair rapidamente do controle. Se você achar que sua página está repleta de elementos embutidos, todos com classes exclusivas que você está usando em seu arquivo CSS, você pode estar fazendo isso errado. Lembre-se, quanto mais dessas tags estiverem em sua página, mais difícil será é provável que mantenha essa página no futuro. Além disso, uma boa tipografia da web raramente tem tantas variantes de cores, etc. em toda a página.