Cómo funciona CSS
Una página HTML simple llega con las opiniones propias del navegador ya aplicadas: enlaces azules subrayados, texto sin serifa de color negro, encabezados que disminuyen de tamaño. CSS es cómo tomas esa estructura cruda y decides cómo debería verse en su lugar. Antes de que puedas cambiar un solo color o mover una sola caja, sin embargo, necesitas saber cómo tus estilos llegan a la página en primer lugar, y qué sucede cuando dos de tus reglas no están de acuerdo sobre el mismo elemento.
Adjuntar CSS a una página
Hay tres formas de agregar CSS a una página, y la diferencia es principalmente sobre dónde escribes los estilos.
La primera es un estilo en línea, escrito directamente en el elemento con un atributo style:
<p style="color: teal;">Un párrafo verde azulado único.</p>Eso estiliza un párrafo y nada más. La segunda forma es un bloque interno <style> en el <head> de la página, que puede estilizar muchos elementos a la vez. La tercera, y la que deberías usar, es un archivo separado de CSS vinculado a la página. Escribes tus estilos una vez en ese archivo, y cada página que se vincula a él los recibe. Piénsalo como un guardarropa: en lugar de describir un atuendo en cada persona uno por uno, escribes el código de vestimenta una vez y todos lo siguen.
Aquí está el enfoque externo en su totalidad: un archivo HTML que vincula una hoja de estilos, y la hoja de estilos misma.
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="intro">Bienvenido al sitio.</p>
</body>/* styles.css */
.intro {
color: teal;
font-size: 1.25rem;
}
style, en un bloque <style>, o en un archivo separado que vinculas con <link>. Usa el archivo separado. Escribes tus estilos una vez y cada página que se vincula a él se ve igual. La anatomía de una regla
Un fragmento de CSS se escribe como una regla, y cada regla tiene la misma forma. Aquí hay una que estiliza una tarjeta:
.card {
color: navy;
padding: 16px;
}El .card al frente es el selector: elige qué elementos se aplica la regla, en este caso cualquier cosa con la clase card. Todo dentro de las llaves es el bloque de declaración. Cada línea dentro, como color: navy;, es una declaración: una propiedad (color) y el valor que quieres que tenga (navy), separados por dos puntos y terminados con un punto y coma. Lee la regla completa como una oración: "para cada tarjeta, haz el color azul marino y el relleno de 16 píxeles".
.card elige los elementos, y cada declaración como color: navy; es una propiedad y un valor con dos puntos entre ellos y un punto y coma al final. Una vez que puedas nombrar esas partes, cada regla que leas se verá igual. La cascada
A veces dos reglas intentan estilizar el mismo elemento, y CSS necesita una forma de decidir cuál gana. Esa decisión es la cascada, y es de donde viene la C en CSS.
.card {
color: navy;
}
.card {
color: teal;
}Ambas reglas apuntan a la tarjeta y ambas establecen el color. La tarjeta termina siendo verde azulado, porque cuando dos reglas tienen la misma fuerza, la escrita después gana. El orden importa, y fluye hacia abajo en el archivo como agua, que es de donde viene el nombre cascada. También hay un segundo criterio de desempate: un selector más específico vence a uno más general, así que una regla dirigida precisamente a tu tarjeta puede anular una regla más amplia incluso si la más amplia viene después. Conocerás esa especificidad en detalle en el capítulo de selectores.
Herencia
Establece un color en una caja y el texto dentro a menudo se vuelve ese color también, aunque nunca estilizaste directamente ese texto. Ese pasar hacia abajo se llama herencia.
.site-header {
color: white;
font-family: Georgia, serif;
}Cada fragmento de texto dentro del encabezado, un encabezado, un enlace, una línea de captura, recibe ese color blanco y esa fuente sin una regla propia, porque color y font-family son propiedades heredadas. No todo pasa hacia abajo, sin embargo. Las propiedades de espaciado como padding no se heredan: el relleno que pones en el encabezado permanece en el encabezado y no aparece en los elementos dentro de él. Como guía aproximada, los estilos relacionados con el texto fluyen hacia los hijos, y los estilos relacionados con cajas como espaciado y bordes permanecen en su lugar.
color o font-family en un encabezado y el texto dentro lo recibe gratis. El espaciado como padding no pasa hacia abajo, permanece donde lo pusiste. Regla aproximada: los estilos de texto viajan a los hijos, los estilos de caja permanecen en su lugar.