En este curso, se desglosan los aspectos básicos de CSS en partes claras y fáciles de entender. En los siguientes módulos, aprenderás cómo funcionan los aspectos centrales de los CSS y cómo usarlos de manera efectiva en tus proyectos. Usa el panel de menú que aparece junto al logotipo "Learn CSS" para navegar por los módulos.
Aprenderás los aspectos básicos de CSS, como el modelo de caja, la cascada y la especificidad, Flexbox, la cuadrícula y el índice z. También aprenderás sobre funciones, tipos de colores, gradientes, propiedades lógicas y herencia a fin de convertirte en un desarrollador de frontend completo, listo para adoptar cualquier interfaz de usuario.
Cada módulo está lleno de demostraciones interactivas y autodiagnósticos para que pongas a prueba tus conocimientos. Además de aprender por medio de lecturas y demostraciones, hay un episodio de podcast que acompaña cada tema como otra forma de aprender y seguir ampliando tus conocimientos.
Este curso se creó para desarrolladores de CSS principiantes y avanzados. Puedes revisar la serie de principio a fin para comprender los conceptos de CSS de principio a fin, o puedes usarla como referencia para temas de estilos específicos. Si no tienes experiencia en el desarrollo web en general, consulta Aprende a usar HTML para aprender a escribir lenguaje de marcado y vincular tus hojas de estilo.
Esto es lo que aprenderás:
Modelo de caja
Debido a que todo lo que muestra CSS es una caja, comprender cómo funciona el modelo de caja de CSS es una base fundamental de CSS.
Selectores
Para aplicar CSS a un elemento, debes seleccionarlo. CSS te ofrece varias formas de hacerlo, y puedes explorarlas en este módulo.
La cascada
En ocasiones, dos o más reglas de CSS que compiten pueden aplicarse a un elemento. Descubre cómo elige el navegador cuál usar y cómo controlar esta selección.
Especificidad
En este módulo se profundiza en la especificidad, una parte clave de la cascada.
Herencia
Algunas propiedades de CSS se heredan si no especificas un valor para ellas. Descubre cómo funciona y cómo aprovecharlo en este módulo.
Color
Existen varias formas diferentes de especificar el color en CSS. En este módulo, se examinan los valores de color más usados.
Unidades de tamaño
Descubre cómo ajustar el tamaño de los elementos con CSS y trabajar con el medio flexible de la Web.
Diseño
Una descripción general de los diversos métodos de diseño que puedes elegir al crear un componente o un diseño de página.
Flexbox
Flexbox es un mecanismo de diseño diseñado para distribuir grupos de elementos en una dimensión. Descubre cómo usarla en este módulo.
Cuadrícula
CSS Grid Layout proporciona un sistema de diseño bidimensional, que controla el diseño en filas y columnas. Descubre todo lo que ofrece la red eléctrica.
Propiedades lógicas
Las propiedades y los valores lógicos y relativos de flujo están vinculados al flujo de texto, no a la forma física de la pantalla. Descubre cómo aprovechar este nuevo enfoque para los CSS.
Espacios
Descubre cómo seleccionar el mejor método de espaciado de elementos para el método de diseño que estás usando y el componente que compilas.
Seudoelementos
Un seudoelemento es como agregar un elemento adicional o incluirlo en la segmentación sin tener que agregar más HTML. Tienen una variedad de roles, y puedes obtener más información sobre ellos en este módulo.
Seudoclases
Las seudoclases te permiten aplicar CSS según los cambios de estado. Esto significa que tu diseño puede reaccionar a las entradas del usuario, como una dirección de correo electrónico no válida.
Bordes
Un borde proporciona un marco para los cuadros. Descubre cómo cambiar el tamaño, el estilo y el color de los bordes con CSS.
Sombras
Existen varias formas de agregar sombras al texto y los elementos en CSS. Aprende a utilizar cada opción y las tareas para las que se diseñaron.
Enfoque
Comprende la importancia del enfoque en tus aplicaciones web. Aprenderás a administrar el enfoque y a asegurarte de que la ruta por tu página funcione tanto para las personas que usan un mouse como para las que usan el teclado para navegar.
Índice Z y contextos de apilamiento
Descubre cómo controlar el orden en que los elementos se superponen unos de otros con el índice z y el contexto de apilado.
Funciones
CSS tiene una variedad de funciones integradas. Obtén información sobre algunas de las funciones clave y cómo usarlas.
Gradientes
En este módulo, descubrirás cómo usar los diferentes tipos de gradientes disponibles en CSS. Los gradientes pueden crear una gran cantidad de efectos útiles sin la necesidad de que las apps de gráficos creen imágenes.
Animaciones
La animación es una excelente manera de destacar elementos interactivos y agregar interés y diversión a tus diseños. Descubre cómo agregar y controlar efectos de animación con CSS.
Filtros
Los filtros en CSS te permiten aplicar efectos que podrías pensar que solo son posibles en una aplicación gráfica. En este módulo, puedes descubrir lo que está disponible.
Modos de fusión
Crea efectos de composición combinando dos o más capas. En este módulo, aprenderás a aislar una imagen con un fondo blanco sobre los modos de fusión.
Listas
Una lista, estructuralmente, se compone de un elemento contenedor de lista lleno de elementos de lista. En este módulo, aprenderás a aplicar ajustes de diseño a todas las partes de una lista.
Transiciones
Aprende a definir transiciones entre los estados de un elemento. Usa transiciones para mejorar la experiencia del usuario mediante respuestas visuales que permitan interactuar con ellos.
Desbordamiento
El desbordamiento es la forma de manejar el contenido que no cabe en un tamaño superior establecido. En este módulo, pensarás de manera innovadora y aprenderás a darle estilo al contenido desbordado.
Fondos
Aprende a aplicar estilo a los fondos de las cajas con CSS.
Texto y tipografía
Aprende a darle estilo al texto en la Web.
Conclusión y próximos pasos
Más recursos para ayudarte a dar los próximos pasos.
¿Todo listo para aprender sobre CSS? Comencemos.