Três formas de usar CSS: inline, interno e externo

Agora que você já sabe o que é CSS e como ele se conecta ao HTML, é hora de aprender as diferentes maneiras de "vestir" o seu HTML com esses estilos. Existem três formas principais de aplicar CSS: inline, interno e externo. Cada uma tem suas vantagens e desvantagens, e entender quando usar cada uma é crucial para um bom desenvolvimento web.

1. CSS Inline (Na linha do código)

O CSS inline é a forma mais direta (e geralmente menos recomendada) de aplicar estilos. Você escreve as regras CSS diretamente dentro da tag HTML, usando o atributo style.

Como funciona: As propriedades CSS são adicionadas como valor do atributo style em um elemento HTML específico.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>CSS Inline</title>
</head>
<body>
  <h1 style="color: blue; text-align: center;">Meu Título Azul e Centralizado</h1>
  <p style="font-size: 18px; background-color: yellow;">Este é um parágrafo com estilo inline.</p>
</body>
</html>

Vantagens:

Rápido para testar: Útil para testar estilos rapidamente em um elemento específico.
Prioridade alta: Tem a maior prioridade, sobrescrevendo estilos de outras fontes (interno e externo).

Desvantagens:

Não separa conteúdo e estilo: Mistura HTML e CSS, o que dificulta a leitura e manutenção do código.
Não reutilizável: Se você quiser aplicar o mesmo estilo a outro elemento, terá que copiar e colar o código, o que é ineficiente.
Dificulta a manutenção: Se precisar mudar um estilo que está em vários lugares, terá que editar cada um deles.
Não é responsivo: Dificulta a criação de designs que se adaptam a diferentes telas.

Quando usar: Muito raramente. Talvez para testes rápidos ou para estilos muito específicos que não se repetirão e que precisam de uma prioridade muito alta.

2. CSS Interno (Na cabeça do documento)

O CSS interno (ou "embedded") é quando você escreve as regras CSS dentro da seção <head> do seu documento HTML, usando a tag <style>.

Como funciona: Você cria um bloco <style> dentro da tag <head> do seu HTML e escreve todas as suas regras CSS lá dentro.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>CSS Interno</title>
  <style>
    /* Aqui é onde o CSS interno é escrito */
    h1 {
      color: green;
      text-decoration: underline;
    }

    p {
      font-family: Arial, sans-serif;
      line-height: 1.5;
    }

    .destaque {
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Meu Título Verde e Sublinhado</h1>
  <p>Este é um parágrafo com fonte Arial e espaçamento de linha.</p>
  <p class="destaque">Este parágrafo tem um destaque especial.</p>
</body>
</html>

Vantagens:

Separação parcial: O CSS fica separado do corpo do HTML (tag <body>), o que é melhor que o inline.
Útil para uma única página: Bom para estilos que são específicos de uma única página HTML e não serão usados em outras.
Carregamento rápido: Os estilos são carregados junto com a página, sem a necessidade de fazer outra requisição ao servidor.

Desvantagens:

Não reutilizável entre páginas: Se você tiver várias páginas com os mesmos estilos, terá que copiar e colar o bloco <style> em cada uma delas.
Aumenta o tamanho do arquivo HTML: O código CSS fica dentro do HTML, tornando o arquivo maior e potencialmente mais lento para carregar se o CSS for muito extenso.

Quando usar: Para páginas HTML únicas, como uma página de erro 404 ou uma página de "em breve", onde os estilos não precisam ser compartilhados com outras partes do site.

3. CSS Externo (O mais recomendado!)

O CSS externo é a forma mais profissional e recomendada de aplicar estilos. Você escreve todo o seu CSS em um arquivo separado (com a extensão .css) e o "linka" ao seu documento HTML.

Como funciona: Você cria um arquivo .css (ex: style.css) e, dentro da seção <head> do seu HTML, você usa a tag <link> para referenciá-lo.

Exemplo de index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>CSS Externo</title>
  <!-- Conectando o arquivo CSS externo -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Meu Título Estilizado Externamente</h1>
  <p>Este é um parágrafo com estilos do arquivo externo.</p>
  <button>Clique aqui</button>
</body>
</html>

Exemplo de style.css (arquivo separado):

/* Este é o conteúdo do arquivo style.css */
body {
  font-family: Verdana, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: purple;
  text-align: left;
}

p {
  color: #333;
  margin-bottom: 15px;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

Vantagens:

Separação total de conteúdo e estilo: O HTML fica limpo, focado na estrutura, e o CSS fica em seu próprio arquivo.
Reutilizável: O mesmo arquivo CSS pode ser linkado a várias páginas HTML, garantindo consistência visual em todo o site.
Fácil manutenção: Mude um estilo no arquivo CSS e a alteração se aplica a todas as páginas que o utilizam.
Melhor performance (cache): O navegador pode armazenar em cache o arquivo CSS, o que significa que ele não precisa ser baixado novamente a cada página visitada, tornando o carregamento mais rápido.
Colaboração: Facilita o trabalho em equipe, onde designers podem focar no CSS e desenvolvedores no HTML/JavaScript.

Desvantagens:

Uma requisição extra: O navegador precisa fazer uma requisição adicional para baixar o arquivo CSS. Para sites muito pequenos, isso pode ser uma desvantagem mínima, mas os benefícios superam em muito essa pequena desvantagem.

Quando usar: Na grande maioria dos projetos web. É a prática padrão e mais recomendada para desenvolvimento profissional.

Qual a prioridade?

Se você usar as três formas de CSS no mesmo elemento, qual estilo será aplicado? A regra geral é:

Inline > Interno > Externo

Ou seja, o CSS inline tem a maior prioridade. Se um estilo for definido inline, ele sobrescreverá o mesmo estilo definido internamente ou externamente. O CSS interno sobrescreve o externo.

Exemplo de prioridade:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Prioridade CSS</title>
  <link rel="stylesheet" href="style.css">
  <style>
    p {
      color: green; /* Estilo interno */
    }
  </style>
</head>
<body>
  <p style="color: blue;">Este parágrafo será azul.</p> <!-- Inline vence -->
  <p>Este parágrafo será verde.</p> <!-- Interno vence o externo -->
</body>
</html>

E no style.css:

p {
  color: red; /* Estilo externo */
}

No exemplo acima, o primeiro parágrafo será azul (inline vence). O segundo parágrafo será verde (interno vence o externo).

Entender essas três formas e suas prioridades é um passo fundamental para escrever CSS de forma eficiente e organizada!