Etiqueta HTML <estilo>


Ejemplo

Uso del elemento <style> para aplicar una hoja de estilo simple a un documento HTML:

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

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

</body>
</html>

Más ejemplos de "Pruébelo usted mismo" a continuación.


Definición y uso

La <style>etiqueta se utiliza para definir la información de estilo (CSS) de un documento.

Dentro del <style>elemento, especifica cómo deben mostrarse los elementos HTML en un navegador.


Consejos y notas

Nota: cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo. Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilo leída (consulte el ejemplo a continuación).

Sugerencia: para vincular a una hoja de estilo externa, use la etiqueta <link> .

Sugerencia: para obtener más información sobre las hojas de estilo, lea nuestro Tutorial de CSS .


Compatibilidad con 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 globales

La <style>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <style>etiqueta también es compatible con los atributos de eventos en HTML .


Más ejemplos

Ejemplo

Múltiples estilos para los mismos 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

Tutorial de HTML: HTML CSS

Tutorial de CSS : Tutorial de CSS

Referencia HTML DOM: objeto de estilo


Configuración predeterminada de CSS

La mayoría de los navegadores mostrarán el <style>elemento con los siguientes valores predeterminados:

style {
  display: none;
}