#10 Primeros pasos con CSS#10 Primeros pasos con CSS

De la estructura al estilo

Ya sabes construir páginas con HTML: títulos, párrafos, listas, imágenes, formularios… pero todas se ven igual de sosas, en negro sobre blanco y con la tipografía por defecto. Ha llegado el momento de CSS (Cascading Style Sheets, hojas de estilo en cascada), el lenguaje que decide cómo se ve cada cosa.

Recuerda la idea clave de la primera lección: HTML dice qué es cada cosa; CSS dice cómo se ve. Por eso son dos lenguajes distintos y, como verás, se escriben en archivos distintos.

Anatomía de una regla

CSS se escribe en reglas. Cada regla dice «a estos elementos, cámbiales esto»:

h1 {
  color: crimson;
  font-size: 48px;
}

Fíjate en la puntuación: dos puntos entre propiedad y valor, y punto y coma al final de cada declaración.

1
2

Tres formas de añadir CSS

1. En un archivo aparte (la buena)

Escribes el CSS en un archivo con extensión .css, por ejemplo estilos.css, y lo conectas al HTML con <link> dentro del <head>:

mi-web/
├── index.html
└── estilos.css

<head>
  <meta charset="UTF-8">
  <title>Mi web</title>
  <link rel="stylesheet" href="estilos.css">
</head>

• rel="stylesheet" dice que es una hoja de estilos.
• href es la ruta al archivo, igual que en los enlaces: relativa y desde la carpeta del HTML.

Es la forma recomendada: todas tus páginas comparten el mismo archivo, así que si cambias el color de los títulos, cambia en toda la web a la vez.

2. En la cabecera, con <style>

Puedes escribir CSS dentro de una etiqueta <style> en el <head>. Sirve para pruebas o páginas sueltas (de hecho, es lo que hacen por dentro las zonas de pruebas de este curso):

<head>
  <style>
    h1 { color: crimson; }
  </style>
</head>

3. En la propia etiqueta, con style

El atributo style aplica estilo a un solo elemento:

<p style="color: crimson;">Solo este párrafo.</p>

Las DevTools para CSS

Abre las herramientas de desarrollo (F12 o clic derecho → Inspeccionar) sobre cualquier elemento. En el panel Estilos verás todas las reglas que le afectan. Puedes:

• Hacer clic en un valor y cambiarlo con las flechas del teclado.
• Desmarcar la casilla de una declaración para desactivarla.
• Ver tachadas las declaraciones que no se están aplicando porque otra regla gana.

Esto último es oro: cuando algo «no funciona» en CSS, casi siempre es porque otra regla le está ganando. Las DevTools te lo enseñan tachado.

La cascada: cuando dos reglas chocan

La «C» de CSS significa cascada. Es el sistema que decide qué regla gana cuando varias quieren cambiar la misma propiedad del mismo elemento. La primera regla que debes conocer es muy simple: con la misma importancia, gana la última.

1

Sale verde, porque la segunda regla está después. En la siguiente lección verás que hay selectores «más importantes» que otros (eso se llama especificidad), pero esta idea ya te explica la mayoría de sorpresas.

La herencia

Algunas propiedades se heredan: si se las pones a un elemento, se las pasan a todos sus hijos. Son sobre todo las del texto: color, font-family, font-size, line-height…

1
2
3
4
5

Por eso es habitual empezar el CSS dando estilo al body: la tipografía y el color que le pongas se aplicarán a toda la página.

Comentarios en CSS

En CSS los comentarios se escriben entre /* y */. Sirven para organizar el archivo por zonas:

/* ===== Cabecera ===== */
header {
  background: black;
}

/* ===== Pie de página ===== */
footer {
  color: gray; /* también se pueden poner al final de una línea */
}

Errores típicos

• Olvidar el punto y coma: la declaración siguiente también deja de funcionar.
• Escribir = en lugar de : (color = red), o comillas donde no van (color: "red").
• Ruta del <link> mal escrita: el CSS no carga y la página sale sin estilo. Comprueba la ruta y el nombre del archivo.
• Escribir CSS dentro del HTML sin <style>: aparece como texto en la página.
• Llaves sin cerrar: todas las reglas de después dejan de funcionar. Una buena sangría ayuda a verlo.
• Faltas de ortografía en inglés: colour, font-size: 20 px (con espacio), backround. El navegador ignora lo que no entiende sin avisar. Las DevTools lo marcan con un triángulo amarillo.

Ejercicios

Ejercicio 1: encuentra los errores (fácil)

Este CSS tiene cuatro errores y por eso no funciona como debería. Encuéntralos y corrígelos.

1
2

h1 {
  color: purple;
  font-size: 40px;
}

p {
  color: gray;
  font-size: 20px;
}

Ejercicio 2: estilo a todo (fácil)

Escribe tres reglas: el body con la tipografía sans-serif y color #333; los h1 de color teal; y los enlaces (a) de color darkorange.

1
2

body {
  font-family: sans-serif;
  color: #333;
}

h1 {
  color: teal;
}

a {
  color: darkorange;
}

Ejercicio 3: tu proyecto con hoja de estilos (medio)

En la carpeta mi-primera-web de la lección 2, crea un archivo estilos.css con una regla que ponga el título en tu color favorito. Enlázalo desde index.html y comprueba en el navegador que funciona.

<!-- index.html -->
<head>
  <meta charset="UTF-8">
  <title>Mi primera web</title>
  <link rel="stylesheet" href="estilos.css">
</head>

/* estilos.css */
h1 {
  color: mediumvioletred;
}

Ficha resumen

• Regla CSS: selector { propiedad: valor; }. Dos puntos entre propiedad y valor; punto y coma al final.
• Lo recomendado: CSS en un archivo .css, enlazado en el <head> con <link rel="stylesheet" href="estilos.css">.
• Cascada: si dos reglas chocan con la misma importancia, gana la última.
• Herencia: las propiedades del texto pasan de padres a hijos. Empieza dando estilo al body.
• Comentarios: /* … */. Las DevTools muestran tachado lo que no se aplica.

Glosario