CSS: Introdução

Neste artigo veremos como utilizar as propriedades do CSS para estilizar uma página na prática.

Neste artigo veremos como utilizar as propriedades do CSS para estilizar uma página na prática.

Conhecendo o CSS

O CSS nos permite definir como um documento HTML será apresentado para o usuário. Esta linguagem possui uma sintaxe simples na qual utilizamos pares de propriedade e valor são utilizados para modificar os aspectos visuais de cada elemento em uma página:

p { color: blue; }

Esse trecho de código que temos acima é uma regra que atribui a cor azul aos elementos p em uma página.

Assim como color, existem diversas propriedades no CSS, cada uma responsável por alterar uma característica específica do elemento ao qual a regra será atribuída. Cada uma dessas propriedades possui seu próprio conjunto de valores, o que torna o CSS uma linguagem rica, mas ainda assim fácil de usar.

A seguir, olharemos o código CSS em detalhes, enquanto conhecemos a sintaxe, ou a forma de escrever código com essa linguagem.

Sintaxe

Uma regra CSS é composta por um selector, nesse caso o nome do elemento, e uma declaração. A Figura 1 ilustra essa estrutura.

Figura 1. Seletor e declaração em uma regra

No exemplo acima, color a propriedade através da qual indicamos que desejamos alterar a cor do texto do elemento p. Essa cor, por sua vez, é atribuída com o valor blue. Abaixo, na Figura 2, destacamos as partes que compõem uma declaração.

Figura 2. Propriedade e valor na declaração de uma regra

Observe na Figura 3 que a declaração de uma regra deve ser inserida num bloco, entre chaves, e que cada par de propriedade/valor deve ser separado por um ponto e vírgula. Para atribuir um valor a uma propriedade usamos dois pontos.

Figura 3. Estrutura do bloco de declaração

Seletores

Como vimos anteriormente, uma regra CSS é composta por seletores e declarações. Enquanto no bloco de declaração definimos qual o estilo de um elemento, é no seletor que indicamos qual ou quais elementos receberão esses estilos.

No CSS podemos utilizar pelo menos três tipos de seletores mais comuns.

O seletor universal nos permite atribuir um estilo a todos os elementos presentes em uma página. Ele é representado pelo caractere * (asterisco):

* { color: blue; }

Nesta regra, dizemos que todo o texto na página, não importando em qual elemento de texto ele esteja contido, receberá a cor azul.

Com o seletor de tipo dizemos que um elemento específico receberá o estilo declarado:

p { color: blue; }

Aqui dizemos que todos os elementos do tipo p na página terão sua cor alterada para azul.

Podemos utilizar ainda seletores mais específicos para restringir a aplicação de um determinado estilo. Com o seletor de classe dizemos ao navegador que o estilo deve ser aplicado apenas a elementos que contenham a classe especificada. Para isso, como mostra o código a seguir, utilizamos o nome da classe precedido por um . (ponto).

.cor-azul { color: blue; }

De igual forma, podemos utilizar também o seletor de id para atribuir um estilo a apenas um elemento, visto que o valor desse atributo não deve se repetir na página. Para isso utilizamos o nome do elemento precedido de um # (cerquilha).

#cor-azul { color: blue; }

Em alguns casos também podemos utilizar um atributo do elemento como seletor. Para isso utilizamos o seletor de atributo, como apresentado abaixo:

[href=”cursos”] { color: blue; }

Com isso, apenas os elementos que tiverem o atributo href com o valor cursos serão afetados pela declaração desta regra.

Grupos de seletores e combinadores

Até aqui apresentamos como utilizar regras com um seletor. Contudo, algumas vezes pode ser necessário atribuir um mesmo estilo a diferentes elementos. Nesse contexto, podemos agrupar os seletores de uma regra ou utilizar combinadores.

No código abaixo, tanto o elemento p quanto a terão a cor de seu texto alterada para azul:

p, a { color: blue; }

Note que entre os seletores de tipo, p e a, utilizamos a vírgula para determinar que o estilo deve ser aplicado a ambos.

Os combinadores são utilizados para determinar a relação entre os seletores de uma regra. Um dos mais comuns é chamado descendant selector, onde utilizamos um espaço entre os seletores para determinar que o estilo deve ser aplicado se a for um descendente de p.

p a { color: blue; }

Nesse caso, a receberá a cor azul se estiver contido em um elemento p, pois na hierarquia de elementos, a é um descendente de p. O código HTML abaixo exemplifica o contexto no qual essa regra é aplicada:

<p>Texto do parágrafo seguinte <a title="link de exemplo" href="#">por um link</a></p>

Existem ainda outros combinadores, demonstrados na listagem abaixo:

Com exceção do descendant selector, os combinadores vêm sendo cada vez menos utilizados, pois dificultam a leitura do código. Um dos motivos para isso é a dificuldade em alterar apenas o HTML da página mantendo o CSS já escrito, uma vez que os combinadores estão vinculados a ordem na qual os elementos foram declarados.

Cascata

Sendo o CSS um acrônimo para Folhas de Estilo em Cascasta podemos deduzir que a ordem em que as regras são declaradas é importante para que um elemento seja apresentado corretamente.

Considere, por exemplo, que tenhamos as regras abaixo:

p { color: blue; } p { background-color: red; }

No caso acima, o elemento p terá a cor de seu texto alterada para azul devido a aplicação da primeira regra e, logo após, sua cor de fundo será alterada para vermelho na aplicação na regra seguinte.

Entretanto, considere o cenário a seguir:

p { color: blue; } p { color: red; }

Neste caso, a cor final do elemento será vermelha, pois o valor atribuído à propriedade color na declaração da segunda regra sobrescreve o valor da primeira. Isso acontece porque o CSS leva em consideração a ordem na qual as regras foram declaradas no código.

Outros fatores também são levados em consideração quando é necessário definir qual será a aparência de um elemento ao qual diferentes estilos foram atribuídos. Em alguns casos, um cálculo pode ser feito para simular esse critério, levando em consideração o seletor utilizado.

Combinadores não influenciam nessa decisão.

Levando em consideração esse cálculo, considere o seguinte trecho de código:

<p class="classe" id="identificador">Texto do parágrafo</p> .classe { color: blue; } #identificador { color: red; }

Neste caso a cor do parágrafo será vermelho, pois o peso da regra que utiliza o seletor de classe é menor em comparação aquela que utiliza o seletor de id.

Artigos relacionados