Como adicionar CSS

Índice

Quando um navegador lê uma folha de estilo, ele formata o documento HTML de acordo com as informações na 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 um 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 o elemento , dentro da seção head.

Exemplo

Os estilos externos são definidos no elemento , dentro da seção <head> 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>

Experimente você mesmo →

<!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 extensão .css.

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

Esta é a aparência do arquivo "mystyle.css":

"meuestilo.css"

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

Observação: não adicione espaço entre o valor da propriedade (20) e a unidade (px):

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 do head seção.

Exemplo

Os estilos internos são definidos no 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>

Experimente você mesmo →

<!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 exclusivo a um único elemento.

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

Exemplo

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

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

Experimente você mesmo →

<!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 in-line 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 foram definidas para o mesmo seletor (elemento) em folhas de estilo diferentes, o valor da última folha de estilo lida será usado.

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

h1
{
  color: navy;
}

Então, suponha que uma folha de estilos 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>

Experimente você mesmo →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Exemplo

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

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

Experimente você mesmo →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

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 "cascata" em um novo estilo "virtual" planilha pelas 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 head)
Padrão do navegador

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>