Principios de HTML, CSS y modelo de caja en diseño web

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Clase 3 de 18

Clase 3 / 18

Recursos

¿Qué son HTML y CSS?

Comencemos por el corazón de la web: HTML y CSS. El HTML es el lenguaje que usamos para estructurar y proporcionar contenido en una página web. Imagina que cada palabra, imagen o enlace que ves está definido por un código HTML. Pero, ¡eso no es todo! Aunque el HTML te dice qué hay en la página, el CSS es quien trabaja la magia visual. CSS define el estilo, el diseño y la apariencia del contenido. Hace que una página web no sólo sea informativa sino también atractiva y fácil de usar. Piensa en CSS como el diseñador de interiores de tu sitio web, dándole vida y color.

¿Qué es el modelo de caja en CSS?

El modelo de caja es un concepto sencillo pero potente que es clave para entender cómo funcionan los sitios web. Cada elemento HTML de una página —ya sea texto, imágenes o botones— es visto como una caja. Esta caja incluye el contenido, el relleno, el borde y el margen. Los elementos pueden estar apilados unos sobre otros o en línea, dependiendo de las reglas de CSS aplicadas. Sin CSS, el contenido simplemente se apilaría de arriba a abajo, como si se tratara de un documento de texto.

Contenido: Es el espacio donde estará tu texto o imágenes.
Relleno (padding): Es el espacio entre el contenido y el borde de la caja.
Borde (border): Rodea el relleno y el contenido.
Margen (margin): Es el espacio que separa una caja de otra.

¿Por qué necesitamos CSS que fluya?

Una de las maravillas del CSS es su capacidad para hacer que un diseño web se adapte automáticamente al tamaño de pantalla en el que se visualiza. Esto quiere decir que, aunque un sitio se vea excelente en una computadora portátil, será igual de funcional en un teléfono. No podemos simplemente fijar las posiciones de los elementos con un diseño estático, como lo haríamos en una aplicación de diseño gráfico. Necesitamos que el contenido fluya y se adapte al dispositivo del usuario, manteniendo la usabilidad y la estética consistentes sin importar el tamaño de la pantalla.

¿Cómo ver un sitio web sin CSS?

Para entender el papel vital que juega CSS, podemos usar herramientas para desactivar temporalmente los estilos y ver únicamente el HTML. De esta manera, el sitio web se verá como una simple lista vertical de contenido. Esto se logra con extensiones del navegador que nos permiten visualizar cómo se ve una página sin ninguna personalización visual. Así, claramente entenderemos cómo el CSS transforma una serie de elementos básicos en un sitio bien organizado y atractivo.

Herramientas recomendadas:

Extensiones de navegador: Utiliza aplicaciones como "Stylus" o "Web Developer" que te permitirán modificar o desactivar los estilos visuales.
Inspeccionar elemento: En la mayoría de navegadores, permite ver y modificar CSS en tiempo real para entender su impacto inmediato.

Te invitamos a continuar explorando y aprendiendo sobre estos fundamentos que sientan las bases del diseño web moderno. ¡Sigue adelante y transforma tus ideas en sitios web increíbles!