> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-basico/css/cores.md).

# Anatomia de um comando

Antes de explicarmos como funciona um comando de CSS precisamos observar um exemplo. Na primeira aba abaixo tem um código HTML e na segunda aba o seu resultado. Na terceira aba, temos o código CSS que está no arquivo "style.css", e na quarta aba está o resultado com o CSS.

{% tabs %}
{% tab title="HTML" %}

```markup
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>A melhor pizza</h1>
  <p>A melhor pizza do mundo é a quadrada com molho de tomate verde.</p>
</body>
</html>
```

{% endtab %}

{% tab title="Resultado" %}
![](https://552011742-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEJ_IxNzk9of-u9NQeq%2Fsync%2F405063f8954eebf6da70087bce7a0ca80173c4c3.png?generation=1605471007339125\&alt=media)
{% endtab %}

{% tab title="CSS" %}

```css
p {
    color: green;
}
```

{% endtab %}

{% tab title="Resultado com CSS" %}
![](https://552011742-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEJ_IxNzk9of-u9NQeq%2Fsync%2Ffa160aa05bb5572cb22de970cfe7fb6c87c8d35c.png?generation=1605471002562410\&alt=media)
{% endtab %}
{% endtabs %}

Se compararmos o resultado sem CSS e com CSS podemos observar que na última aba o parágrafo está verde.

Agora vamos observar nosso CSS de perto:

![](https://552011742-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEJ_IxNzk9of-u9NQeq%2F-MUnYE8WOLDeEoZoEr8W%2F-MUnZUAEQ3k8HPE_rA--%2Fimage.png?alt=media\&token=95399586-65b5-45b9-aef0-ee95d0bf76cb)

Essa estrutura é chamada de **conjunto de regras**. Vamos examinar cada elemento.

* **Seletor:** é responsável por selecionar o elemento a ser estilizado, nesse caso o \<p>. Vamos apresentar os tipos de seletores e como eles funcionam na seção "Seletores".
* **Propriedade:** é responsável por escolher qual propriedade do elemento será alterado, nesse caso "color" é responsável pela cor do elemento. Vamos apresentar outras propriedades em "Propriedades mais usadas".
* **Valor da propriedade:** é responsável por apresentar o valor da propriedade, nesse caso escolhemos "green" (verde) e, por isso, nosso parágrafo ficou verde.
* **Declaração:** Uma declaração é composta por uma propriedade e seu respectivo valor. Um comando pode possuir mais de uma declaração.

Outros elementos que valem ser destacados são:

* Cada comando precisa estar dentro de chaves **`{}`**&#x20;
* A propriedade e o valor da propriedades são separadas por dois pontos **`:`**
* No fim de cada declaração é necessário colocar ponto e virgula **`;`**