CSS: Onde colocar o código CSS?

Publicado a 10/02/2019, 14:41 por Luis Pitta -org-   [ atualizado a 18/03/2019, 16:09 ]
Onde colocar o código CSS?

O código CSS pode ser inserido em três locais distintos: em linha (inline), em folha de estilos interna e em folha de estilos externa.



Vamos utilizar o seguinte exemplo de formatação:

Pretendemos atribuir a cor linen (#FAF0E6: salmão claroao fundo da página HTML ou seja, ao body.


1. Em linha (inline), ou seja, no atributo style da tag body:

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

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

</body> 

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

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

   <body>

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

   </body> 

3. Folha de estilos externa, ou seja, no ficheiro separado meuestilo.css:

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

   <body>

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

   </body> 

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}


Mais informação em: