Artigos CSS CSS: Introdução

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.

Seletor e declaração em uma regra
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.

Propriedade e valor na declaração de uma regra
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.

Estrutura do bloco de declaração
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:

  • O child selector, p > a, nos permite selecionar um elemento a que seja um filho direto de outro elemento p.
  • O adjacent sibling selector, p + a, seleciona o elemento a após p, desde que os dois estejam no mesmo container.
  • O general sibling selector, p ~ a, seleciona qualquer elemento a após p, desde que ambos estejam no mesmo container.

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.

  • Se foi utilizado o seletor de tipo a regra recebe peso 1.
  • Se foi utilizado o seletor de classe ou atributo a regra recebe peso 10.
  • Se foi utilizado o seletor de id a regra recebe peso 100.

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.