CSS y maquetación web

Un punto de partida para CSS

Para empezar, puedes consultar uno de los mapas mentales de CSS que presenta el concepto de hoja de estilo y su relación con la presentación de documentos HTML y XHTML. Otro mapa explica que las hojas de estilo describen cómo se muestra un documento y funcionan mediante reglas.

Después, pasa al mapa de CSS que muestra un ejemplo con un selector y una declaración. Ahí aparece la regla h1 {color: red;}, junto con ejemplos de propiedades aplicadas al cuerpo del documento. La secuencia va de la definición a la lectura de una regla concreta.

Selectores y fichas

La página también incluye un mapa sobre tipos de selectores en CSS. Distingue, entre otros, el selector universal, el de tipo o etiqueta, el de clase y el descendente. Puedes utilizarlo para ordenar los nombres antes de repasar con las fichas «Selectores CSS».

Otro conjunto de fichas sobre programación web plantea preguntas sobre las hojas de estilo, su funcionamiento y su sintaxis. Incluye términos como selector, declaración, propiedad y valor. Puedes alternar estas fichas con los mapas para volver a consultar los conceptos mientras estudias.

Tests, maquetación y otros recursos

Tras revisar los mapas y las fichas, prueba el test de CSS. También hay tests sobre Grid y Flexbox, además del mapa «Flexbox en CSS3» y una presentación de introducción a Flexbox. Usa el mapa o la presentación para repasar el tema del test que elijas.

Para ampliar el recorrido, el mapa «Bootstrap» presenta el framework y algunas de sus ventajas. Hay también un mapa sobre maquetación web que aborda los colores en el diseño. Estos materiales forman parte de la sección CSS y maquetación web de la unidad Desarrollo y diseño web, dentro de Informática y TIC (programación, competencias digitales, tecnología educativa). Escoge un mapa y combínalo con un test de la página.