CSS: Sintaxe e localização

Publicado a 25/02/2018, 13:12 por Luis Pitta -org-   [ atualizado a 18/01/2019, 03:48 ]
Sintaxe de uma declaração CSS:

 

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 (;)



Exemplo A: Afetar todos os elementos <p>


<!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 B: Afetar somente os elementos <p> cujo id seja #paragrafo1


O seletor id utiliza o atributo id de um elemento HTML para selecionar um elemento especifico.
O id de um elemento deve ser único dentro de uma página, de modo que o seletor de id seleccione somente um elemento!
O nome do id não pode começar por um numero.
Para selecionar um elemento com um id especifico devemos escrever o carater cardinal (#) seguido do id do elemento.

O estilo criado em style 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 C: Afetar todos os elementos de uma classe

O seletor de classe seleciona 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 com a classe "centro" vão ser formatados a vermelho e centrados:

<!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> 
   </body>

</html>


Exemplo D: Afetar somente os elementos <p> cuja classe seja "centro"

Podemos também definir que somente certos elementos HTML serão afetados pela classe.
Neste exemplo somente os elementos <p> com a classe "centro" serão centrados 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>
     <p class="centro">Parágrafo normal centrado e de cor vermelha.</p> 
   </body>

</html>


Exemplo E: Afetar todos os elementos <p>

Os elementos HTML podem tambem ser referenciados por mais do que uma classe

Neste exemplo o elemento <p> vai ser formatado de acordo com as 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>
      <p class="centro">Este parágrafo vai estar a vermelho e centrado.</p>
      <p class="centro largo">Este parágrafo vai estar a vermelho, centrado e com uma fonte larga.</p>

   </body>

</html>



Três locais distintos para inserir código CSS: (Retirado de www.w3schools.com/css/css_howto.asp)

Exemplo: Atribuir a cor linen (#FAF0E6: salmão claroa toda a página HTML (ou seja, no body)

1. Estilo em linha (inline): na tag body

<body style="background-color: linen">

   <h1>Este é um cabeçalho</h1>
   <p>Esté é um parágrafo.</p>
   <p>Este é outro parágrafo.</p>

</body> 

2. Folha de estilos interna: na tag style dentro do head

   </head>
<style>
   body {
       background-color: linen;
   }
</style>
   </head>

3. Folha de estilos externa: no ficheiro meuestilo.css

   <head>
      <link rel="stylesheet" type="text/css" href="meuestilo.css">
   </head>

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}


Elaborar os seguintes exercicios:


Exercicios "How to":


Lista completa com 138 exercicios interativos: