Tag HTML <estilo>


Exemplo

Uso do elemento <style> para aplicar uma folha de estilo simples a um documento HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Mais exemplos de "Experimente você mesmo" abaixo.


Definição e uso

A <style>tag é usada para definir informações de estilo (CSS) para um documento.

Dentro do <style>elemento, você especifica como os elementos HTML devem ser renderizados em um navegador.


Dicas e Notas

Nota: Quando um navegador lê uma folha de estilo, ele irá formatar o documento HTML de acordo com as informações da folha de estilo. Se algumas propriedades foram definidas para o mesmo seletor (elemento) em diferentes folhas de estilo, será usado o valor da última folha de estilo lida (veja o exemplo abaixo)!

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

Dica: Para saber mais sobre folhas de estilo, leia nosso Tutorial de CSS .


Suporte ao navegador

Element
<style> Yes Yes Yes Yes Yes


Atributos

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Atributos Globais

A <style>tag também suporta os Atributos Globais em HTML .


Atributos do evento

A <style>tag também suporta os atributos de evento em HTML .


Mais exemplos

Exemplo

Vários estilos para os mesmos elementos:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Páginas relacionadas

Curso HTML: HTML CSS

Tutorial de CSS : Tutorial de CSS

Referência HTML DOM: objeto de estilo


Configurações padrão de CSS

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

style {
  display: none;
}