¿Cuáles son las formas de añadir CSS a una página HTML y cuál es la recomendada?
Aprende las tres formas de incluir CSS (en línea, interno, externo) y por qué las hojas de estilo externas son la opción recomendada para la mayoría de proyectos.
Existen tres formas principales de añadir CSS a una página HTML para definir su estilo y presentación:
- CSS en línea (Inline Styles):
Los estilos se aplican directamente a un elemento HTML individual mediante el atributostyle.
Cada declaración CSS se escribe dentro del valor de este atributo.<p style="color: blue; font-size: 16px; margin-left: 10px;">Este es un párrafo con estilos en línea.</p>
Ventajas: Rápido para aplicar un estilo muy específico a un solo elemento o para pruebas.
Desventajas: Tiene la mayor especificidad, lo que puede dificultar la anulación de estilos. Mezcla contenido y presentación, dificulta el mantenimiento y no es reutilizable. - CSS interno (Internal Stylesheet o Embedded Styles):
Los estilos CSS se escriben dentro de una etiqueta<style>que se coloca en la sección<head>del documento HTML.
Las reglas definidas aquí se aplican a la página actual<head>
<meta charset="UTF-8">
<title>Mi Página</title>
<style>
body {
font-family: Arial, sans-serif;
}
p {
color: green;
}
.destacado {
font-weight: bold;
}
</style>
</head>
Ventajas: Útil para estilos que son específicos de una única página o para demostraciones sencillas.
Desventajas: Los estilos no se pueden reutilizar en otras páginas del sitio. Si hay muchos estilos, el archivo HTML puede volverse pesado. - CSS externo (External Stylesheet):
Los estilos se definen en uno o más archivos .css separados.
Estos archivos se enlazan al documento HTML mediante la etiqueta <link> en la sección <head>.<head>
<meta charset="UTF-8">
<title>Mi Página</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
/* En el archivo CSS (css/estilos.css) */
body {
font-family: Verdana, sans-serif;
background-color: #f0f0f0;
}
p {
color: navy;
line-height: 1.6;
}
Ventajas: Es la forma más flexible y eficiente. Permite la separación clara entre contenido (HTML) y presentación (CSS), facilita el mantenimiento del código, los estilos son reutilizables en múltiples páginas, y los navegadores pueden almacenar en caché los archivos.css, mejorando los tiempos de carga del sitio.
¿Cuál es la forma recomendada?
La forma recomendada y más utilizada para la mayoría de los proyectos web es utilizar hojas de estilo externas. Esta práctica promueve un código más limpio, organizado, mantenible y escalable, además de ofrecer beneficios de rendimiento.
Los estilos internos pueden ser aceptables para casos muy puntuales (como estilos para un correo electrónico HTML o una página única muy simple).
Los estilos en línea deben evitarse en la medida de lo posible, reservándolos para situaciones muy específicas donde se necesita anular otros estilos con alta prioridad o para manipular estilos dinámicamente con JavaScript (aunque incluso para esto último hay mejores enfoques).
