Como adicionar CSS

Quando o navegador lê a folha de estilo, ele formata o documento HTML com base nas informações da folha de estilo.

Três métodos para usar CSS

Existem três métodos para inserir folhas de estilo:

  • CSS Externo
  • CSS interno
  • CSS em linha

CSS Externo

Ao usar folhas de estilo externas, você pode mudar a aparência inteira do site alterando apenas um arquivo!

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

Exemplo

O estilo externo é definido no elemento <link> da seção <head> da página HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Experimente você mesmo

As tabelas de estilos externas podem ser escritas em qualquer editor de texto e devem ser salvas com a extensão .css.

Os arquivos .css externos não devem conter qualquer etiqueta HTML.

"mystyle.css" é assim:

"mystyle.css"

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

Atenção:Não insira espaços entre o valor do atributo e a unidade (por exemplo margin-left: 20 px;）。A forma correta é:margin-left: 20px;

CSS interno

Se uma página HTML tiver um estilo único, pode usar a tabela de estilos interna.

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

Exemplo

O estilo interno é definido no elemento <style> da seção <head> da 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>

Experimente você mesmo

CSS em linha

O estilo em linha (também conhecido como estilo inline) pode ser usado para aplicar estilos únicos a um único elemento.

Para usar estilos em linha, adicione o atributo style ao elemento relacionado. O atributo style pode conter qualquer atributo CSS.

Exemplo

O estilo em linha é definido no atributo "style" do elemento relacionado:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Este é um título</h1>
<p style="color:red;">Este é um parágrafo.</p>
</body>
</html>

Experimente você mesmo

Dica:O estilo em linha perde muitos dos benefícios da tabela de estilos (ao misturar o conteúdo com a apresentação). Use este método com cautela.

Múltiplas tabelas de estilos

Se alguns atributos foram definidos para o mesmo seletor (elemento) em diferentes tabelas de estilos, será usado o valor da tabela de estilos lida por última vez.

Suponha que alguémTabela de estilos externaO seguinte estilo foi definido para o elemento <h1>:

h1 {
  color: navy;
}

Suponha que alguémTabela de estilos internaTambém definiu o seguinte estilo para o elemento <h1>:

h1 {
  cor: laranja;    
}

Exemplo

Se o estilo interno estiver ligado a uma tabela de estilos externaDepoisSe for definido, o elemento <h1> será laranja:

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

Experimente você mesmo

Exemplo

No entanto, se estiver ligado a uma tabela de estilos externaAntesDefiniu estilo interno, então o elemento <h1> será azul escuro:

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

Experimente você mesmo

Ordem de cascata

Quando vários estilos são especificados para um elemento HTML, qual estilo será usado?

Todos os estilos na página serão 'emaranhados' conforme as seguintes regras para uma nova 'tabela virtual' de estilos, onde a prioridade mais alta é a primeira:

  1. Estilo em linha (no elemento HTML)
  2. Tabelas de estilo externas e internas (no cabeçalho)
  3. Estilo padrão do navegador

Portanto, o estilo em linha tem a maior prioridade e cobre estilos externos, internos e padrões de navegador.

Experimente você mesmo