Os textos são um dos principais elementos de uma página Web. A escolha correta das cores melhora a leitura, destaca informações importantes e proporciona uma melhor experiência para o usuário.
No CSS, a propriedade responsável pela alteração da cor dos textos é a propriedade color.
A propriedade color define a cor dos textos dos elementos HTML.
p {
color: blue;
}
Este texto possui a cor azul.
Títulos normalmente recebem cores de destaque para facilitar a organização visual da página.
h1 {
color:#1f4e79;
}
h2 {
color:#1565c0;
}
Os parágrafos geralmente utilizam cores mais neutras para facilitar a leitura.
p {
color:#333;
}
Texto com cor adequada para leitura.
O CSS permite utilizar nomes de cores predefinidos.
| Nome | Exemplo |
|---|---|
| red | Texto Vermelho |
| blue | Texto Azul |
| green | Texto Verde |
| orange | Texto Laranja |
A forma hexadecimal é uma das mais utilizadas no desenvolvimento Web.
h1 {
color:#1f4e79;
}
p {
color:#333333;
}
O modelo RGB representa as cores através das combinações de vermelho, verde e azul.
p {
color:rgb(31,78,121);
}
Texto utilizando RGB.
Os links podem receber cores diferentes para indicar ações e navegação.
a {
color:#1f4e79;
}
a:hover {
color:#1565c0;
}
Elementos filhos podem receber automaticamente a cor definida no elemento pai.
div {
color:red;
}
div p {
herda a cor vermelha;
}
Este texto recebeu a cor do elemento pai.
<h1>
Meu Site Web
</h1>
<p>
Aprendendo HTML e CSS.
</p>
CSS:
h1 {
color:#1f4e79;
}
p {
color:#555;
}
| Propriedade | Função |
|---|---|
| color | Define a cor do texto. |
| Hexadecimal | Código de seis caracteres para representar cores. |
| RGB | Combinação de vermelho, verde e azul. |
| Contraste | Facilita a leitura dos usuários. |