Curso de CSS / Aplicar estilos inline, internos e externos

Você pode aplicar CSS através do atributo style de um elemento, de um elemento style no documento HTML ou de uma folha de estilo externa vinculada. Folhas de estilo externas geralmente são mais fáceis de manter em várias páginas, enquanto os outros métodos são mais adequados para usos menores e específicos.

Compare as três maneiras de aplicar CSS

Todos os três métodos aplicam CSS. Regras internas e externas comuns competem de acordo com a cascata, incluindo seus seletores e ordem de origem; um arquivo externo não é inerentemente mais fraco. Declarações inline geralmente têm precedência sobre declarações normais da folha de estilos do autor, mas condições como !important alteram essa comparação. Para mais detalhes, veja Herança, Especificidade e a Cascata do CSS .

Escreva estilos inline e internos

Nos estilos inline, você escreve a declaração dentro do atributo style do elemento que deseja decorar. Nenhum seletor ou chaves externas é incluído. O código a seguir especifica a cor e o fundo para apenas um texto guia.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

Na folha de estilo interna, regras incluindo seletores e chaves são escritas no elemento style dentro de head. Vários elementos com a mesma classe podem ser decoradas com uma única regra. No exemplo abaixo, o valor da classe HTML é notice e o seletor CSS é .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Ambos os exemplos são trechos de HTML para comparar onde eles são escritos. Ao mudar de métodos neste exercício, remova quaisquer declarações das mesmas propriedades que você colocou com o método anterior. Manter múltiplos métodos ao mesmo tempo dificulta distinguir entre falhas de conexão e conflitos de regras.

Vincule uma folha de estilo externa

Crie uma pasta vazia garden e salve os seguintes três arquivos: O arquivo CSS contém apenas CSS e não inclui a tag <style>. Ambos os arquivos HTML vinculam-se a style.css na mesma pasta.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" significa que o arquivo conectado é uma folha de estilo, e href="style.css" é o local do arquivo a ser lido. Em documentos HTML5, não há necessidade de escrever type="text/css" separadamente em conexões CSS regulares. Este exercício, que abre arquivos locais diretamente, não requer servidor ou bibliotecas adicionais.

Quando você abre index.html no seu navegador, verá um título verde e uma caixa de informações clara. Clique em “View visitor information” (ver informações para visitantes) para ir para visit.html, e embora o conteúdo seja diferente, a cor do título e o formato da caixa de informações são os mesmos. Se você alterar a cor do título de style.css para #1d4ed8 e, em seguida, recarregar ambas as páginas, ambos os títulos ficarão azuis. Esta é a vantagem de usar arquivos comuns.

Escolha um caminho para a estrutura da pasta

O caminho abaixo é lido com base na localização do documento HTML. Como no exemplo, a premissa é um documento regular cujo URL base não foi substituído pelo elemento base. Se você mover o arquivo CSS, deve mudar não apenas o nome do arquivo, mas também href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Para a última organização de pastas, escreva <link rel="stylesheet" href="../css/style.css"> em pages/index.html. O segmento ../ sobe um diretório. Caminhos da web usam barras normais (/). Uma barra à frente, como em /css/style.css, resolve a partir da raiz do site e tem um significado diferente deste caminho relativo de arquivo local. Veja MDN: Primeiros passos com CSS.

Diagnostique problemas de carregamento, correspondência e cascata

1. Primeiro, verifique a conexão do arquivo. Verifique se a extensão não está salva como .css.txt e se o href e a colocação real da pasta correspondem. Verifique também as maiúsculas e minúsculas: o servidor pode distingui-las mesmo que o sistema local não o faça. Se a página for aberta em um servidor web, você pode verificar a solicitação e resposta do CSS no painel Network das ferramentas de desenvolvimento. Arquivos locais podem não exibir o mesmo código de status HTTP.
2. Verifique se o seletor corresponde ao elemento. Se o HTML contém class="notice", mas o CSS usa .notcie, o aviso não muda mesmo que o arquivo seja carregado. Nas ferramentas de desenvolvimento, confira a classe real em Elements e procure a regra em Styles.
3. Verifique se a regra foi sobrescrita. Se uma declaração de cor diferente prevalecer posteriormente, a declaração original pode aparecer riscada no painel Styles. Diferencie as declarações que prevalecem na cascata de um problema de carregamento do arquivo CSS.

Para verificar se a folha de estilo carrega, adicione temporariamente body { background-color: #fff4cc; } no final e atualize. Uma página amarela confirma que o arquivo está conectado. Em seguida, inspecione se o seletor do aviso corresponde e se outra declaração prevalece. Remova a regra temporária depois. !important não pode reparar um arquivo ausente ou um seletor com erro de digitação. Para mais detalhes, veja Inspecionar CSS com DevTools: Styles e Computed.