Hoja de estilos HTML

Mateo G. - July 19, 2024

Tipos de Hojas de Estilo

Existen tres tipos de hojas de estilo en HTML: hojas de estilo internas, hojas de estilo externas y estilos en línea. Cada tipo tiene sus propias ventajas y desventajas, y la elección de cuál usar depende de las necesidades específicas del sitio web.

Hoja de Estilo Interna

Una hoja de estilo interna se define dentro de la sección <head> de un documento HTML usando la etiqueta <style>. Permite aplicar estilos a múltiples elementos dentro de una sola página HTML. La principal ventaja de usar una hoja de estilo interna es que mantiene los estilos específicos para esa página, facilitando su gestión y comprensión. Sin embargo, si tienes varias páginas que requieren los mismos estilos, necesitarías duplicar la hoja de estilo interna en cada página, lo que puede dificultar su mantenimiento.

Consejo: Hoja de Estilo Interna

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de Hoja de Estilo Interna</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Bienvenido a Mi Sitio Web</h1>
  <p>Este es un ejemplo de una hoja de estilo interna.</p>
</body>
</html>

Hoja de Estilo Externa

Una hoja de estilo externa es un archivo CSS separado que contiene los estilos para un sitio web. Se vincula al documento HTML usando la etiqueta <link> dentro de la sección <head>. La principal ventaja de usar una hoja de estilo externa es que permite aplicar los mismos estilos en múltiples páginas, facilitando el mantenimiento de una apariencia consistente en todo el sitio web. Además, como los estilos están en un archivo separado, puede mejorar la velocidad de carga del sitio web. La desventaja es que se necesita una solicitud HTTP adicional para obtener el archivo CSS externo.

Consejo: Hoja de Estilo Externa

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de Hoja de Estilo Externa</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Bienvenido a Mi Sitio Web</h1>
  <p>Este es un ejemplo de una hoja de estilo externa.</p>
</body>
</html>

Estilos en Línea

Los estilos en línea se aplican directamente a un elemento HTML usando el atributo style. Estos sobrescriben cualquier estilo definido en hojas de estilo internas o externas. La principal ventaja de usar estilos en línea es que permiten aplicar estilos a un elemento específico rápidamente. Sin embargo, los estilos en línea mezclan contenido con presentación, haciendo que el código HTML sea más difícil de leer y mantener. Además, si necesitas aplicar el mismo estilo a múltiples elementos, tendrías que duplicar el estilo en línea para cada elemento.

Consejo: Estilos en Línea

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de Estilos en Línea</title>
</head>
<body>
  <h1 style="color: #333; text-align: center;">Bienvenido a Mi Sitio Web</h1>
  <p style="font-size: 16px; line-height: 1.5;">Este es un ejemplo de estilos en línea.</p>
</body>
</html>

Enlazando hojas de estilo externas

Para enlazar una hoja de estilo externa a un documento HTML, debes usar la etiqueta <link> dentro de la sección <head> de tu archivo HTML. La etiqueta <link> tiene varios atributos que debes especificar:

Atributo	Descripción
`rel`	Especifica la relación entre el documento HTML y el archivo enlazado. Para enlazar una hoja de estilo, el valor debe ser `"stylesheet"`.
`type`	Especifica el tipo del archivo enlazado. Para un archivo CSS, el valor debe ser `"text/css"`.
`href`	Especifica la URL o ruta del archivo de la hoja de estilo externa.

Consejo: Ejemplo de cómo enlazar una hoja de estilo externa

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de enlace a hoja de estilo externa</title>
  <link rel="stylesheet" type="text/css" href="path/to/styles.css">
</head>
<body>
  <h1>Bienvenido a mi sitio web</h1>
  <p>Este es un ejemplo de cómo enlazar una hoja de estilo externa.</p>
</body>
</html>

En el ejemplo anterior, la etiqueta <link> se coloca dentro de la sección <head>. El atributo rel se establece como "stylesheet", indicando que el archivo enlazado es una hoja de estilo. El atributo type se establece como "text/css", especificando que el archivo enlazado es un archivo CSS. El atributo href contiene la ruta del archivo CSS externo, que en este ejemplo es "path/to/styles.css". Debes reemplazar esto con la ruta real de tu archivo CSS.

La ruta del archivo puede especificarse de diferentes maneras:

Ruta relativa: Si el archivo CSS está ubicado en el mismo directorio que el archivo HTML, puedes simplemente especificar el nombre del archivo (por ejemplo, "styles.css"). Si el archivo CSS está en un subdirectorio, debes incluir la ruta del directorio (por ejemplo, "css/styles.css").
Ruta absoluta: Puedes especificar la URL completa del archivo CSS, incluyendo el nombre de dominio (por ejemplo, "https://example.com/css/styles.css"). Esto es útil cuando enlazas a una hoja de estilo alojada en un dominio diferente.

Es importante asegurarse de que la ruta del archivo sea correcta, de lo contrario los estilos no se aplicarán a tu documento HTML.

Al enlazar una hoja de estilo externa, puedes mantener tus estilos separados del contenido HTML, haciendo que tu código sea más fácil de mantener y reutilizar. Puedes enlazar la misma hoja de estilo a múltiples páginas HTML, asegurando una apariencia consistente en todo tu sitio web.