Introducción a CSS

Juno

¡Bienvenido al manual de CSS! Soy Juno, y esta es mi parte favorita de la web para enseñar. HTML te da la estructura de una página, y con CSS es donde cobra vida: color, espaciado, tipografía, todo el aspecto visual de las cosas.

Vamos a empezar desde la primera línea de CSS y a avanzar poco a poco, una idea a la vez. Si ya sabes escribir un poco de HTML, estás listo para todo lo que viene aquí.

Nada es demasiado básico como para preguntarlo, así que avanza a tu propio ritmo y llegaremos juntos.

Juno

Bienvenido al manual de CSS. Soy Ace, y me gusta mantener las cosas prácticas. Ya sabes estructurar una página, así que aquí nos enfocamos en convertir esa estructura en un diseño que de verdad podrías publicar.

Cada capítulo tiene el concepto y luego qué hacer con él: léelo, pruébalo, constrúyelo. El layout es donde CSS deja de sentirse como decoración y empieza a sentirse como ingeniería, y esa es la parte divertida.

Juno

Bienvenido al manual de CSS. Soy Sol, y llevo tanto tiempo dándole estilo a páginas que ya cometí cada error posible al menos una vez. Estos son los documentos para quienes quieren entender cómo CSS resuelve realmente lo que escribes, no solo qué propiedad mueve qué píxel.

Espera una explicación a fondo de la cascada, los casos límite del layout, y los detalles de rendimiento y accesibilidad que la mayoría de los tutoriales se saltan. CSS parece indulgente, pero la diferencia entre estilos que se renderizan y estilos que se sostienen en cualquier pantalla es donde está el verdadero trabajo. Lee con atención y cuestiona todo, incluso a mí.

Este manual es para cualquiera que sepa escribir un poco de HTML y quiera que sus páginas se vean como las imagina. CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), es el lenguaje que describe cómo se ve una página: sus colores, fuentes, espaciado, y la disposición de todo en la pantalla. HTML dice qué hay en la página; CSS dice cómo debe verse. Una aclaración rápida sobre dos términos que verás a lo largo de todo el manual: una propiedad es una cosa que puedes estilizar, como color o font-size, y un selector es la forma en que le indicas a CSS a qué elementos quieres aplicarle estilo. Cada concepto aquí está desarrollado a fondo, con profundidad, ejemplos, y algo que puedas buscar cuando necesites una respuesta rápida.

No necesitas ningún conocimiento de diseño para empezar. Si puedes poner un encabezado y un párrafo en una página, ya tienes suficiente para arrancar, y todo lo demás se va presentando a medida que aparece. CSS es el segundo lenguaje que casi todo desarrollador web aprende, justo después de HTML, porque una página sin él no es más que texto sin estilo.

El manual avanza desde los fundamentos. Vas a aprender cómo asociar estilos a una página y apuntar a los elementos correctos, cómo el modelo de caja controla el espaciado y el tamaño, cómo trabajar con color y tipografía, y luego cómo maquetar una página con flexbox y grid y hacer que se adapte a cualquier pantalla. Cada idea es pequeña por sí sola, y juntas se van acumulando hasta formar interfaces que de verdad puedes publicar.

El enfoque aquí es explicar qué hace cada parte de CSS y por qué, no solo qué escribir. Cualquiera puede copiar una propiedad de un ejemplo y ver cómo algo cambia en pantalla. La distancia entre eso y construir layouts que se adapten, se mantengan legibles y sean fáciles de modificar está en entender cómo decide el navegador qué significan tus estilos cuando se superponen. Ese entendimiento es lo que perdura más allá de cualquier proyecto puntual.

JunoCSS premia que juegues con él Hay algo hermoso en CSS: ves el resultado en el instante en que cambias algo. Ajusta un color, mueve un poco el espaciado, y la página se actualiza frente a tus ojos. Esa retroalimentación tan rápida hace que sea una de las mejores partes de la web para aprender experimentando, así que ve probando cosas mientras lees.

JunoCSS premia que juegues con él CSS te da un ciclo de retroalimentación muy ajustado: cambias un valor, ves cómo se renderiza, ajustas. Aprovecha eso. La forma más rápida de desarrollar un sentido real del layout es abrir las herramientas del navegador, cambiar propiedades en vivo, y observar qué se mueve. Todo en este manual está pensado para probarse, no solo para leerse.

JunoCSS premia que juegues con él El ciclo de retroalimentación es la mejor herramienta de aprendizaje de CSS, así que usa las herramientas de desarrollador del navegador como un laboratorio: inspecciona el modelo de caja, activa y desactiva declaraciones, observa cómo la cascada elige un ganador en tiempo real. Una cosa es leer sobre especificidad; ver una regla perder frente a otra en el panel de estilos es lo que realmente hace que se te quede.

Conoce a tus guías

Este manual está guiado por tres personajes, y tú eliges cuál te acompaña. El contenido es el mismo para todos; tu guía define el tono en que se cuenta, y en las páginas que se adaptan, qué tan a fondo entra cada sección.

Cambia de guía en cualquier momento desde el selector en la parte superior de cualquier página, o abre Preferencias en la esquina inferior derecha para cambiar tu guía, idioma, o tamaño de letra.

Cuando estés listo, el manual arranca en serio. El siguiente capítulo, Qué es CSS, cubre qué es realmente CSS, cómo se combina con HTML, y el pequeño vocabulario de reglas, selectores, y propiedades sobre el que se construye el resto de todo el recorrido.

¿Prefieres aprender construyendo?El curso gratuito de HTML y CSS de Scrimba cubre lo mismo a través de cinco proyectos y más de 75 desafíos interactivos.→