CSS: Onde colocar o código CSS?

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

O código CSS pode ser inserido em três locais distintos:

Vamos utilizar o seguinte exemplo de formatação: Pretendemos atribuir a cor linen (#FAF0E6: salmão claroa toda a página HTML (ou seja, ao 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>

   <body>

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

   </body> 

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

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

   <body>

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

   </body> 

Conteúdo do ficheiro meuestilo.css:

 body {
       background-color: linen;
}

Comments