Estilizando links

Para estilizar os links, pode-se utilizar o seletor da tag <a>, similarmente aos outros exemplos vistos:

a {
  font-size: 50px;
}

Adicionalmente, os links podem possuir diferentes estados conforme quadro abaixo:

Sabendo disso, é possível criar um estilo CSS para cada um dos estados e assim apresentar um comportamento visual diferente a depender do estado que o link se encontra. Para isso, utiliza-se o conceito de pseudoclasse (veremos esse conceito a fundo, mais à frente), que deve ser informado após o seletor. Veja a sintaxe no seguinte exemplo:

/* link ainda não visitado */
a:link {
  color: green;
}

/*  link visitado */
a:visited {
  color: green;
}

/* mouse sobre o link */
a:hover {
  color: red;
}

/* Link clicado */
a:active {
  color: yellow;
}

A definição a:hover deve vir após a definição a:link e a:visited para ser efetiva! Similarmente, a definição a:active deve vir depois da a:hover para ser efetiva.