📚 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.
📖5. CSS: selectores básicos (1)
✅ Resumen
En esta lección se explica los selectores básicos de CSS. CSS se compone de reglas formadas por selectores y declaraciones de estilo (propiedad–valor).
Se introducen los tres selectores fundamentales:
- Selector de tipo, que aplica estilos a todas las etiquetas de un mismo tipo (ej. h1, span).
- Selector de clase, que utiliza el atributo class y se representa en CSS con “.”. Permite aplicar una misma regla a múltiples elementos y combinar varias clases en una etiqueta, favoreciendo la reutilización de código.
- Selector de identificador, que emplea el atributo id y se representa con “#”. Debe ser único dentro de cada documento.
También se explica la combinación y anidamiento de selectores, lo que permite aplicar reglas más específicas, así como la agrupación de reglas con comas para reducir código y facilitar su mantenimiento.
📖6. CSS: selectores básicos (2)
✅ Resumen
En esta lección se explican los selectores básicos de CSS, centrándose en el selector universal y en varias pseudo-clases aplicadas a enlaces y formularios. El selector universal (*) selecciona todos los elementos de la página, aunque su uso no es recomendable salvo para inicializar estilos globales, como márgenes o rellenos en cero.
Se presentan las pseudo-clases de enlaces: :link (enlaces no visitados), :visited (enlaces visitados), :hover (cuando el puntero pasa sobre un elemento) y :active (cuando el enlace está siendo pulsado). Se subraya la importancia de declarar estas pseudo-clases en un orden correcto y se advierte sobre su comportamiento limitado en dispositivos táctiles, lo que plantea retos de accesibilidad.
Asimismo, se introduce la pseudo-clase :focus, útil para resaltar campos de formularios o enlaces que reciben el foco mediante el teclado, mejorando la experiencia del usuario.
📖7. CSS: colores
✅ Resumen
En esta lección se explica el uso de los colores en CSS. Se presentan los modelos de color más conocidos, centrándose en RGB, utilizado en CSS1 y CSS2 y heredado en CSS3. Aunque se pueden emplear nombres de colores, resulta poco práctico; por ello se utiliza principalmente el modelo RGB, que define los colores a partir de la combinación de rojo, verde y azul.
Los valores de cada canal pueden expresarse en decimal (0–255), porcentual (0–100) o hexadecimal (00–FF). Se muestran ejemplos para representar negro y blanco, aclarando la diferencia entre los modelos aditivo y sustractivo. La notación más usada por los desarrolladores es la hexadecimal, que también admite una versión reducida de tres dígitos.
Los colores pueden aplicarse en distintos aspectos del modelo de caja: texto (color), fondo (background-color) y borde (border-color). Finalmente, se recomienda utilizar paletas armónicas de pocos colores y se remite a otros vídeos y recursos sobre las novedades de CSS3.
📖8. CSS: selectores avanzados
✅ Resumen
En esta lección se abordan los selectores avanzados de CSS. Se explican primero los selectores de descendencia directa mediante el símbolo “>” y el selector adyacente “+”, mostrando cómo restringir la aplicación de estilos a elementos concretos. Luego se introducen pseudo-clases como :first-child, :last-child, :first-letter y :first-line, útiles para dar formato a elementos o partes específicas de un texto.
También se estudian los selectores de atributos, que permiten aplicar estilos según la presencia, valor exacto o coincidencia parcial de atributos como title o href. Se destacan las variantes que utilizan símbolos adicionales (|=, ~=) para mayor flexibilidad. Además, se explica el uso de :lang para aplicar estilos a textos en distintos idiomas, y la posibilidad de generar contenido antes o después de un elemento con pseudo-elementos, aunque se advierte que debe usarse con moderación.
📖9. CSS: selectores CSS3
✅ Resumen
En esta lección se explican algunos de los nuevos selectores de CSS3.
CSS3, definido en la recomendación “Selectors Level 3” del W3C (2011), amplía los selectores de CSS1 y CSS2. Se recuerda la pseudoclase “:first-child” de CSS2, que aplica estilos al primer hijo de un elemento, y se presentan nuevas pseudoclases como “:last-child” y las variantes que permiten seleccionar el enésimo hijo desde el inicio o desde el final. También se diferencia entre “:first-child” y “:first-of-type”, aclarando que este último selecciona el primer hijo de un tipo específico, aunque no sea el primero absoluto.
La lección explica además el uso del operador de hermanos definido en CSS3, que complementa al operador + de CSS2. Mientras que + selecciona solo al elemento inmediatamente contiguo, el nuevo operador selecciona a todos los elementos hermanos.