CSS: Sintaxe e 5 exemplos práticos

Sintaxe de uma declaração CSS: Seletor {Propriedade: Valor; ...;}.

Explicação:

O Seletor indica o elemento HTML que pretendemos formatar.

Entre chavetas temos as declarações (uma ou mais declarações) separadas por ponto e virgula (;)

Cada declaração inclui o nome da propriedade CSS e o seu respetivo valor, separados por dois pontos (:).

O bloco de declarações encontra-se sempre entre chavetas ({ }).

Cada declaração CSS termina sempre com um ponto e virgula (;)

Vamos analisar 5 exemplos de formatação CSS e perceber os conceitos de id e classe através da utilização de #id (que deve ser único na página) e .classe (que pode ser reutilizado ao longo da página):

1: Formatar os elementos p sem distinção (afeta todos os elementos <p>);

2: Formatar o elemento que possua um id especifico (afeta SOMENTE o elemento identificado com esse id que deve ser único na página);

3: Formatar qualquer elemento identificado com uma classe especifica (afeta qualquer elemento identificado com essa classe);

4: Formatar os elementos p identificados com uma classe especifica (afeta somente os elementos <p> identificados com essa classe);

5: Formatar os elementos p identificados com uma ou mais classes especificas (afeta somente os elementos <p> identificados com essas classes);

Exemplo 1: Pretendemos formatar todos os elementos <p> (paragraph)

CSS: p {text-align: center; color: red;}

Ao definirmos uma dada formatação para o elemento <p> todos os elementos <p> existentes na página HTML vão ficar com a mesma formatação:

<!DOCTYPE html>

<html>

<head>

<style>

p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p>Todos os parágrafos vão ser afetados pelo estilo definido em style.</p>

<p>Este também!</p>

<p>E este!</p>

</body>

</html>

Exemplo 2: Pretendemos formatar somente o elemento cujo id seja #paragrafo1

CSS: #paragrafo1 {text-align: center; color: red;}

O seletor #id utiliza o atributo id de um elemento HTML para selecionar esse elemento especifico.

O id de um elemento deve ser único dentro da página, ou seja só pode haver um elemento com esse id - um e só um (leia de novo pf, ou verifique a leitura adicional no final da página para perceber a diferença entre ID e Classe)

O nome do id não pode começar por um número.

Para selecionar um elemento com um id especifico devemos escrever o caráter cardinal (#) seguido do id do elemento.

O estilo criado pelo seguinte código CSS (definido inline dentro do head) vai se aplicado ao elemento HTML cujo id="paragrafo1":

<!DOCTYPE html>

<html>

<head>

<style>

#paragrafo1 {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p id="paragrafo1">Olá Mundo!</p>

<p>Este parágrafo não é afetado pelo estilo.</p>

<p>Nem este!</p>

</body>

</html>

Exemplo 3: Pretendemos formatar todos os elementos identificados pela classe ".centro"

CSS: .centro {text-align: center; color: red;}

O seletor de classe seleciona os elementos com um atributo de classe especifico.

Para selecionar elementos de uma classe especifica devemos escrever o carácter ponto (.) seguido do nome da classe.

Neste exemplo todos os elementos HTML identificados pela classe ".centro" vão ser centrados e formatados a vermelho:

<!DOCTYPE html>

<html>

<head>

<style>

.centro {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>

<p class="centro">Parágrafo normal centrado e de cor vermelha.</p>

<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

</body>

</html>

Exemplo 4: Pretendemos formatar somente os elementos <p> identificados pela classe ".centro"

CSS: p.centro {text-align: center; color: red;}

Assim somente certos elementos HTML (neste caso somente o elemento <p>) serão afetados pela classe.

Neste exemplo somente os elementos <p> identificados com a classe ".centro" serão afetados pela formatação (centrados e formatados a vermelho):

<!DOCTYPE html>

<html>

<head>

<style>

p.centro {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="centro">Cabeçalho centrado e com a cor vermelha</h1>

<!-- A classe centro não vai afetar h1 porque foi definida só para p -->

<p class="centro">Parágrafo normal centrado e de cor vermelha.</p>

<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

</body>

</html>

Exemplo 5: Pretendemos formatar somente os elementos <p> identificados pelas classes ".centro" e/ou ".largo"

CSS: p.centro {text-align: center; color: red;}

p.largo {font-size: 300%;}

Os elementos HTML podem ser referenciados por mais do que uma classe, neste exemplo vamos utilizar 2 classes centro e largo.

Neste exemplo os elementos <p> vão ser formatados de acordo com as definições das classes ".centro" e ".largo":

<!DOCTYPE html>

<html>

<head>

<style>

p.centro {

text-align: center;

color: red;

}

p.largo {

font-size: 300%;

}

</style>

</head>

<body>

<h1 class="centro">Este cabeçalho não vai ser afetado</h1>

<!-- A classe centro não vai afetar h1 porque foi definida só para p -->

<p class="centro">Este parágrafo vai estar a vermelho e centrado.</p>

<p class="largo">Este parágrafo vai estar com uma fonte larga.</p>

<p class="centro largo">Este parágrafo vai estar a vermelho, centrado e com uma fonte larga.</p>

<p>Parágrafo normal não vai ser centrado nem ter a cor vermelha.</p>

</body>

</html>

Devemos utilizar .classes ou #id?

Na maior parte dos casos devemos utilizar classes, que são reutilizáveis, ao longo da página HTML.

A utilização de #id é mais especifica e normalmente não é tão utilizada.

Verificação de conhecimentos (se necessidade de fazer printscreens)

Elabora os seguintes exercícios "How to":

Realiza este grupo de exercícios interativos:

Leituras adicionais sobre ID, Class e div