Como adicionar CSS

Quando um navegador lê uma folha de estilo, ele formata o documento HTML de acordo com as informações da folha de estilo.

Três maneiras de inserir CSS

Existem três maneiras de inserir uma folha de estilo:

CSS externo
CSS interno
CSS embutido

CSS externo

Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro alterando apenas um arquivo!

Cada página HTML deve incluir uma referência ao arquivo de folha de estilo externo dentro do elemento <link>, dentro da seção head.

Exemplo

Estilos externos são definidos dentro do elemento , dentro da seção de uma página HTML:


		  	<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="mystyle.css">
 </head>
 <body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

 </body>
</html>

Uma folha de estilo externa pode ser escrita em qualquer editor de texto e deve ser salva com uma extensão .css.

O arquivo .css externo não deve conter tags HTML.

Aqui está a aparência do arquivo "mystyle.css":

"meuestilo.css"


			body {
 background-color: lightblue;
}
h1 {
 color: navy; 
 margin-left: 20px; 
}

Nota: Não adicione um espaço entre o valor da propriedade e a unidade:
Incorreto (espaço): margin-left: 20 px;
Correto (sem espaço):margin-left: 20px;

CSS interno

Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único.

O estilo interno é definido dentro do elemento <style>, dentro da seção head.

Exemplo

Estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma página HTML:


		  	<!DOCTYPE html>
<html>
<head>
 <style>
  body {
   background-color: linen;
  }

  h1 {
   color: maroon;
   margin-left: 40px;
  }
 </style>
</head>
<body>

 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>

</body>
</html>

CSS embutido

Um estilo embutido pode ser usado para aplicar um estilo único para um único elemento.

Para usar estilos embutidos, adicione o atributo style ao elemento relevante. O atributo style pode conter qualquer propriedade CSS.

Exemplo

Os estilos embutidos são definidos no atributo "style" do elemento relevante:


		  	<!DOCTYPE html>
<html>
<body>

 <h1 style="color:blue;text-align:center;">This is a heading</h1>
 <p style="color:red;">This is a paragraph.</p>

</body>
</html>

Dica: Um estilo embutido perde muitas das vantagens de uma folha de estilo (ao misturar conteúdo com apresentação). Use este método com moderação.

Várias folhas de estilo

Se algumas propriedades tiverem sido definidas para o mesmo seletor (elemento) em folhas de estilo diferentes, será usado o valor da folha de estilo da última leitura.

Suponha que uma folha de estilo externa tenha o seguinte estilo para o elemento <h1>:


				h1 {
 color: navy; 
}

Então, suponha que uma folha de estilo interna também tenha o seguinte estilo para o elemento <h1>:


				h1 {
 color: orange; 
}

Exemplo

Se o estilo interno for definido após o link para a folha de estilo externa, os elementos <h1> serão "laranja":


		  	<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
 color: orange;
}
</style>
</head>

Exemplo

No entanto, se o estilo interno for definido antes do link para a folha de estilo externa, os elementos <h1> serão "navy":


		  	<head>
<style>
h1 {
 color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Ordem em cascata

Qual estilo será usado quando houver mais de um estilo especificado para um elemento HTML?

Todos os estilos em uma página serão "cascatados" em uma nova folha de estilo "virtual" de acordo com as seguintes regras, onde o número um tem a prioridade mais alta:

Estilo embutido (dentro de um elemento HTML)
Folhas de estilo externas e internas (na seção principal)
Padrão do navegador

Portanto, um estilo embutido tem a prioridade mais alta e substituirá os estilos externos e internos e os padrões do navegador.