Etiqueta <style> HTML

Definição e uso

<style> etiqueta é usada para definir informações de estilo do documento (CSS).

Em <style> Você pode especificar como o elemento HTML será apresentado no navegador.

Observe que o elemento style define estilos CSS integrados ao documento HTML, enquanto o elemento link é usado para importar estilos de tabelas de estilos externas.

O elemento style pode aparecer em várias partes do documento HTML. Um documento pode conter vários elementos style, portanto, não é necessário empurrar todas as definições de estilo para a seção head. Isso é especialmente útil em situações onde se usa motor de template para gerar páginas, pois permite complementar os estilos definidos pelo template com estilos específicos da página.

Veja também:

Tutorial de HTML:HTML CSS

Tutorial de CSS:Tutorial CSS

Manual de referência do HTML DOM:Objeto Style

Exemplo

Exemplo 1

Usando <style> O elemento aplica uma tabela de estilos simples ao documento HTML:

<html>
<head>
<style>
  h1 {cor: vermelho;}
  p {cor: azul;}
</style>
</head>
<body>
<h1>Este é o título</h1>
<p>Este é um parágrafo.</p>
</body>
</html>

Experimente você mesmo

Exemplo 2

Várias estilos para o mesmo elemento:

<html>
<head>
<style>
  h1 {cor: vermelho;}
  p {cor: azul;}
</style>
<style>
  h1 {cor: verde;}
  p {cor: pink;}
</style>
</head>
<body>
<h1>Este é o título</h1>
<p>Este é um parágrafo.</p>
</body>
</html>

Experimente você mesmo

Dicas e comentários

Atenção:Quando o navegador lê a tabela de estilos, ele formata o documento HTML com base nas informações da tabela de estilos. Se algumas propriedades foram definidas para o mesmo seletor (elemento) em diferentes tabelas de estilos, o valor da última tabela de estilos lida será usado (veja o exemplo acima)!

Dica:Para linkar a uma folha de estilo externa, use <link> tag.

Dica:Para obter mais informações sobre as folhas de estilo, leia nossa Tutorial CSS.

Atributo

Atributo Valor Descrição
media Consulta de mídia Define o meio usado pelo estilo.
type text/css Define o tipo de mídia do tag <style>.

Atributos globais

<style> O tag ainda suporta Atributos globais no HTML.

Atributos de evento

<style> O tag ainda suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão: <style> Elemento:

style {
  display: none;
}

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte