Los últimos tutoriales de desarrollo web
 

HTML <style> Tag


Ejemplo

El uso de la <style> elemento en 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>
Inténtalo tú mismo "

Definición y Uso

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

Dentro de la <style> elemento que especifica cómo los elementos HTML deben representar en un explorador.

Cada documento HTML puede contener múltiples <style> etiquetas.


Soporte para el navegador

Elemento
<style>

Notas y sugerencias

Consejo: Para enlazar a una hoja de estilos externa, utilice el <link> etiqueta.

Consejo: Para obtener más información sobre las hojas de estilo, por favor lea nuestra Tutorial CSS .

Nota: Si el "scoped" atributo no se utiliza, cada <style> etiqueta debe estar ubicada en la sección de cabeza.


Diferencias entre HTML 4.01 y HTML5

El "scoped" atributo es nuevo en HTML5, que permite definir los estilos de una sección específica del documento. Si el "scoped" atributo está presente, los estilos sólo se aplican al elemento padre del elemento de estilo y elementos secundarios de ese elemento.


atributos

= Nuevo en HTML5.

Atributo Valor Descripción
media media_query Especifica qué dispositivo / medio del recurso de los medios está optimizado para
scoped scoped Especifica que los estilos se aplican solamente a elemento primario de este elemento y elementos secundarios de ese elemento
type text/css Especifica el tipo de soporte de la <style> etiqueta

Los atributos globales

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


Atributos de eventos

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


Páginas relacionadas

Tutorial de HTML: HTML CSS

CSS tutorial: Tutorial CSS

Referencia HTML DOM: Style de objetos


Ajustes por defecto CSS

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

style {
    display: none;
}