Cuando se trata de dar estilo a una página web, CSS (Cascading Style Sheets) nos ofrece diferentes formas de aplicar los estilos. Las tres más comunes son: inline, interno y externo. Cada una tiene ventajas y desventajas, y elegir la correcta dependerá del proyecto, la organización del código y los objetivos de rendimiento.
En este artículo exploraremos qué es cada tipo de CSS, sus pros y contras, y cuál conviene usar en distintas situaciones.
Tabla de contenidos
1. CSS Inline
El CSS inline se escribe directamente dentro de la etiqueta HTML usando el atributo style.
Ejemplo:
<p style="color: blue; font-size: 18px;">Este es un texto con CSS inline</p>
✅ Ventajas:
- Fácil de implementar para cambios rápidos.
- No requiere archivo adicional.
- Ideal para pruebas rápidas o estilos muy específicos.
❌ Desventajas:
- Dificulta el mantenimiento en proyectos grandes.
- No favorece la reutilización de estilos.
- Hace que el HTML sea más pesado y menos legible.
2. CSS Interno
El CSS interno se escribe dentro del mismo archivo HTML, usando la etiqueta <style> en la sección <head>.
Ejemplo:
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Este es un texto con CSS interno</p>
</body>
✅ Ventajas:
- Mantiene los estilos centralizados en el mismo archivo.
- Útil para páginas pequeñas o cuando solo se necesita un diseño específico en una página.
❌ Desventajas:
- No se puede reutilizar fácilmente en múltiples páginas.
- Puede volver el HTML más extenso y menos organizado en proyectos grandes.
3. CSS Externo
El CSS externo se coloca en un archivo separado con extensión .css, que luego se vincula al HTML usando la etiqueta <link>.
Ejemplo:
Archivo estilos.css:
p {
color: red;
font-size: 18px;
}
Archivo HTML:
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Este es un texto con CSS externo</p>
</body>
✅ Ventajas:
- Ideal para proyectos grandes y profesionales.
- Separa contenido (HTML) de presentación (CSS), favoreciendo la organización.
- Permite reutilizar los mismos estilos en múltiples páginas.
- Mejora la velocidad de carga gracias al almacenamiento en caché del archivo CSS.
❌ Desventajas:
- Requiere un archivo adicional.
- En proyectos muy pequeños puede ser innecesario.
¿Cuál es mejor?
La respuesta depende del contexto:
- Inline: solo recomendable para ajustes rápidos o pruebas puntuales.
- Interno: útil para proyectos pequeños o páginas individuales.
- Externo: la mejor opción para proyectos profesionales, grandes y mantenibles.
En la mayoría de los casos, el CSS externo es la práctica recomendada, ya que mejora la escalabilidad, el rendimiento y el mantenimiento del proyecto.
👉 En conclusión, aunque los tres métodos son válidos, usar CSS externo es la mejor práctica para construir sitios web modernos, organizados y eficientes.
