📚 Introducción al desarrollo web: HTML y CSS (2/2)
🗂️ Cómo se define la presentación de una página web
1. CSS: conceptos básicos
✅ Resumen
En esta lección se explican los primeros pasos con CSS (Cascading Style Sheets). Se recuerda que HTML define únicamente la estructura y el contenido de una página web, mientras que CSS permite controlar su presentación visual: colores, tipografía, bordes o fondos.
Se explica que CSS no tiene versiones sino niveles, y que lo recomendable es aprender CSS 2.1, ya que es aceptado por la mayoría de navegadores, mientras que CSS3, aunque incorpora novedades, aún está en desarrollo y no cuenta con soporte total. El lenguaje CSS se basa en reglas compuestas por selectores y declaraciones con propiedades y valores, y actualmente cuenta con casi 200 propiedades.
El desarrollo de CSS está a cargo del W3C, aunque su sitio web no es el más adecuado para principiantes. Como recursos de aprendizaje se sugieren W3Schools, la Wikipedia y el curso CSS Training del W3C, organizado en cuatro semanas.
2. CSS: cómo se usa en HTML (parte 1)
✅ Resumen
En esta lección se explican los primeros pasos con CSS y su relación con HTML. Se introduce el concepto de acoplamiento en sistemas informáticos, destacando la importancia de reducir la dependencia entre componentes.
Se muestra que el uso del atributo style en HTML genera un fuerte acoplamiento con CSS, pues obliga a repetir código en múltiples elementos. A través de ejemplos prácticos en Google Chrome, se aplican propiedades como color, background-color, font-family y font-size a etiquetas como <body>, <h1>, <h2> y <p>. Se observa cómo cambian el color, la fuente y el tamaño del texto, pero también se evidencia el problema de tener que copiar y modificar manualmente el atributo en cada elemento.
La lección concluye señalando que, aunque el atributo style permite definir la presentación visual de forma rápida, no es la mejor práctica por el alto acoplamiento que genera entre HTML y CSS. La solución a este problema se abordará en la siguiente lección, con la explicación del uso de la etiqueta <style>.
3. CSS: cómo se usa en HTML (parte 2)
✅ Resumen
En esta lección se explica cómo usar la etiqueta style en HTML para definir reglas CSS. A diferencia del atributo style, que acopla directamente el código HTML y CSS, el uso de style en el head de la página permite separar ambos lenguajes, aunque aún compartan el mismo fichero.
Se muestra cómo aplicar distintas propiedades de CSS: color, background-color, font-family y font-size. Primero, modifica el color de fondo y del texto de la página a través de la etiqueta body. Luego, cambia la fuente y el tamaño de los encabezados h1 y h2, empleando una sintaxis que permite agrupar selectores. Finalmente, aplica una nueva familia tipográfica a los párrafos (p), sustituyendo la fuente por defecto Times New Roman por Arial o fuentes similares.
Con este método, una sola regla puede aplicarse a múltiples elementos, facilitando cambios globales en la apariencia de la página sin necesidad de repetir atributos.
4. CSS: cómo se usa en HTML (parte 3)
✅ Resumen
En esta lección se explica cómo usar la etiqueta <link> para aplicar hojas de estilo en cascada (CSS) a páginas HTML.
Primero, recuerda que en lecciones anteriores se abordó el uso del atributo style y de la etiqueta <style>. En esta tercera parte se presenta el uso de un fichero CSS externo, lo que permite reducir el acoplamiento entre HTML y CSS, reutilizar el mismo archivo en múltiples páginas y facilitar la gestión de cambios.
Se explica la sintaxis de la etiqueta <link>, sus atributos principales (href y rel="stylesheet") y la simplificación en HTML5 al no requerir el atributo type. También se mencionan otros atributos como media o title.
A través de un ejemplo práctico, se muestra cómo crear un archivo CSS externo (“miestilo.css”), enlazarlo desde el HTML y comprobar los cambios visuales al modificar propiedades como color, background-color, font-family y font-size.
Finalmente, se destaca que usar CSS externo es la mejor forma de trabajar con estilos en HTML, pues permite mantener el código organizado, escalable y fácilmente modificable.