DEV Community

Cover image for Definição e propriedades de cores no CSS
Sara Gomes
Sara Gomes

Posted on • Updated on

Definição e propriedades de cores no CSS

Definindo as cores

No CSS as cores podem ser definidas por Nome, Código hexadecimal e/ou Código RGB.

Exemplo:
Definindo as Cores

OBS: códigos hexadecimais sempre devem ser iniciados por "#".

Colorindo um botão

A partir daqui, vamos usar de exemplo um simples botão que já tem suas cores pré-definidas pelo próprio navegador.

botão

E para colorir esse botão, passaremos pelas seguintes propriedades de CSS...

background-color

Com a propriedade "background-color" podemos mudar as cores de fundo dos elementos HTML.

background-color

color

Já a propriedade "color" nos permite alterar as cores dos textos nos elementos HTML.

color

border-color

Também podemos mudar as cores das bordas dos elementos usando a propriedade "border-color", mas atenção, para você conseguir ver essa cor refletir, o elemento precisa ter a largura da borda e o tipo já definidos por você ou pelo navegador.

border-color

border

Falando ainda sobre a borda, também podemos unir todas as propriedades de bordas, que mencionei, em uma única propriedade. A abreviação será "border".

border

outline-color

A propriedade "outline-color" é muito parecida com a propriedade de borda, porém, o outline serve para marcar/contornar o elemento que está em foco na página caso o usuário queira passar pelos itens usando o teclado e não o mouse.

Assim como a borda, o outline-color também precisa da definição da largura e do tipo do contorno para assim refletir a cor. A sua abreviação é "outline".

outline-color

outline

Normalmente as cores de outline ficam ocultas no código e apenas são visíveis quando o elemento de fato estiver em foco na página, de acordo com a navegação do usuário.

outline

Dica Bônus:

outline-offset

A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.

outline-offset

Código do botão:

HTML:

<button>Colora-me</button>
Enter fullscreen mode Exit fullscreen mode

CSS:

button {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 4px;

/*  cores  */
  background-color: #ef2db2;
  color: #fff;
  border: 4px solid #c6128d;
  outline: 2px solid #5a34e8;
  outline-offset: 3px;
}
Enter fullscreen mode Exit fullscreen mode

Links úteis e referência:

Veja o código desse projeto no Codepen

Documentação CSS:
MDN Web Docs
w3schools

Obrigada por ler!

Discussion (0)