Introducción y Conceptos Básicos de CSS

¿Por qué usar CSS?

CSS (Cascading Style Sheets) es el lenguaje que usamos para dar estilo y presentación a los documentos HTML. A continuación sus principales ventajas:

Separación de contenido y presentación: HTML se encarga de la estructura y CSS de la apariencia.
Consistencia y eficiencia: Permite definir un estilo una vez y aplicarlo a múltiples páginas, ahorrando tiempo y esfuerzo.
Mayor control creativo: Ofrece un control mucho más preciso sobre el diseño, la tipografía y los colores que el HTML por sí solo.

Sintaxis y Comentarios

Una regla de CSS consta de tres partes: un selector, una propiedad y un valor. Los comentarios se escriben con /* ... */ y sirven para documentar el código.

/* Esto es un comentario: ayuda a explicar el código */
p {
  color: blue; /* Propiedad: color, Valor: blue */
  font-size: 16px; /* Propiedad: font-size, Valor: 16px */
}

Explicación:

Selector: p — selecciona todos los elementos <p> del documento.
Propiedades: nombres como color o font-size que definen qué aspecto cambiar.
Valores: asignaciones como blue o 16px que indican cómo aplicar la propiedad.
Comentarios: /* ... */ — no se ejecutan, solo sirven de guía para desarrolladores.

Las 3 Formas de Usar CSS

1. CSS Externo

Es el método más común y recomendado: los estilos se escriben en un archivo separado (.css) y se enlazan desde el HTML.

Ejemplo HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>Mi Página con CSS Externo</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>Este título es azul</h1>
  <p>Este párrafo también es azul.</p>
</body>
</html>

Ejemplo CSS (estilos.css):

body {
  font-family: Arial, sans-serif;
}

h1, p {
  color: blue;
}

2. CSS Interno

Se usa para aplicar estilos a una única página, colocando el CSS dentro de una etiqueta <style> en el <head>.

<!DOCTYPE html>
<html>
<head>
  <title>Mi Página con CSS Interno</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: green;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Este título es verde y centrado</h1>
</body>
</html>

3. CSS en Línea

Aplica estilos directamente a un elemento usando el atributo style. Debe usarse con moderación porque dificulta el mantenimiento.

<p style="color: red; font-size: 20px;">Este párrafo es rojo y tiene una fuente grande.</p>

Colores en CSS

Existen varias formas de definir colores. Las más importantes son:

Por nombre: colores predefinidos como red, blue, lightgray.
RGB: rgb(255, 0, 0) — intensidad de rojo, verde y azul (0–255).
Hexadecimal (HEX): #FF0000 — representación hexadecimal de RGB.
HSL: hsl(0, 100%, 50%) — matiz, saturación y luminosidad.

Ejemplo aplicado (CSS)

A continuación solo el fragmento CSS para usar en la demo (para enseñar):

/* Ejemplos de colores (nombre, RGB, HEX, HSL) */
.swatch.name { background: blue; }
.swatch.rgb  { background: rgb(255,165,0); } 
.swatch.hex  { background: #2ecc71; }
.swatch.hsl  { background: hsl(200, 80%, 50%); }