En este curso, se desglosan los conceptos básicos de CSS en partes claras y fáciles de comprender. En los próximos módulos, aprenderás cómo funcionan los aspectos principales de CSS y cómo usarlos de manera eficaz en tus proyectos. Usa el panel del menú junto al logotipo de "Learn CSS" para navegar por los módulos.
Aprenderás los conceptos 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 color, gradientes, propiedades lógicas y herencia para convertirte en un desarrollador de frontend integral, listo para abordar cualquier interfaz de usuario.
Cada módulo está lleno de demostraciones interactivas y autoevaluaciones para que pongas a prueba tus conocimientos. Además de aprender a través de la lectura y las demostraciones, cada tema incluye un episodio de podcast como otra forma de aprender y seguir ampliando tus conocimientos.
Este curso se creó para desarrolladores de CSS principiantes y avanzados. Puedes completar la serie de principio a fin para obtener una comprensión general de CSS de arriba abajo, o bien puedes usarla como referencia para temas de diseño específicos. Si eres principiante en el desarrollo web, consulta Aprende HTML para obtener información sobre cómo escribir lenguaje de marcado y vincular tus hojas de estilo.
Esto es lo que aprenderás:
Modelo de caja
Dado 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. Los CSS te ofrecen varias formas diferentes de hacerlo, y puedes explorarlas en este módulo.
Anidamiento
Anidar reglas de diseño CSS puede hacer que tus hojas de diseño sean más organizadas, fáciles de leer y más fáciles de mantener.
La cascada
A veces, se pueden aplicar dos o más reglas de CSS en competencia a un elemento. Descubre cómo el navegador elige cuál usar y cómo controlar esta selección.
Especificidad
En este módulo, analizaremos en detalle 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 usarlo a tu favor en este módulo.
Color
Hay varias formas diferentes de especificar el color en CSS. En este módulo, se analizan los valores de color más utilizados.
Unidades de tamaño
Descubre cómo dimensionar elementos con CSS y trabajar con el medio flexible de la Web.
Diseño
Descripción general de los diversos métodos de diseño que puedes elegir cuando creas un diseño de componente o página.
Flexbox
Flexbox es un mecanismo de diseño creado para organizar grupos de elementos en una dimensión. Aprende a usarla en este módulo.
Cuadrícula
El diseño de cuadrícula de CSS proporciona un sistema de diseño bidimensional que controla el diseño en filas y columnas. Descubre todo lo que ofrece la cuadrícula.
Propiedades lógicas
Las propiedades y los valores lógicos y relativos al flujo se vinculan al flujo del texto, no a la forma física de la pantalla. Aprende a aprovechar este enfoque más reciente del CSS.
Propiedades personalizadas
Las propiedades personalizadas, o variables CSS, te permiten organizar y reutilizar valores en tu CSS, de modo que tus estilos sean más flexibles y fáciles de comprender.
Espacios
Descubre cómo seleccionar el mejor método para espaciar los elementos según el método de diseño que uses y el componente que compiles.
Pseudoelementos
Un seudoelemento es como agregar o segmentar un elemento adicional 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.
Pseudoclases
Las seudoclases te permiten aplicar CSS según los cambios de estado. Esto significa que tu diseño puede reaccionar a la entrada del usuario, como una dirección de correo electrónico no válida.
Bordes
Un borde proporciona un marco para tus cajas. Descubre cómo cambiar el tamaño, el estilo y el color de los bordes con CSS.
Sombras
Hay varias formas de agregar sombras a texto y elementos en CSS. Obtén más información para usar 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 a través de tu página funcione tanto para las personas que usan un mouse como para las que usan el teclado para navegar.
Cursores y punteros
El cursor es una forma esencial para que los usuarios sepan con qué están interactuando. En este módulo, aprenderás a aplicar estilos a los cursores en circunstancias específicas.
Índice Z y contextos de apilamiento
Descubre cómo controlar el orden en el que los elementos se superponen unos sobre otros con z-index y el contexto de apilamiento.
Posicionamiento del ancla
El posicionamiento de anclaje de CSS proporciona una forma de posicionar de manera declarativa un elemento en relación con otro.
Ventana emergente y diálogo
Un elemento emergente es cualquier elemento con un atributo popover y es útil para una amplia variedad de patrones interactivos, incluidos los tooltips, las alertas, los mensajes emergentes y mucho más.
Funciones
CSS tiene una variedad de funciones integradas. Obtén información sobre algunas de las funciones clave y cómo usarlas.
Trazados, formas, recorte y enmascaramiento
Las rutas, las formas, el recorte y el enmascaramiento permiten a los desarrolladores renderizar formas complejas en CSS a través de una variedad de funciones que pueden crear experiencias memorables para los usuarios.
Gradientes
En este módulo, descubrirás cómo usar los distintos tipos de gradientes disponibles en CSS. Los gradientes pueden crear una gran cantidad de efectos útiles sin necesidad de usar apps de gráficos para crear imágenes.
Animaciones
La animación es una excelente manera de destacar los 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 tal vez creas que solo son posibles en una aplicación de gráficos. En este módulo, puedes descubrir lo que está disponible.
Modos de combinación
Crea efectos de composición mezclando dos o más capas, y aprende a aislar una imagen con un fondo blanco en este módulo sobre modos de fusión.
Listas
Estructuralmente, una lista se compone de un elemento contenedor de lista que incluye elementos de lista. En este módulo, aprenderás a aplicar estilo a todas las partes de una lista.
Contadores
CSS proporciona varias formas de controlar los contadores en una lista para diferentes casos de uso. En este módulo, aprenderás a controlar los contadores en una lista.
Transiciones
Aprende a definir transiciones entre los estados de un elemento. Usa transiciones para mejorar la experiencia del usuario proporcionando comentarios visuales sobre la interacción del usuario.
Transiciones de vista para SPA
Las transiciones de vista te permiten mostrar continuidad o contexto entre las páginas de tu SPA.
Desbordamiento
El desbordamiento es la forma en que se maneja el contenido que no cabe en un tamaño principal establecido. En este módulo, pensarás de forma creativa y aprenderás a aplicar estilos al contenido desbordado.
Fondos
Aprende a diseñar los fondos de las cajas con CSS.
Texto y tipografía
Aprende a aplicar estilo al texto en la Web.
Consultas de contenedores
A diferencia de las consultas de medios, las consultas de contenedores te permiten realizar ajustes más específicos en los elementos según el tamaño y el estado de sus elementos superiores o contenedores.
Conclusión y próximos pasos
Recursos adicionales para ayudarte a dar los siguientes pasos
Entonces, ¿todo listo para aprender CSS? Comencemos.