Qué es CSS

docs.scrimba.com

Abre cualquier sitio web bien hecho, quítale CSS, y te quedará con una columna alta de texto negro sobre un fondo blanco: cada encabezado, cada párrafo, cada enlace, apilados en orden y completamente sin estilos. Esa columna simple es tu HTML. Todo lo que hace que la página se vea diseñada, los colores, el espaciado, las fuentes, las columnas y tarjetas y barras de navegación, es CSS. Este capítulo trata sobre qué es ese segundo lenguaje y cómo funciona junto al primero.

Una página antes y después de CSS

CSS significa Hojas de Estilo en Cascada. La parte importante es estilo: CSS es cómo describes la apariencia de una página. Tu HTML dice "esto es un encabezado, esto es un párrafo, esto es un botón". CSS entonces dice "haz el encabezado grande y azul oscuro, dale al botón algo de espaciado interior y una esquina redondeada".

Piensa en HTML como el contenido de una habitación, los muebles y dónde se sientan, y CSS como la pintura, la iluminación y la disposición. La misma habitación, pero una está vacía y la otra es un lugar donde querrías estar. Escribes CSS en reglas separadas que apuntan a partes de tu HTML y cambian cómo se ven.

CSS es la capa de presentación de una página web. HTML proporciona estructura y significado; CSS lee esa estructura y describe cómo debe renderizarse: color, tipografía, espaciado, tamaño y diseño. Los dos están diseñados para escribirse por separado, así que el mismo HTML puede ser rediseñado completamente intercambiando CSS, y una sola hoja de estilos puede diseñar mil páginas a la vez.

Esa separación es el punto. Cuando tu contenido vive en HTML y tu presentación vive en CSS, puedes rediseñar un sitio sin tocar su marcado, y puedes cambiar una hoja de estilos compartida en lugar de editar cada página. Mantener los dos separados es un hábito que vale la pena construir desde tu primera regla.

CSS es la capa de presentación, y el navegador la aplica como una etapa distinta de renderizado: analiza tu HTML en el DOM (el Modelo de Objetos del Documento, el árbol vivo de elementos que el navegador construye a partir de tu marcado), analiza tu CSS en un conjunto de reglas, luego hace coincidir reglas con elementos para calcular un estilo final para cada uno. Tu CSS nunca cambia el árbol DOM; lo decora.

Ese modelo por etapas es por qué la separación de responsabilidades se mantiene en la práctica, no solo en principio. Una página cuyo significado vive completamente en su HTML se degrada gracefully: si el CSS falla al cargar, el contenido sigue ahí y sigue ordenado, porque la estructura y la presentación nunca se entrelazaron. También es por qué el mismo marcado puede tener un tema claro y un tema oscuro, o un diseño de impresión y un diseño de pantalla, sin cambios en el HTML en absoluto. La presentación es una capa que adjuntas, no una propiedad integrada en el contenido.

h1 {
  color: navy;
  font-size: 2rem;
}

Esa es una sola regla CSS. Encuentra cada encabezado <h1> en la página y lo hace azul marino y más grande. El HTML se queda exactamente como era; solo cambia su apariencia.

JunoUna página antes y después de CSS HTML es el contenido, CSS es la apariencia. Escribes reglas que apuntan a partes de tu página y cambian cómo aparecen, como hacer un encabezado grande y azul. La página debajo no cambia, solo la manera en que se muestra. Esa división es la idea completa.

JunoUna página antes y después de CSS CSS es presentación, HTML es estructura, y se mantienen separados a propósito. Cambia el estilo del CSS y el mismo marcado se ve completamente diferente; comparte una hoja de estilos y diseña cada página. Construye el hábito de mantener contenido y apariencia separados desde tu primera regla.

JunoUna página antes y después de CSS El navegador analiza HTML en el DOM, analiza CSS en reglas, luego calcula un estilo para cada elemento: tu CSS decora el árbol, nunca lo reescribe. Ese modelo por etapas es por qué una página con su significado en el HTML aún funciona cuando el CSS falla al cargar. La presentación es una capa que adjuntas, no algo integrado en el contenido.

Cómo CSS apunta a tu HTML

CSS solo se vuelve útil cuando puede encontrar las partes correctas de tu página. Lo hace con un selector: la parte al inicio de una regla que nombra qué diseñar. En la regla anterior, h1 es el selector, y significa "cada encabezado h1".

Por lo general, dirigirás elementos dándoles una class en tu HTML e indicando esa clase desde CSS. Una clase es una etiqueta que elijas:

<button class="buy-button">Comprar ahora</button>

.buy-button {
  background-color: teal;
  color: white;
}

El selector .buy-button encuentra el elemento con esa clase y lo diseña. Conocerás muchos tipos de selectores más adelante; las clases son las que usarás con más frecuencia.

Una regla CSS tiene dos partes: un selector que dice qué elementos hacer coincidir, y un bloque de declaraciones que dice cómo diseñarlos. Los selectores son cómo CSS llega al DOM y elige elementos para aplicar estilos. Puedes seleccionar por tipo de elemento (h1), por clase (.buy-button), por id, por relación, y más.

<button class="buy-button">Comprar ahora</button>

.buy-button {
  background-color: teal;
  color: white;
}

En la práctica, diseñas con clases mucho más que con tipos de elemento o ids, porque una clase es reutilizable y no trae equipaje de especificidad incorporada. El capítulo selectores cubre el rango completo y cuándo cada uno es la herramienta adecuada.

Los selectores son el lenguaje de consulta de CSS: cada uno es un patrón que el navegador prueba contra cada elemento para decidir qué reglas se aplican. Esa coincidencia no es gratis, e interactúa con la especificidad (el peso que el navegador asigna a un selector para resolver empates cuando varias reglas establecen la misma propiedad en el mismo elemento). Una clase pesa más que un tipo de elemento; un id pesa más que una clase; los estilos en línea pesan aún más.

.buy-button {
  background-color: teal;
  color: white;
}

La consecuencia práctica es que cómo seleccionas es una decisión de diseño, no solo una de dirección. Seleccionar todo con ids y selectores profundamente anidados genera especificidad que las reglas posteriores luchan por anular, que es cómo las hojas de estilo se calcifican. Los selectores basados en clases planas mantienen la especificidad baja y predecible, que es por qué casi todos los enfoques CSS escalables se construyen en clases. El capítulo selectores analiza la especificidad correctamente.

JunoCómo CSS apunta a tu HTML Un selector es la parte de una regla que dice qué diseñar. El más amigable para empezar es una clase: pones class="nombre" en un elemento en tu HTML, luego diseñas .nombre en tu CSS. No te preocupes por los otros tipos todavía, las clases te llevarán muy lejos.

JunoCómo CSS apunta a tu HTML Cada regla comienza con un selector que coincide con elementos en el DOM, y puedes coincidir por tipo, clase, id, o relación. Recurre a las clases por defecto: son reutilizables y mantienen la especificidad manejable. El capítulo de selectores tiene todo el kit de herramientas.

JunoCómo CSS apunta a tu HTML Los selectores son un lenguaje de consulta, y cada uno lleva un peso de especificidad que decide quién gana cuando las reglas colisionan: id sobre clase, clase sobre tipo, en línea sobre todo. Cómo seleccionas es una decisión de mantenibilidad, así que mantenlo plano y basado en clases para evitar que la especificidad calcifique tu hoja de estilos. La especificidad recibe el tratamiento completo en el capítulo de selectores.

Qué significa "en cascada"

La primera palabra en Hojas de Estilo en Cascada es la que la gente salta, pero explica mucho. Más de una regla puede aplicarse al mismo elemento, y pueden estar en desacuerdo. Quizás una regla dice que los párrafos son grises y otra dice que este párrafo en particular es negro. La cascada es el conjunto de reglas que el navegador usa para decidir cuál gana.

La mayoría de las veces se reduce a una cosa: si dos reglas tienen la misma especificidad, la escrita después gana. No necesitas el panorama completo todavía. Ten en cuenta que cuando un estilo no aparece de la forma que esperas, generalmente es porque otra regla la venció, no porque CSS esté roto.

La cascada es el algoritmo que resuelve conflictos cuando múltiples reglas apuntan al mismo elemento y establecen la misma propiedad. Pondera algunas cosas en orden: de dónde viene la regla, cuán específico es su selector, y, como un desempate final, el orden de fuente (el posterior gana). Cuando dos reglas tienen igual especificidad, la última declarada gana.

Este es el mecanismo detrás de la mayoría de los momentos "por qué mi CSS no funciona". El estilo se aplica; está siendo anulado por una regla que clasifica más alto. Leer la cascada correctamente, en lugar de apilar más reglas para forzar un cambio, es uno de los hábitos que separa el CSS de pelea del CSS dirección. El capítulo cómo funciona CSS cubre el orden de resolución completo.

La cascada es el algoritmo de resolución de conflictos de CSS, y conocer su orden convierte la mayoría de los errores de estilo de misterios en búsquedas. Resuelve declaraciones competidoras por, en orden: origen e importancia (estilos del autor versus defaults del navegador versus !important), luego especificidad (el peso del selector), luego orden de fuente (la regla posterior gana el empate final).

La razón por la que esto importa a escala de producción es que cada anulación que escribes es un movimiento en esa clasificación. Recurrir a !important o un id para ganar un conflicto sube la barra para cada regla futura que necesite tocar el mismo elemento, y esas escaladas se componen en una hoja de estilos que nadie puede cambiar con seguridad. La solución duradera es casi siempre bajar la especificidad en otro lugar, no subirla aquí. CSS moderno agrega herramientas que te dan control de cascada sin la carrera de especificidad, como las capas de cascada, que el capítulo organizando y escalando CSS cubre. Para el orden de resolución completo, ver cómo funciona CSS.

JunoQué significa en cascada En cascada significa que más de una regla puede golpear el mismo elemento, y la cascada decide cuál gana. La versión cotidiana: cuando dos reglas tienen igual especificidad, la posterior gana. Así que si un estilo no aparece, probablemente otra regla lo venció. Me tomó un tiempo dejar de encontrar eso misterioso.

JunoQué significa en cascada La cascada resuelve conflictos por origen, luego especificidad, luego orden de fuente, con la regla posterior ganando un empate igual. La mayoría de los momentos "mi CSS no funciona" son una anulación, no un error. Aprende a leer por qué una regla perdió en lugar de apilar más reglas para forzarla, y CSS deja de sentirse como una pelea.

JunoQué significa en cascada Los conflictos se resuelven por origen e importancia, luego especificidad, luego orden de fuente. Cada anulación que escribes es un movimiento en esa clasificación, así que ganar con !important o un id sube la barra para cada regla después. La solución duradera es bajar la especificidad en otro lugar, no subirla aquí. Las capas de cascada te dan control sin la carrera.

De dónde va CSS desde aquí

CSS es un lenguaje pequeño en su núcleo, un selector y algunos pares propiedad-valor, pero llega muy lejos. Una vez que puedas dirigir elementos y establecer propiedades, el resto de este manual trata sobre las propiedades que vale la pena conocer y los sistemas construidos sobre ellas: el modelo de caja que controla el espaciado y el tamaño, luego el color y la tipografía, y luego las herramientas de diseño, flexbox y grid, que arreglan una página completa.

El siguiente capítulo, cómo funciona CSS, se vuelve concreto sobre la mecánica que este introdujo: las tres formas de adjuntar CSS a una página, la anatomía exacta de una regla, y cómo la cascada y la herencia deciden cómo se ve finalmente cada elemento.