AWC | Clase 2: CSS

CSS

En el contexto de las aplicaciones web cliente y el DOM, CSS (Cascading Style Sheets, o Hojas de Estilo en Cascada) es el lenguaje responsable de definir la presentación visual y el diseño de los elementos representados en el DOM a partir del HTML.

Mediante reglas compuestas por selectores (que identifican nodos del DOM, como etiquetas, clases o IDs) y declaraciones de propiedades (como color, tamaño, posición, márgenes, fuentes o animaciones), CSS controla cómo se renderizan los elementos en la pantalla, separando completamente el estilo de la estructura y el contenido.

Selectores

¿Qué son los selectores en CSS?

Los selectores en CSS son patrones que permiten identificar y seleccionar uno o más elementos del HTML (nodos del DOM) para aplicarles estilos específicos. Los selectores le indican al navegador qué partes de la página deben recibir las reglas declaradas en las hojas de estilo.

• De etiqueta: p, div
• De clase: .mi-clase
• De ID (identificador único): #mi-id
• Atributos o estado: :focus, :hover
• Relaciones jerárquicas: hijos, descendientes o hermanos

Ejercicio 1: Semántica y CSS

Deben crear una sección que mostrará los artículos de su catálogo.

• Uso de la etiqueta section
• Pueden identificarla con el uso del atributo id
• Cada elemento del catálogo debe estar dentro de una etiqueta article
• Pueden colocarle datos sobre:
  • Título / Nombre
  • Precio
  • Categoria
  • Cantidad seleccionada

Tipografía

Estilos para la tipografía

La unidad rem (root em) en CSS es extremadamente útil porque sus valores se calculan siempre respecto al tamaño de fuente del elemento raíz html (generalmente 16px por defecto en los navegadores), lo que permite crear sistemas de escalado consistentes y predecibles en toda la página, independientemente del anidamiento o de los tamaños de fuente heredados de elementos padres. Esto facilita el mantenimiento del código, mejora la accesibilidad (ya que respeta las preferencias de tamaño de texto del usuario) y habilita diseños responsivos más controlados.

En relación con la regla de 8 (o sistema de spacing basado en múltiplos de 8px), la unidad rem se alinea perfectamente con este enfoque cuando se mantiene el tamaño de fuente raíz predeterminado de 16px, ya que 1rem equivale exactamente a 16px. De esta forma, valores simples como 0.5rem (8px), 1rem (16px), 1.5rem (24px), 2rem (32px) o 2.5rem (40px) permiten aplicar espaciados, márgenes y paddings de manera coherente y múltiplos de 8px sin cálculos complicados, facilitando un diseño vertical rítmico y mantenible mientras se respeta la accesibilidad y las preferencias del usuario en el navegador.

Imágenes

El elemento img en HTML es una etiqueta vacía (sin cierre) que se utiliza para incrustar imágenes en una página web, definiendo su ubicación y propiedades visuales mediante atributos.

El atributo src (source) es obligatorio y especifica la ruta o URL del archivo de imagen (relativa o absoluta), indicando al navegador dónde cargar el recurso; si la ruta es incorrecta o el archivo no existe, la imagen no se mostrará y aparecerá un icono de error.

Por otro lado, el atributo alt (texto alternativo) es crucial por accesibilidad y robustez: proporciona una descripción textual de la imagen que se lee en lectores de pantalla para usuarios con discapacidad visual, se muestra cuando la imagen no puede cargarse (por ejemplo, por conexión lenta o src roto) y mejora el SEO al ayudar a los motores de búsqueda a entender el contenido. Un buen alt debe ser descriptivo pero conciso, reflejando el propósito de la imagen en el contexto de la página.

Propiedades CSS utilizadas en el ejemplo:

• border-radius
• border
• box-shadow
• filter

Ejercicio 2: Agregar imágenes

A los elementos anteriores agregados al article deben agregar la imagen ilustrativa correspondiente.