Etiqueta style en HTML

¿Para qué sirve la etiqueta style en HTML?

La etiqueta <style> en HTML5 se utiliza para definir estilos CSS dentro de un documento HTML. Es una forma de aplicar estilos a elementos HTML en una página web, en lugar de hacerlo con un archivo externo de hojas de estilo CSS.

La etiqueta <style> debe estar ubicada dentro del encabezado <head> de un documento HTML y contener reglas CSS para dar estilos a los elementos HTML de una página web.

  • La sintaxis básica de la etiqueta <style> en HTML5 es:

<head>
  <style>
    /* Aquí se escribe el CSS */
  </style>
</head>


Lenguaje del código: HTML, XML (xml)

Características

Algunas de las características y usos de la etiqueta <style> son:

  1. Ofrece una forma más fácil y rápida de aplicar estilos en lugar de crear un archivo externo de hojas de estilo CSS.
  2. Puede ser utilizada para crear estilos personalizados y sobrescribir estilos estándar de los navegadores.
  3. Las reglas CSS dentro de la etiqueta <style> se aplican a los elementos HTML que se encuentran en el mismo documento.

Ejemplo de uso

El siguiente es un ejemplo básico de código HTML5 que utiliza la etiqueta <style> para especificar un estilo para los elementos <p> en una página web:


<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      color: #333;
      text-align: justify;
    }
  </style>
</head>
<body>
  <p>Este es un párrafo de ejemplo.</p>
</body>
</html>


Lenguaje del código: HTML, XML (xml)

El uso de hojas de estilo permite separar la presentación de la estructura del contenido en un documento HTML, lo que facilita la mantenibilidad y el diseño flexible de la página web.

Videotutorial

Videotutorial sobre la etiqueta o elemento <style> de HTML.

Atributos

La etiqueta <style> en HTML5 generalmente no tiene atributos. Sin embargo, existe un atributo opcional llamado “media” que permite especificar para qué tipo de dispositivos se deben aplicar los estilos definidos dentro de la etiqueta o en el archivo externo referenciado.

El atributo “media” puede tener valores como “screen”, “print”, “speech”, entre otros. Por ejemplo:


<style media="screen">
  /* CSS para pantallas */
</style>

<style media="print">
  /* CSS para impresión */
</style>


Lenguaje del código: HTML, XML (xml)

También es posible especificar múltiples valores para “media” separados por comas:


<style media="screen, print">
  /* CSS para pantallas y para impresión */
</style>


Lenguaje del código: HTML, XML (xml)

Más ejemplos

A continuación, te dejo tres ejemplos de cómo usar la etiqueta o elemento <style> en HTML5:

  1. Aplicar estilos a toda la página web:

<head>
  <style>
    /* Cambia el color de fondo de la página a amarillo */
    body {
      background-color: yellow;
    }

    /* Estilo para los encabezados <h1> */
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Este es un encabezado</h1>
  <p>Este es un párrafo de texto</p>
</body>


Lenguaje del código: HTML, XML (xml)
  1. Referenciar un archivo externo de hojas de estilo:

<head>
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>

<body>
  <h1>Este es un encabezado</h1>
  <p>Este es un párrafo de texto</p>
</body>


Lenguaje del código: HTML, XML (xml)

El archivo “estilos.css” contiene el siguiente CSS:


/* Cambia el color de fondo de la página a amarillo */
body {
  background-color: yellow;
}

/* Estilo para los encabezados <h1> */
h1 {
  color: blue;
  text-align: center;
}


Lenguaje del código: CSS (css)
  1. Aplicar estilos a un tipo específico de dispositivo:

<head>
  <style media="print">
    /* CSS para impresión */
    body {
      background-color: white;
    }

    /* Estilo para los encabezados <h1> */
    h1 {
      color: black;
    }
  </style>
</head>

<body>
  <h1>Este es un encabezado</h1>
  <p>Este es un párrafo de texto</p>
</body>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, los estilos definidos dentro de la etiqueta <style> solo se aplicarán cuando se imprima la página web.

Atributo Style

El atributo “style” es un atributo global en HTML5 que se puede utilizar en cualquier etiqueta para aplicar estilos CSS a nivel de línea.

Este atributo permite especificar estilos inline en lugar de incluirlos en un archivo externo o dentro de una etiqueta <style>.

Ejemplo:


<p style="color: blue; background-color: yellow;">Este es un párrafo con estilos inline</p>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece el color de texto en azul y el color de fondo en amarillo para el párrafo. Los estilos se especifican en línea dentro del atributo “style”.

OJO: Es importante destacar que, aunque el uso del atributo “style” es válido y útil en situaciones específicas, es mejor práctica colocar los estilos en hojas de estilo externas o dentro de una etiqueta <style> para mejorar la separación de estilos y contenido y mantener un código más limpio y organizado.