As 3 Formas de Usar CSS no HTML: Inline, Interno e Arquivo Externo
Fala, futuro mestre do Front-End! Se você acompanhou a nossa introdução sobre o que é CSS e para que serve, você já deve estar convencido de que a era do HTML puro, feio e monocromático ficou no passado. É simplesmente impossível ser um Webmaster ou Web Designer profissional sem dominar completamente as folhas de estilo.
Neste tutorial prático da nossa apostila de CSS, nós vamos colocar a mão na massa. Como tudo no desenvolvimento Web, o HTML é flexível e nos oferece diferentes caminhos para chegar ao mesmo resultado. Hoje, você vai descobrir as três maneiras exatas de conectar o CSS ao seu HTML e entender por que uma delas é a favorita absoluta do mercado e do Google!
Como inserir CSS no HTML?
Como aplicar CSS no HTML? Existem três formas de inserir CSS em uma página web: 1. CSS Inline: Usando o atributo style diretamente na tag HTML. 2. CSS Interno: Escrevendo as regras dentro da tag <style> no <head> do documento. 3. CSS Externo: A melhor prática, que consiste em criar um arquivo .css separado e importá-lo no HTML usando a tag <link>.
1. CSS Inline (Usando `style` como atributo)
A maneira mais direta (e muitas vezes a mais trabalhosa a longo prazo) de pintar um elemento no seu site é usando o CSS Inline (em linha). Isso significa que você vai escrever o código de design dentro da própria tag HTML, como se fosse um atributo comum.
Por exemplo, se quisermos escrever uma frase usando a tag de cabeçalho H2 na cor azul, e com a fonte um pouco maior, fazemos assim:
<!-- Estilização Inline: Atributo style dentro da tag H2 -->
<h2 style="color: #2563eb; font-size: 24px;">Meu título azul e grande!</h2>Veja como essa sintaxe funciona: colocamos o valor dentro de aspas (style="..."). Lá dentro, escrevemos a propriedade (ex: color), colocamos dois pontos (:) e inserimos o valor (ex: #2563eb que é um tom moderno de azul). Para adicionar uma segunda regra, basta separar com ponto e vírgula (;).
2. CSS Interno (A tag `< style >`)
Para resolver o problema do trabalho braçal, o HTML nos permite criar um "bloco de regras" no topo da página. Em vez de estilizar cada tag individualmente, nós agrupamos tudo dentro da tag <style>, que deve ser declarada obrigatoriamente dentro do <head> do seu documento.
Veja como fica o código. Nós avisamos o HTML que vamos usar CSS (type="text/css") e ditamos as regras para as tags h1 e h2:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de CSS Interno</title>
<!-- O Bloco de CSS Interno fica AQUI! -->
<style type="text/css">
h1 {
color: #dc2626; /* Vermelho */
}
h2 {
color: #2563eb; /* Azul */
font-size: 20px;
}
</style>
</head>
<body>
<h1>Este título ficará vermelho automaticamente!</h1>
<h2>E este subtítulo ficará azul!</h2>
<h1>Qualquer outro H1 da página também será vermelho.</h1>
</body>
</html>Fantástico, não? Você pode usar quantas tags H1 e H2 quiser no <body>, e todas elas vão herdar a cor que você definiu apenas uma vez no topo. Você acabou de automatizar o seu trabalho!
Cansado de "decorar" códigos e quer aprender de verdade? 🚀
A teoria da internet é vasta, mas para arrumar um emprego na área de Front-End, você precisa de projetos reais. Pare de depender de conexão com a internet e anúncios pulando na tela. Tenha o conhecimento definitivo na palma da sua mão.
"A apostila mastigou a diferença entre HTML e CSS de um jeito que a faculdade nunca conseguiu. Hoje consigo criar menus, alinhamentos e layouts completos sem precisar copiar do Google!" - Carlos, Desenvolvedor.
3. CSS Externo: O Padrão Ouro do Mercado (Tag ``)
O CSS Interno resolve o problema de uma página. Mas e se o seu site, como um grande portal de notícias, tiver 10 mil páginas? Você teria que copiar e colar o bloco <style> 10 mil vezes? É claro que não!
A terceira forma — e a única aceita profissionalmente em projetos reais — é criar um Arquivo Externo de CSS. Nós tiramos todas as regras de dentro do HTML, criamos um arquivo novo no Bloco de Notas (ou no VS Code) e salvamos com a extensão .css (por exemplo: estilo.css).
Passo 1: Criando o arquivo `estilo.css`
Dentro desse arquivo, nós colocamos APENAS as regras. Nada de tags HTML:
/* Este é o conteúdo do seu arquivo estilo.css */
body {
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
h1 {
color: #dc2626;
}
h2 {
color: #2563eb;
font-size: 20px;
}Passo 2: Conectando o CSS ao HTML (A tag ``)
Agora, no seu HTML, dentro da tag <head>, você cria uma "ponte" dizendo onde o navegador deve ir buscar a roupa visual do site. Fazemos isso com a tag <link>:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CSS Externo: O Padrão Profissional</title>
<!-- A Mágica Acontece Aqui: Importando o CSS Externo -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h1>Eu herdei o vermelho do arquivo externo!</h1>
<h2>Eu herdei o azul e o tamanho do arquivo externo!</h2>
</body>
</html>O Resultado Vivo na Tela:
Eu herdei o vermelho do arquivo externo!
Eu herdei o azul e o tamanho do arquivo externo!
.css externo, o navegador do usuário baixa esse arquivo no primeiro acesso e faz um Cache (guarda na memória). Quando o usuário clica em outras páginas do seu site, elas carregam instantaneamente, pois o CSS já está salvo no computador dele! Isso dispara suas métricas de velocidade no Google!
Perguntas Frequentes (FAQ)
Qual a diferença entre a tag style e a tag link no HTML?
A tag <style> é usada para escrever o código CSS diretamente dentro do documento HTML (método Interno). Já a tag <link> não contém código CSS em si; ela atua como uma âncora, indicando o caminho (URL) de um arquivo .css externo que o navegador deve baixar e aplicar na página atual.
Posso usar CSS Inline, Interno e Externo ao mesmo tempo?
Sim! Se você fizer isso, o navegador vai aplicar a regra do "Efeito Cascata" e da "Especificidade". Em caso de conflito (ex: o externo diz que a fonte é preta, mas o inline diz que é verde), a regra que estiver mais "próxima" do elemento vence. O CSS Inline tem prioridade máxima e vai sobrescrever o arquivo externo.
Por que a tag link vai dentro do head e não no body?
O <head> é carregado pelo navegador antes de ele começar a desenhar o conteúdo do <body> na tela do usuário (processo de renderização). Se o CSS fosse importado no final, o usuário veria a página feia, sem estilo, por alguns milissegundos, dando um "pulo" na tela quando a maquiagem fosse aplicada. Isso é chamado de FOUC (Flash of Unstyled Content).
🎯 O que estudar a seguir:
Agora que seu ambiente está configurado e ligado, é hora de entender as regras do jogo. Siga para as próximas aulas essenciais:
- O Efeito Cascata do CSS: Entendendo como o navegador resolve conflitos
- Seletores CSS Básicos: Como mirar em IDs e Classes no HTML
- Cores no CSS: Diferenças entre Hexadecimal, RGB e Nomes
Nenhum comentário:
Postar um comentário