HTML <style> Tag
A tag <style> define a estilização dos elementos de uma página web. Descrição, sintaxe, atributos e exemplos.
A tag <style> incorpora regras de CSS diretamente dentro de um documento HTML. Ela define como os elementos dessa página devem ser exibidos, sem a necessidade de um arquivo de folha de estilos separado. Isso é frequentemente chamado de CSS interno (ou embutido).
Para carregar CSS a partir de um arquivo separado, use o elemento <link rel="stylesheet">.
Uma página pode conter mais de um elemento <style>, e as regras de todos eles são combinadas.
Por que o <style> pertence ao <head>
O CSS dentro de uma tag <style> é destinado ao navegador, não ao leitor, por isso é colocado dentro do elemento <head>. Existem boas razões para mantê-lo lá:
- É bloqueante para renderização. O navegador deve ler e aplicar seu CSS antes de poder pintar a página. Colocar os estilos no
<head>permite que o navegador saiba como tudo deve parecer antes de desenhar o corpo. - Evita o FOUC (Flash Of Unstyled Content). Se os estilos forem definidos tardiamente no documento, o navegador pode exibir brevemente conteúdo sem estilo e depois reaplicar o estilo, causando uma cintilação visível e deslocamento de layout.
O HTML5 tecnicamente permite um elemento <style> dentro do <body> (um navegador ainda aplicará as regras), mas não é recomendado: pode provocar um re-fluxo e o FOUC descrito acima. Mantenha seus estilos no <head>.
Nas versões anteriores do HTML e no XHTML, o atributo type="text/css" era obrigatório com a tag <style>. No HTML5, ele é o padrão e pode ser omitido.
Três maneiras de aplicar CSS
A tag <style> é apenas uma das três maneiras de aplicar CSS. Escolher a correta é importante:
| Método | Como | Melhor para |
|---|---|---|
Atributo style inline | <p style="color: red;"> | Uma substituição pontual em um único elemento. Difícil de manter e tem a maior especificidade, por isso use com moderação. |
<style> interno | Um bloco <style> no <head> | Estilos necessários para apenas uma página, ou CSS crítico que você deseja incluir inline para evitar uma requisição extra. |
<link rel="stylesheet"> externo | Um arquivo .css separado | Estilos compartilhados entre muitas páginas. Armazenado em cache pelo navegador e mantém o conteúdo separado da apresentação — a escolha habitual para sites reais. |
Veja HTML Styles para uma comparação mais completa.
Sintaxe
A tag <style> vem em pares. O conteúdo é escrito entre as tags de abertura (<style>) e fechamento (</style>).
Exemplo da tag HTML <style>:
Tag HTML <style>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>Os seletores (h1, p) dentro do bloco têm como alvo elementos no corpo, e as declarações entre as chaves definem seus estilos.
Resultado
Aplicando estilos condicionalmente com media
O atributo media permite que um bloco <style> seja aplicado somente quando sua media query corresponder — por exemplo, apenas em telas pequenas, apenas em telas (não impressão), ou apenas na impressão. As regras em um bloco cuja query não corresponde são ignoradas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>Você pode fazer o mesmo no elemento <link> (<link rel="stylesheet" media="..." href="...">).
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| media | media_query | Especifica a mídia para a qual os estilos se aplicam, por exemplo, screen and (max-width: 600px). Se omitido, os estilos se aplicam a todas as mídias. |
| type | text/css | Especifica o tipo MIME da folha de estilos. Opcional no HTML5, pois text/css é o padrão. |
O atributo scoped obsoleto
Você ainda pode encontrar referências a um atributo scoped, que pretendia limitar as regras de um bloco <style> ao elemento pai e seus descendentes. Ele nunca foi amplamente implementado e foi removido do padrão HTML — não o utilize. Para limitar o escopo do CSS hoje, use uma destas abordagens modernas:
- Shadow DOM (via elementos customizados / web components), onde os estilos são totalmente encapsulados e não vazam para dentro ou fora.
- Nomes de classe com escopo — um prefixo de classe único por componente, aplicado manualmente ou gerado por ferramentas como CSS Modules.