Como tirar a cor azul de links utilizando CSS?
Neste artigo você vai aprender como tirar a cor azul de links utilizando CSS, de uma forma bem simples e ainda alterando os outros estados como: link visitado e selecionado.
Fala programador(a), tudo bem? Bora aprender como mudar o azul da tag a!
O link, ou tag a, é um elemento muito interessante do HTML, pois possui alguns estados, diferente de outros elementos
Como o visited, que é quando o link já foi visitado alguma vez pelo usuário
A notícia boa, é que podemos mudar todos os estilos, seja o default dele como também destes estados
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 116 aulas
- 4 projetos
- 9h 23min
Tirar a cor azul de links utilizando CSS na prática
Vamos ao exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Como tirar a cor azul de links ultilizando CSS</title>
<meta charset="utf-8">
</head>
<body>
<div>
<!-- já visitado -->
<a href="#">Este link precisa mudar de cor</a>
</div>
<div>
<!-- não visitado -->
<a href="http://www.teste.com.br">Este link precisa mudar de cor também</a>
</div>
<div>
<!-- hover -->
<a href="http://www.teste.com.br">Um outro link</a>
</div>
</body>
</html>
Agora veja o CSS necessário para cada tipo de mudança de evento/comportamento:
/* link que ainda não foi acessado */
a {
color: #000;
}
/* link que foi visitado */
a:visited {
color: #555;
}
/* quando o ponteiro do mouse passa no link */
a:hover {
color: #999;
}
/* quando o link for selecionado */
a:active {
color: #333;
}
Dessa maneira, conseguimos acessar todos os eventos relacionados a tag a, ou links, do HTML
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Veja o resultado do navegador:
E assim mudamos a cor do link em todos os seus comportamentos possíveis! 🙂
Uma outra possibilidade é retirar a borda inferior dos links, isto é muito feito nos projetos pois ela não é útil, na maioria dos casos
Para isso você deve utilizar a regra text-decoration e o valor none
a {
text-decoration: none;
}
Desta maneira você tira a borda, e não com a regra border (que é o que muitos devs pensam)
Conclusão
Neste artigo vimos como tirar a cor azul de links utilizando CSS
Vimos que a tag a, ou link, possui alguns estados como visited, hover e active
Aprendemos a mudar todos eles por meio de CSS, que era o intuito do tópico, assim deixando o nosso site personalizado para o cliente
E não com as cores default que o HTML nos proporciona
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer um select mudar de URL/link
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
