CSS para Principiantes

Este curso, ideal para principiantes, cubre conceptos esenciales de CSS, desde selectores básicos hasta utilidades modernas. Aprende a dar estilo a páginas web, comprender el modelo de caja (box model), implementar diseños (layouts) y trabajar con frameworks CSS modernos como Tailwind CSS.

Desarrollo web

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

CSS para Principiantes es una introducción práctica al estilo de HTML mediante nueve laboratorios guiados. Comenzarás creando y enlazando una hoja de estilos externa y después desarrollarás un vocabulario útil de selectores y propiedades para texto, color, fondos, espacios, dimensiones y elementos habituales de una página.

Cada laboratorio se centra en un cambio pequeño y visible que puedes revisar en la vista previa del navegador. El recorrido avanza desde los fundamentos de CSS hasta Flexbox, la navegación horizontal con listas, tablas más legibles y una introducción final a utilidades de Tailwind CSS cargadas mediante CDN.

Lo que aprenderás

Después de completar este curso, podrás:

  • Crear una hoja de estilos externa, enlazarla con HTML y seleccionar contenido mediante selectores de elemento, clase, ID, agrupación y descendencia
  • Estilizar texto con color, tamaño en píxeles, grosor, alineación, altura de línea y familia tipográfica
  • Aplicar colores hexadecimales y RGB, imágenes de fondo, controles de repetición y posicionamiento del fondo
  • Razonar sobre el ancho del contenido, padding, bordes, márgenes y box-sizing: border-box en el modelo de caja
  • Crear diseños Flexbox básicos con controles de dirección, distribución, alineación y ajuste de línea
  • Convertir una lista en navegación horizontal y mejorar tablas con bordes, espacios, encabezados y alineación
  • Cargar Tailwind CSS mediante CDN y combinar utilidades básicas de fondo, texto, padding y Flexbox

A quién va dirigido este curso

Este curso está dirigido a principiantes absolutos en CSS, estudiantes de HTML preparados para añadir presentación a páginas sencillas y desarrolladores que desean repasar de forma breve los mecanismos esenciales de estilo.

Requisitos previos: Se recomienda conocer elementos y atributos básicos de HTML. Los laboratorios proporcionan archivos HTML preparados, pero entender etiquetas como head, body, div, listas y tablas, además de clases e ID, te permitirá concentrarte en CSS.

Entorno de aprendizaje: Los nueve laboratorios se ejecutan en un WebIDE basado en Ubuntu 22.04, con archivos de proyecto preparados y una vista previa Web 8080. Editarás HTML y CSS directamente y actualizarás o abrirás la vista previa para observar cada cambio visual.

Preguntas frecuentes

¿Necesito saber HTML antes de realizar el curso?

No necesitas HTML avanzado, pero los conocimientos básicos son útiles porque CSS selecciona y da estilo a la estructura HTML. Los ejercicios se concentran en CSS y normalmente proporcionan el marcado de la página, en lugar de enseñar en profundidad a crear documentos HTML.

¿Construiré un sitio web completo o un portafolio?

No. El curso contiene nueve laboratorios guiados y específicos, no un proyecto final ni retos independientes. Realizarás cambios concretos en páginas preparadas para observar cómo se comportan los selectores y las propiedades individuales.

¿El curso enseña diseño web adaptable?

Solo a nivel introductorio. El laboratorio de Flexbox cubre dirección, alineación, distribución y ajuste de línea, conceptos útiles para diseños flexibles, pero no incluye media queries, CSS Grid, breakpoints ni un flujo completo de diseño mobile-first.

¿Cuánto Tailwind CSS se estudia?

Un laboratorio presenta Tailwind mediante CDN y utiliza un conjunto pequeño de utilidades de fondo, texto, padding y Flexbox. No se cubren la instalación con herramientas de build, la configuración, las variantes responsivas o de estado, el diseño de componentes ni la optimización para producción.

Profesor

labby
Labby
Labby is the LabEx teacher.