Como criar CSS

Como inserir folhas de estilo

Quando um navegador lê uma folha de estilo, ele a usa para formatar o documento HTML. Existem três maneiras de inserir uma folha de estilo:

Quando os estilos precisam ser aplicados a muitos páginas, as folhas de estilo externas são a escolha ideal. Ao usar folhas de estilo externas, você pode mudar a aparência de todo o site alterando um único arquivo. Cada página usa a tag <link> para se conectar à folha de estilo.<link> está no cabeçalho do documento (

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

O navegador lê as declarações de estilo do arquivo mystyle.css e as usa para formatar o documento.

As folhas de estilo externas podem ser editadas em qualquer editor de texto. O arquivo não pode conter nenhuma tag html. As folhas de estilo devem ser salvas com a extensão .css. Aqui está um exemplo de um arquivo de folha de estilo:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Não deixe espaços em branco entre o valor do atributo e a unidade. Se você usar "margin-left: 20 px" em vez de "margin-left: 20px", isso funcionará apenas no IE 6, mas não funcionará corretamente no Mozilla/Firefox ou Netscape.

Folha de estilo interna

Quando um documento precisa de estilos especiais, deve-se usar uma folha de estilo interna. Você pode usar a tag <style> no cabeçalho do documento para definir a folha de estilo interna, assim:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Estilos embutidos

Devido à mistura de apresentação e conteúdo, os estilos embutidos perdem muitos dos benefícios das folhas de estilo. Use este método com cautela, por exemplo, quando o estilo precisa ser aplicado a um único elemento.

Para usar estilos embutidos, você precisa usar a propriedade de estilo (style) dentro das tags relevantes. A propriedade de estilo pode conter qualquer atributo CSS. Este exemplo mostra como mudar a cor do parágrafo e a margem esquerda externa:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Estilos Múltiplos

Se alguns atributos forem definidos pelo mesmo seletor em diferentes tabelas de estilo, o valor do atributo será herdado da tabela de estilo mais específica.

Por exemplo, a tabela de estilo externa possui três atributos para o seletor h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

E a tabela de estilo interna possui dois atributos para o seletor h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Se a página tiver uma tabela de estilo interna linkada ao mesmo tempo que a tabela de estilo externa, o estilo obtido pelo h3 será:

color: red; 
text-align: right; 
font-size: 20pt;

A propriedade de cor será herdada da tabela de estilo externa, enquanto o alinhamento do texto (text-alignment) e o tamanho da fonte (font-size) serão substituídos pelas regras da tabela de estilo interna.