Citas en HTML
Tipos de Hojas de Estilo
Existen tres tipos principales de hojas de estilo utilizadas en el desarrollo web: hojas de estilo internas, hojas de estilo externas y estilos en línea. Cada tipo tiene sus propias ventajas y desventajas, y comprender cuándo usar cada uno es fundamental para crear sitios web bien estructurados y fáciles de mantener.
Hoja de Estilo Interna
Una hoja de estilo interna se define dentro de la etiqueta <style> en la sección <head> de un documento HTML. Contiene reglas CSS que se aplican a los elementos de esa página específica. Las hojas de estilo internas son útiles cuando tienes una sola página con estilos únicos o cuando quieres probar rápidamente algunos estilos sin crear un archivo CSS separado.
| Ventajas | Desventajas |
|---|---|
| Los estilos se mantienen dentro del documento HTML, facilitando la gestión para sitios web de una sola página. | Los estilos no se pueden reutilizar en varias páginas, lo que lleva a la duplicación de código. |
| No se necesitan solicitudes HTTP adicionales para obtener los estilos. | Mezclar HTML y CSS puede hacer que el código sea más difícil de leer y mantener. |
Consejo: Ejemplo de una hoja de estilo interna
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>Hoja de Estilo Externa
Una hoja de estilo externa es un archivo CSS separado que contiene estilos para una o más páginas HTML. Se enlaza al documento HTML usando la etiqueta <link> en la sección <head>. Las hojas de estilo externas son el método más común y preferido para aplicar estilos a un sitio web, ya que permiten la reutilización de código, facilitan el mantenimiento y permiten la separación de responsabilidades.
| Ventajas | Desventajas |
|---|---|
| Los estilos se pueden reutilizar en varias páginas, reduciendo la duplicación de código. | Se necesita una solicitud HTTP adicional para obtener el archivo CSS externo. |
| Separar HTML y CSS hace que el código sea más legible y fácil de mantener. | Si el archivo CSS externo no se carga, el sitio web puede aparecer sin estilos. |
| Los estilos pueden ser almacenados en caché por el navegador, mejorando los tiempos de carga de la página. |
Consejo: Ejemplo de una hoja de estilo externa
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Estilos en Línea
Los estilos en línea se aplican directamente a un elemento HTML usando el atributo style. Tienen la mayor especificidad y anulan los estilos definidos en hojas de estilo internas o externas. Los estilos en línea deben usarse con moderación, ya que mezclan HTML y CSS, lo que hace que el código sea más difícil de leer y mantener.
| Ventajas | Desventajas |
|---|---|
| Útil para aplicar estilos rápidamente a un solo elemento. | Mezclar HTML y CSS hace que el código sea más difícil de leer y mantener. |
| Mayor especificidad, anulando otros estilos. | Los estilos no se pueden reutilizar, lo que lleva a la duplicación de código. |
| Más difícil aplicar estilos consistentes en todo un sitio web. |
Consejo: Ejemplo de estilos en línea
<p style="color: red; font-weight: bold;">Este es un párrafo con estilos en línea.</p>Enlace de hojas de estilo externas
Para usar una hoja de estilo externa en tu documento HTML, debes enlazarla usando la etiqueta <link> dentro de la sección <head> de tu archivo HTML. La etiqueta <link> es un elemento vacío, lo que significa que no tiene una etiqueta de cierre, y requiere varios atributos para conectar correctamente la hoja de estilo al documento.
El atributo rel especifica la relación entre el documento HTML y el recurso enlazado. Para enlazar una hoja de estilo, el valor debe establecerse como "stylesheet". El atributo type indica el tipo de contenido que se está enlazando, que en este caso es "text/css". El atributo href especifica la ruta del archivo al archivo CSS externo.
Consejo: Enlace de una hoja de estilo externa en el mismo directorio
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Si el archivo CSS está ubicado en un directorio diferente, debes especificar la ruta de archivo apropiada en el atributo href. Por ejemplo, si el archivo CSS está ubicado en un subdirectorio llamado "css", el código se vería así:
Consejo: Enlace de una hoja de estilo externa en un subdirectorio
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>También puedes enlazar hojas de estilo alojadas en sitios web externos proporcionando la URL completa en el atributo href:
Consejo: Enlace de una hoja de estilo externa desde una URL
<head>
<link rel="stylesheet" type="text/css" href="https://example.com/styles.css">
</head>Puedes enlazar múltiples hojas de estilo externas a un solo documento HTML incluyendo varias etiquetas <link> en la sección <head>. El orden en el que se enlazan es importante, ya que los estilos definidos en las hojas de estilo posteriores anularán los de las anteriores si se dirigen a los mismos elementos.