Introducción
¡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 CSS es donde cobra vida: color, espaciado, tipografía, toda la apariencia.
Empezaremos desde la primera línea de CSS y construiremos lentamente, una idea a la vez. Si puedes escribir un poco de HTML, estás listo para todo lo que hay aquí.
Nunca hay nada demasiado básico para preguntar, así que ve a tu propio ritmo y lo lograremos juntos!
Este manual es para cualquiera que pueda escribir un poco de HTML y quiera que sus páginas se vean como las imagina. CSS, que significa Cascading Style Sheets, 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 aparecer. Una palabra rápida sobre dos términos que verás en todo el contenido: una propiedad es una cosa que puedes diseñar, como color o font-size, y un selector es cómo apuntas CSS a los elementos que quieres diseñar. Cada concepto aquí está escrito completamente, con profundidad, ejemplos, y algo para buscar siempre que necesites una respuesta rápida.
No necesitas tener experiencia en diseño para empezar. Si puedes poner un encabezado y un párrafo en una página, tienes lo suficiente para comenzar, y todo lo demás se introduce según sea necesario. CSS es el segundo lenguaje que aprende casi todo desarrollador web, justo después de HTML, porque una página sin él no es más que texto sin estilo.
El manual avanza de abajo hacia arriba. Aprenderás cómo adjuntar estilos a una página y dirigirte 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 diseñar una página con flexbox y grid y hacerla responder a cualquier pantalla. Cada idea es pequeña por sí sola, y se apilan en interfaces que realmente puedes entregar.
El enfoque aquí es explicar qué hace cada pieza de CSS y por qué, no solo qué escribir. Cualquiera puede pegar una propiedad de un ejemplo y ver algo cambiar en la pantalla. La distancia entre eso y construir layouts que se adapten, sigan siendo legibles y sean baratos de cambiar es entender cómo el navegador decide qué significan tus estilos cuando se superponen. Ese entendimiento es lo que perdura más allá de cualquier proyecto individual.
Conoce a tus guías
Este manual está alojado por tres guías, y tú eliges cuál te muestra el camino. El material es el mismo para todos; tu guía establece la voz con la que se cuenta, y en las páginas que se adaptan, qué tan profundas van cada sección.
- Juno enseña el track principiante: cálido y paciente, analogías simples, nada asumido.
- Ace enseña el track intermedio: práctico y centrado en la construcción, directo a lo que realmente haces.
- Sol enseña el Deep Dive: el mecanismo, los compromisos, y los detalles de producción que todos los demás omiten.
Cambia de guía en cualquier momento desde el selector en la parte superior de cualquier página, o abre Preferencias en la parte inferior derecha para cambiar tu guía, idioma, o tamaño de fuente.
Cuando estés listo, el manual comienza en serio. El siguiente capítulo, What is CSS, cubre qué es realmente CSS, cómo se empareja con HTML, y el pequeño vocabulario de reglas, selectores, y propiedades en el que se construye todo el resto del track.
¿Prefieres aprender construyendo?El curso gratuito de HTML y CSS de Scrimba cubre el mismo terreno a través de cinco proyectos y 75+ desafíos interactivos.