The Anatomy of a CSS Rule

Então, no capítulo anterior, nós utilizamos o exemplo clássico "Hello, world!" para visualizar o quão fácil é estilizar um elemento HTML com CSS. Mas por que foi feito desta forma? Neste capítulo, nós focaremos no "esqueleto" e na sintaxe do CSS, para entender melhor como isso funciona. Vamos dar uma olhada no exemplo anterior novamente, onde nós tínhamos uma regra CSS a qual estilizava o elemento H1.

h1 {
	color: DeepSkyBlue;
}

O que nós temos aqui é um seletor com uma propriedade e um valor - Estes são os conceitos fundamentais de CSS, você deve memorizar estes nomes conforme você avança no tutorial. Neste exemplo, h1 é o nome do seletor, color é a propriedade e DeepSkyBlue é o valor.

Entre esses três conceitos (seletor, propriedade e valor), você vê uma variedade de caracteres especiais: Existe as chaves que ficam em volta da propriedade e do valor. exite o dois pontos separando a propriedade de seu valor e existe o ponto e vírgula após o valor. Cada um facilita o navegador a analisar e interpretar código CSS. As chaves permite você agrupar um conjunto de propriedades na mesma regra (seletor), os dois pontos avisa o navegador onde a propriedade termina e onde o valor começa e o ponto e vírgula avisa o navegador onde o valor termina.

Isso pode parecer um pouco complexo para um simples seletor como o que está acima, mas assim que nós usarmos nomes de seletores mais complexos com mais propriedades e valores mais complexos, isso fará completo sentido. Deixe-me ilustrar com um exemplo mais complexo.

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Agora nós temos vários seletores, com o primeiro visando vários elementos, assim como várias propriedades e vários valores - agora você provavelmente pode ver porque nós precisamos da sintaxe para permitir uma análise apropriada das nossas instruções.

Formatação e espaço em branco no CSS

Você deve estar se perguntando por que eu estou formatando o seletor desta maneira. A chave inicial está na mesma linha que o nome do seletor mas a outra chave que fecha tem uma linha só pra ela, propriedades foram indentadas (organizadas) e existe um espaço depois dos dois pontos separando a propriedade e o valor mas não antes. Por que? Por que é como eu gosto mas a verdade é que o interpretador não se importa com o espaço.

Algumas pessoas preferem colocar a chave inicial em uma linha a parte e de ter um espaço antes dos dois pontos também:

h1
{
	color : DeepSkyBlue;
}

e funciona também, o fato é que, muitos softwares foram escritos para compactar/minificar o CSS para remover o máximo possível de espaços, assim:

h1{color : DeepSkyBlue;}

Também irá funcionar, mas para uma regra mais complexa, será mais difícil para ler e editar. De qualquer forma, o interpretador entenderá da mesma forma que o nosso primeiro exemplo, agradeça os caracteres especiais usamos como separadores, como nós já falamos.

Resumo

Neste capítulo, nós aprendemos que os ingredientes básicos do HTML são os seletores, as propriedades e os valores. Um documento CSS pode conter múltiplos seletores e um seletor pode ter múltiplas propriedades as quais deve ter um valor. Nós também aprendemos que chaves, dois pontos e ponto e vírgula separam cada um dos ingredientes, e que o espaço em branco é de sua preferência - geralmente o interpretador não se importa.

Nós vimos alguns seletores e algumas propriedades básico até agora, mas seletor é um assunto muito mais profundo e existe muito mais propriedades para trabalhar. É claro que nós iremos falar sobre isso com muito mais detalhes mais tarde neste tutorial.