La misma página, otra cara
Mira la carta de un bar escrita en papel blanco y negro. Se lee, pero no apetece.
Ahora imagina la misma carta con letras de color, un fondo suave y títulos grandes.
El texto no cambia. Cambia el aspecto. Eso se hace con CSS, y hoy escribes tus primeras reglas.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| CSS | El lenguaje que da aspecto a una página: colores, letras y tamaños. | |
| Regla | Una orden de estilo. Dice a qué elementos afecta y qué cambia. | h1 { color: red; } |
| Selector | La parte de la regla que elige los elementos. | h1 |
| Propiedad | Lo que quieres cambiar, como el color. | color |
| Valor | El nuevo valor de la propiedad. | red |
| Declaración | Una propiedad con su valor, acabada en punto y coma. | color: red; |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Una regla tiene tres partes
Primero escribes el selector: elige a quién afecta la regla.
Después abres una llave {. Dentro van las declaraciones.
Cada declaración es una propiedad, dos puntos, un valor y un punto y coma. Al final cierras la llave }.
Pruébalo: un título de color
<h1>Bar Casa Pepe</h1>
<p>Cocina casera desde 1990.</p>
<h2>Menú del día</h2>
<p>Primero: lentejas.</p>
<p>Segundo: tortilla de patatas.</p>
<p>Precio: 11 euros.</p>
Cinco propiedades para empezar
| Propiedad | Qué cambia | Ejemplo |
|---|---|---|
| color | El color de las letras | color: navy; |
| background-color | El color de fondo | background-color: lightyellow; |
| font-family | El tipo de letra | font-family: Arial, sans-serif; |
| font-size | El tamaño de las letras | font-size: 20px; |
| text-align | Dónde se coloca el texto | text-align: center; |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Pruébalo: la carta con estilo
<h1>Bar Casa Pepe</h1>
<p>Cocina casera desde 1990.</p>
<h2>Menú del día</h2>
<p>Primero: lentejas.</p>
<p>Segundo: tortilla de patatas.</p>
<p>Precio: 11 euros.</p>
Repaso rápido: la regla
Inténtalo
Repaso rápido: la regla
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Los dos fallos de siempre
Advertencia
Olvidar el punto y coma. Olvidar cerrar la llave.
Si un estilo no se ve, mira primero esos dos sitios.
Varios elementos con la misma regla
Puedes dar el mismo estilo a varios elementos. Sepáralos con una coma.
La regla h1, h2 { color: navy; } pinta de azul los títulos de los dos tipos.
El selector body elige toda la página. Lo que pongas ahí lo heredan los de dentro.