<style>: O Elemento STYLE
Última atualização: 2026-10-13
<style>O Elemento STYLE
Escreve regras CSS inline no documento sem arquivo externo; media pode limitar quando ele se aplica.
| Categoria | Metadados |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </style> tag |
| Status | Padrão |
📝 Sintaxe
<style>
selector { property: value; }
</style>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
type | Style language, default text/css, usually omitted. | |
media | Media condition that limits when the style applies. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <style> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： style é prático para demos; sites de produção preferem CSS externo via link para reutilização.
❓ Perguntas Frequentes
QA tag style deve ficar no head ou no body?
APela especificação, style só pode aparecer no head (style no body não atende ao modelo de conteúdo). Na prática, o navegador tolera, mas o caminho certo é concentrar o CSS crítico no head para evitar FOUC; injeção de style via JS em cenários componentizados é outro caso.
QQual é a diferença entre style e link para carregar CSS?
A
<style> é um bloco inline: chega junto com o HTML, sem requisição extra, adequado ao CSS crítico da primeira dobra; <link> é externo: pode ser cacheado, reutilizado em várias páginas e mais fácil de manter, adequado aos estilos do site. Combinação clássica de performance: style com o CSS crítico no head, link carregando o resto de forma assíncrona.QComo usar o atributo media de style?
ACom
media='print', o bloco vale só na impressão; com media='(max-width: 600px)', vale condicionalmente. Atenção: blocos que não casam com a condição não são aplicados, mas ainda são baixados e analisados.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
