¿Qué es CSS?
HTML dice qué es, CSS dice cómo se ve
En la unidad de HTML aprendiste a describir la estructura de una página: esto es un título, esto es una lista, esto es un enlace. Pero HTML no dice nada sobre colores, tamaños de letra, ni cómo se acomodan las cosas en la pantalla.
Ese trabajo lo hace CSS (Cascading Style Sheets, "hojas de estilo en cascada"). El mismo HTML se puede ver de formas completamente distintas según qué CSS se le aplique — el contenido no cambia, solo la presentación.
Separar estas dos cosas tiene una ventaja concreta: podés cambiar por completo la apariencia de un sitio sin tocar una sola etiqueta HTML, o reusar el mismo CSS en muchas páginas distintas.
La sintaxis básica
Una regla de CSS tiene tres partes:
selector {
propiedad: valor;
}- Selector: a qué elemento(s) se le aplica la regla.
- Propiedad: qué aspecto vas a cambiar (color, tamaño, etc.).
- Valor: cómo lo cambiás.
Por ejemplo, esta regla le dice al navegador "todos los párrafos, poné el texto azul":
p {
color: blue;
}Probá vos
Escribí una regla que le ponga fondo amarillo a la caja de abajo (seleccioná por la clase .caja) y otra que le ponga el texto en rojo al botón (seleccioná por la etiqueta button).
¿Selector, propiedad o valor?
Responde estas preguntas para verificar tu comprensión.
Pregunta 1
h1 {
color: green;
}¿qué es h1?Pregunta 2
green?Tres formas de vincular CSS
Hay tres maneras de conectar CSS con un documento HTML:
1. Archivo externo (la que vas a usar casi siempre)
<head>
<link rel="stylesheet" href="estilos.css">
</head>2. Interno, con <style>
<head>
<style>
p { color: blue; }
</style>
</head>3. En línea, con el atributo style
<p style="color: blue;">Un párrafo azul</p>
Un archivo externo es la opción recomendada: separa completamente el contenido (HTML) del diseño (CSS), y el mismo archivo .css se puede reusar en todas las páginas de un sitio.
Elegir la forma correcta
Responde estas preguntas para verificar tu comprensión.