Definição e propriedades de cores no CSS
Tags: html, css, webdev, braziliandevs
Published: 2022-02-10 22:28:56

## Definindo as cores

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

Exemplo:
![Definindo as Cores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpdtmum8lpye73cf51s1.png)
 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5pbd2gj78qhw634k6bl.png) 

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dro80l03r9qxkk9wi6vl.png) 

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

![color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi321ocuay9gekhoxhl6.png)
 

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghoprlgxpi1klhcvgrap.png) 

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajs38nj3ka7qiu2e0fle.png) 

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nlekx6uxmnmr84h7u9m.png) 

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np28lwpv1a2yif1hz06w.png) 

## Dica Bônus:
### outline-offset
A propriedade "outline-offset" adiciona um espaço transparente entre o contorno e a borda do elemento.

![outline-offset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkq07x183ge0uhl6j2mb.png)
 
Código do botão:

HTML: 

```
<button>Colora-me</button>
```
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;
}
```

### Links úteis e referência:
[Veja o código desse projeto no Codepen](https://codepen.io/saragomesdev/pen/WNXppLJ)

Documentação CSS:
[MDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
[w3schools](w3schools.com/css/)

#### Obrigada por ler!