Como mudar a cor de um elemento H2 com CSS

Artigo original: Changing H2 Element Color

Em programação, geralmente, há várias soluções diferentes para um determinado problema. Isso é evidenciado quando tratamos da estilização de um elemento do HTML.

Uma das mudanças mais fáceis é a da cor de um texto. No entanto, às vezes, nada do que você tenta parece funcionar:

<style>
  h2 .texto-vermelho {
    color: red;
  }
</style>

<h2 class="texto-vermelho" color=red;>CatPhotoApp</h2>

Como podemos mudar a cor do elemento H2 para vermelho?

Opção nº 1: usar o CSS em linha

Uma maneira seria utilizar o CSS em linha para estilizar o elemento diretamente.

Assim como ocorre com outros métodos, a formatação é importante. Observe novamente a marcação do HTML:

<h2 class="texto-vermelho" color=red;>CatPhotoApp</h2>

Para usar a estilização em linha, não se esqueça de usar o atributo style e de envolver as propriedades e valores em aspas duplas ("):

<h2 class="texto-vermelho" style="color: red;">CatPhotoApp</h2>

Opção nº 2: usar os seletores do CSS

Em vez de usar a estilização em linha, é possível separar o HTML (a estrutura e o conteúdo de sua página) do CSS (a estilização).

Primeiro, vamos remover o CSS em linha:

<style>
  h2 .texto-vermelho {
    color: red;
  }
</style>

<h2 class="texto-vermelho">CatPhotoApp</h2>

É necessário ter cuidado, no entanto, com o seletor de CSS que você usará. Observe o elemento <style>:

h2 .texto-vermelho {
  color: red;
}

Quando houver um espaço, o seletor h2 .texto-vermelho dirá ao navegador para selecionar o elemento com a classe texto-vermelho que seja filho de h2. O elemento H2, porém, não tem um elemento filho – você quer estilizar o próprio elemento H2.

Para consertar isso, basta remover o espaço:

h2.texto-vermelho {
  color: red;
}

Também é possível selecionar o elemento com a classe texto-vermelho diretamente:

.texto-vermelho {
  color: red;
}

Esperamos que este artigo tenha sido útil. Agradecemos pela leitura! 😀