Estilizando con una hoja de estilo interna en HTML

El lenguaje HTML permite a los desarrolladores web incorporar secciones de estilizado directamente en el código HTML de una página. Para hacer esto, debemos utilizar el elemento <style>. La pregunta entonces es: "¿Cómo informas al navegador que estás creando una sección de estilizado con una hoja de estilo interna?" La respuesta correcta es: <style type="text/css"></style>.

¿Cómo funciona <style type="text/css"></style>?

Este es el rango específico de etiquetas que se utiliza para delimitar secciones de estilizado en una página web.

• <style>: Esta es la etiqueta de apertura.
• type="text/css": Este es un atributo que indica al navegador que el contenido de la etiqueta es CSS, el lenguaje estándar para describir la apariencia de páginas web.
• </style>: Esta es la etiqueta de cierre.

Cualquier código que se coloque entre estas etiquetas será interpretado por el navegador como CSS. Por ejemplo, si quisiéramos colorear todos los párrafos de nuestra página de color azul, haríamos lo siguiente:

<style type="text/css">
  p {
    color: blue;
  }
</style>

Esta sección de código le dice al navegador que todos los elementos de párrafo (<p>) deben ser de color azul.

En el pasado, el atributo type="text/css" era requerido por las especificaciones de HTML. Pero hoy en día, los navegadores modernos interpretan el contenido de la etiqueta <style> como CSS por defecto y este atributo es redundante. Técnicamente, puedes omitirlo y aún el código funcionará:

<style>
  p {
    color: blue;
  }
</style>

Buenas prácticas

Aunque no es obligatorio, es una buena práctica incluir el atributo type="text/css" para asegurar la compatibilidad con los navegadores más antiguos. Además, utilizar hojas de estilo internas puede ser útil para estilos específicos de una sola página. Sin embargo, si los estilos deben aplicarse en varias páginas, es preferible usar una hoja de estilo externa.

Las hojas de estilo internas son una herramienta poderosa para controlar la apariencia de tu página web. Son esenciales para cualquier desarrollador web y comprender cómo funcionan te ayudará a crear páginas web más atractivas y funcionales.