CSS
El lenguaje que dice cómo se ve la página: colores, tamaños, tipografías, espacios y colocación de cada cosa.
✦Apagada: responde bien la pregunta del final para encenderla
También lo verás como: CSS · estilos · hojas de estilo
Analogía
La ropa y la distribución de los muebles. El HTML es el esqueleto y los ladrillos; CSS decide de qué color se pinta, cuánto espacio hay entre cosas y qué va al lado de qué.
Ejemplo mínimo
h1 {
color: #1a1a1a;
font-size: 40px;
}
"Todos los títulos h1: casi negros y de 40 píxeles."
Lo que importa saber desde hoy
- Es donde vive el 90% de los "se ve mal en el móvil". Colocar cosas es más difícil que escribirlas.
- El mismo CSS tiene que funcionar en una pantalla de móvil y en un monitor de 27 pulgadas: eso se llama responsive (Fase 3).
- En proyectos modernos casi nunca se escribe CSS a pelo: se usa Tailwind, que son atajos para lo mismo (Fase 3).
Un paso más: cómo se lee una regla
Toda regla de CSS tiene la misma forma: a quién + qué cambiarle.
.plato {
color: white;
padding: 16px;
}
.platoes el selector: a qué elementos se aplica (aquí, a todos los marcados como "plato").colorypaddingson propiedades;whitey16pxsus valores. (paddinges el espacio interior;pxson píxeles.)
Cuando dos reglas se contradicen, gana la más específica o la que está más abajo. Ese sistema de prioridades es la "cascada" de la C de CSS, y es la causa de casi todos los "¿por qué no me hace caso?".
Compruébalo tú
DevTools → Elements → selecciona un botón de cualquier web. A la derecha están sus reglas CSS. Desmarca una casilla y mira cómo cambia. Cambia un color por red.