Elemento style
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento style
contiene a un bloque de declaraciones de estilo. En contraste con el elemento link
, que solamente enlaza a la hoja de estilo como un recurso externo, en este caso la información de estilo estará incrustada en el documento mismo, entre los tags de este elemento. El elemento style
solo puede ser declarado en el encabezado del documento (head
).
Ejemplos
El siguiente ejemplo muestra una declaración básica de estilos de alcance global, ubicada en el encabezado del documento (head
), el lugar que le pertenece.
<head>
<title>Sed de sangre: una novela escrita por el Conde Drácula</title>
<style>
* {
color: red;
background-color: red;
border-color: red;
}
</style>
</head>
Atributos
Atributos específicos
media
Una lista de media queries indicando los tipos de medio (y sus características) para los cuales las declaraciones en este elemento han sido diseñadas. Por ejemplo, un conjunto de declaraciones de estilo podría estar optimizado para impresión (menos colores, imágenes y fondos), un dispositivo móvil o una pantalla normal. El valor por defecto es "all" (todos).
Ejemplo
<style media="print">
img {
display: none;
}
</style>
type
El tipo de contenido (o Tipo de medio de Internet) de las declaraciones de estilo. Si este atributo es omitido, el valor por defecto "text/css" será asumido.
Ejemplo
<style type="text/css">...</style>
scoped
Un valor booleano que indica si las declaraciones de estilo contenidas en este elemento deberían afectar a todos los elementos en el documento o solo a su padre y todos los hijos de éste. Cuando presenta los valores "scoped" o la cadena vacía ("") o si tan solo está presente, este atributo indica que las declaraciones afectarán únicamente al elemento padre y a los hijos de éste.
El atributo scoped
, nuevo en HTML5, ha sido recientemente removido de la especificación debido al escaso soporte provisto por los navegadores.
Ejemplo
<section>
<style scoped>
p {
color: red;
font-weight: bold;
}
</style>
<p>Hay una cosa muy importante a notar aquí...</p>
</section>
<p>Ahora, hablemos de cosas regulares...</p>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.