Introducción a CSS

CSS (Cascading Style Sheets) es el lenguaje que utilizamos para dar estilo y diseño a nuestras páginas web. Una de sus principales fortalezas radica en la amplia variedad de propiedades que nos ofrece para controlar cada aspecto visual de un sitio web, desde colores y tipografía hasta diseño de layouts y animaciones.

¿Qué son las propiedades CSS?

Las propiedades CSS son las instrucciones específicas que aplicamos a los elementos HTML para cambiar su apariencia. Cada propiedad tiene un nombre (como color, font-size, margin, etc.) y un valor (como red, 16px, o auto) que define cómo se aplicará el estilo.

p {
  color: blue;
  font-size: 16px;
  margin: 10px;
}

En este ejemplo:

color define el color del texto.
font-size ajusta el tamaño de la fuente.
margin establece el espacio exterior del elemento.

¿Cómo interpretar un selector compuesto?

article div p {
  color: goldenrod;
}

Recuerda esto:
1. Empieza a leer de derecha a izquierda.
2. El primer elemento (en nuestro ejemplo p) será el que reciba las propiedades CSS afectadas (color).
3. Delimita la cantidad de espacios que hay en el selector.
4. Si, por ejemplo, hay 2 espacios (como en el ejemplo de arriba) significa que 3 elementos forman el selector (article, div y p).
5. Cada espacio significa que el elemento que está a su derecha pertenece (está dentro) del de la izquierda.
6. Teniendo esto en cuenta, nuestro selector de ejemplo se interpretaría/leería como:
  - “Cualquier elemento p que esté dentro de cualquier elemento div que esté dentro de cualquier elemento article).

¿Cómo se carga CSS en una página web?

Existen tres formas principales de cargar CSS en una página web, cada una con sus ventajas y desventajas:

Estilos Inline:
- Declarados directamente en el atributo style de un elemento HTML.
- Ventajas:
  - Útil para estilos rápidos y específicos.
- Desventajas:
  - Dificulta el mantenimiento y la reutilización.
- Ejemplo:
```
<div style="color: red; font-size: 20px;">Red text</div>
```
Estilos Internos:
- Especificados dentro de una etiqueta <style> en el <head> del documento HTML.
- Ventajas:
  - Útil para estilos específicos de una sola página.
- Desventajas:
  - Dificultad para mantener estilos consistentes en múltiples páginas.
- Ejemplo:
```
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>
```
Hojas de Estilo Externas:
- Archivo CSS separado vinculado al documento HTML mediante la etiqueta <link>.
- Ventajas:
  - Facilita el mantenimiento y permite reutilizar estilos en múltiples páginas.
- Desventajas:
  - Requiere una solicitud HTTP adicional (mitigado con caching).
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```
CSS en Frameworks y Librerías:
- Algunas veces el CSS se incluye directamente desde un framework o CDN externo, como Bootstrap o Tailwind.
- Ejemplo:
```
<head>
  <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css>">
</head>
```

¿Cuántas propiedades CSS existen?

CSS cuenta con más de 500 propiedades oficiales, organizadas en diferentes categorías que abarcan prácticamente cualquier necesidad de diseño. La mayoría de estas propiedades son específicas para casos avanzados, pero hay un grupo más reducido de propiedades esenciales que usarás frecuentemente al comenzar.

Categorías principales de propiedades CSS:

Texto y tipografía: color, font-family, font-size, line-height, text-align, letter-spacing.
Colores y fondos: background-color, background-image, background-size, opacity.
Dimensiones y espacio: width, height, padding, margin.
Bordes y sombras: border, border-radius, box-shadow.
Diseño y posicionamiento: display, position, top, left, flex, grid.

Consulta el listado completo y oficial de propiedades CSS en MDN Web Docs: Listado de propiedades CSS en MDN.

¿Cómo aprender y practicar las propiedades CSS?

Conocer las propiedades básicas primero

No es necesario memorizar todas las propiedades CSS desde el principio. Comienza por las más comunes, que cubrirán la mayoría de tus necesidades iniciales. Estas incluyen:

Propiedades de texto: color, font-family, font-size, text-align.
Propiedades de layout: margin, padding, width, height.
Propiedades de diseño: background-color, border, box-shadow.

Explorar ejemplos y documentación

Cada propiedad tiene sus propias reglas, valores posibles y peculiaridades. Al enfrentarte a un problema de diseño, consulta la documentación oficial en MDN Web Docs.

Experimentar con pequeños proyectos

Prueba diferentes combinaciones de propiedades CSS en un proyecto pequeño o en un entorno interactivo en tu editor de código como CodeSwing. Escribe ejemplos prácticos y juega con los valores para ver cómo afectan al diseño.

Domina el flujo del estilo

Recuerda que las propiedades CSS siguen un flujo en cascada (Cascading Style Sheets). Esto significa que:

El orden importa: Las reglas aplicadas más tarde pueden sobrescribir las anteriores.
La especificidad importa: Algunas reglas tienen más peso dependiendo de cómo estén definidas (ejemplo: IDs tienen más prioridad que clases). Esto lo veremos más adelante, por ahora solo necesitas ser consciente de ello.

Aprende a depurar con DevTools

Los navegadores modernos como Chrome y Firefox tienen herramientas de desarrollo (DevTools) que te permiten inspeccionar elementos y experimentar con diferentes propiedades CSS en tiempo real. Aunque pronto lo veremos, busca información y aprende a acceder a ellos por tu cuenta.