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;
}