HTML se conecta: CSS, JavaScript y color
Llevamos ocho módulos hablando de HTML como si viviera solo, aislado. Pero ningún sitio web real usa solo HTML: el color, las fuentes bonitas y las animaciones vienen de CSS, y la interactividad —los clics, las validaciones, los menús que se abren— vienen de JavaScript. Hoy vemos cómo estos tres se dan la mano.
El atributo style: la puerta rápida y peligrosa
La forma más directa de darle estilo a un elemento es el atributo
style, que hemos usado ya varias veces en los
playgrounds de este curso para ir más rápido:
Usar style en un proyecto real más allá de una
prueba rápida. Es cómodo, pero no se puede reutilizar (tendrías que copiar y
pegar el mismo estilo en cada elemento), es difícil de mantener, y tiene la
prioridad más alta de todo CSS — lo que significa que cuesta muchísimo
sobreescribirlo después. En un curso, en un ejemplo aislado, es perfecto. En una
web real, evítalo casi siempre.
HTML + CSS: tres formas de conectarlos
Si el estilo en línea no es el camino, ¿cuál lo es? Hay otras dos formas de conectar HTML con CSS, y una de ellas es, con diferencia, la que usarás el 95% de las veces en cualquier proyecto real.
Un bloque <style> dentro del <head> con todo el CSS de esa página. Mejor que el estilo en línea (se reutiliza dentro de la misma página), pero no se comparte entre distintas páginas de un mismo sitio.
Un archivo .css separado, enlazado con <link rel="stylesheet" href="estilos.css">. La opción profesional: un solo archivo de estilos que puedes reutilizar en todas las páginas de tu sitio, y que el navegador puede guardar en caché.
Las tres formas coexisten con una jerarquía de prioridad: el estilo en línea gana casi siempre, luego el interno, luego el externo. Es la primera pincelada de algo que llamamos "la cascada" — el tema central del primer módulo de tu curso de CSS. Si ya lo has visto, esto te sonará familiar.
HTML + JavaScript: darle vida a la página
Si CSS es la piel y la ropa, JavaScript son los músculos: lo que hace que un
botón responda al clic, que un formulario se valide antes de enviarse, que un
menú se abra y se cierre. Se conecta a HTML con la etiqueta
<script>.
Igual que con CSS, puedes escribir el JavaScript directamente entre las etiquetas o enlazar un archivo .js externo con el atributo src — la opción preferida para cualquier proyecto que no sea trivial.
Atributo que le dice al navegador "descarga este script en paralelo, pero no lo ejecutes hasta que toda la página esté cargada". Evita el clásico error de JavaScript intentando tocar un botón que el navegador todavía no ha dibujado.
Colocar <script> en el
<head> sin defer.
El navegador se detiene a mitad de la carga, ejecuta el script, y si ese script
intenta buscar un botón que todavía no existe (porque está más abajo en el
HTML), falla. Por eso es tan habitual ver el script justo antes de
</body>, o en el head pero con
defer.
Una palabra sobre el color
Verás color y background
aparecer en casi todos los playgrounds de este curso, escritos con nombres
(red), códigos hexadecimales
(#004741) o funciones como
rgb(). Aunque la sintaxis se escriba dentro del HTML
cuando usamos style, el color es, en realidad, cien
por cien territorio de CSS — y ahí es exactamente donde tu curso de CSS lo trata
con el detalle que se merece, con paletas, opacidad y mucho más.
Ponlo a prueba
Comprueba lo que has aprendido
1. Estás construyendo un sitio real de varias páginas que comparten el mismo diseño. ¿Qué forma de conectar CSS es la más adecuada?
2. ¿Para qué sirve el atributo defer en <script>?
3. ¿Por qué se recomienda evitar el atributo style en un proyecto real?