CSS: Sintaxe e 5 exempos práticos

Publicado a 25/02/2018, 13:12 por Luis Pitta -org-   [ atualizado a 19/03/2019, 05:40 ]
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):

Exemplo 1: Formatar os elementos p sem distinção (afeta todos os elementos <p>);
Exemplo 2: Formatar o elemento que possua um id especifico (afeta SOMENTE o elemento identificado com esse id que deve ser único na página);
Exemplo 3: Formatar qualquer elemento identificado com uma classe especifica (afeta qualquer elemento identificado com essa classe);
Exemplo 4: Formatar os elementos p identificados com uma classe especifica (afeta somente os elementos <p> identificados com essa classe);
Exemplo 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>
            <!-- 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 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 precisamos de a utilizar.


Exercicios "How to":
Lista completa com 138 exercicios interativos:



Leituras adicionais sobre ID e Class