CSS: Sintaxe

O CSS é composto por regras de estilo que o navegador irá interpretar e então aplicar ao elemento correspondente do documento. Uma regra de estilo contém três partes: seletor, propriedade e valor.

Por exemplo, o título 1 (como será visto nos artigos de HTML), pode ser definido para utilizar a cor laranja com o seguinte seletor.

O seletor aponta para o elemento do HTML no qual você quer personalizar.
Um bloco de declarações pode conter mais de uma declaração e esta é separada por ponto e vírgula. Cada declaração contem o nome da propriedade e o valor, separados por dois pontos.

A forma mais comum e fácil de entender seletores são os tipos de seletores. Este seletor aponta para o tipo de elemento HTML da página. Por exemplo, para personalizar todos os parágrafos em uma página use o seletor p (parágrafo).

Uma declaração do CSS termina sempre com ponto e vírgula e um grupo de declarações são cercadas por colchetes.

Seletores de id

Existe também o tipo de seletor determinado pelo id do elemento HTML, e este terá controle sobre o elemento independente de onde ele estiver no documento HTML. Aqui está um exemplo:

Para selecionar um elemento específico do id, use o caractere # e então o nome do id., como no exemplo acima.

2016-07-20_20-21-30.jpg

Seletores de class

Os seletores de classes funcionam de uma forma similar ao seletor de id. A principal diferença é que o id só pode ser aplicado em um único lugar da página, apenas uma vez por id, enquanto as classes podem ser usadas várias vezes de acordo com as necessidades da página.

No exemplo abaixo, ambos os parágrafos que contém a classe “primeiro” será afetado pelo CSS.

Ah, só uma coisinha… Não comece com números o nome da classe ou do id.

2016-07-20_20-22-22.jpg

Seletores de decendencia

Estes seletores são usados para chamar elementos que descendem de outros elementos. Quando você começar a selecionar os níveis você pode selecionar quantos níveis de seletores forem necessário.

Por exemplo, para alcançar somente o <em> do primeiro parágrafo com o id #intro, fica assim:

Como resultado teremos:

2016-07-20_20-23-05.jpg

Vítor Norton

I don't dream, I do a lot of things. Sou desenvolvedor Windows e Web, tenho o título de Windows Insider MVP (Anteriormente Microsoft MVP: Windows Experience), tenho uma empresa (Y'APP) e uma startup (M!xer). Sou escritor, programador, artista, mágico e inventor.