We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS sirve para dar estilo y diseño a las páginas web — cambiar de tipo de letra, color, tamaño y espaciado del contenido, mostrar multiples columnas, añadir animaciones y otras funcionalidades. Este módulo nos introducirá en el dominio de las reglas básicas de CSS, selectores, propiedades, reglas de escritura de CSS, aplicación de CSS a HTML, introducción de medidas, color y otras unidades en CSS, cascadas y herencias; y depuración de CSS.

Prerrequisitos

Antes de empezar deberías tener:

  1. Uso básico de ordenadores, y uso pasivo de la Web (navegar y ver contenido).
  2. Entorno básico de trabajo como el descrito en Instalación del SW básico, y saber crear y manipular archivos como lo detallado en Manejo de archivos.
  3. Conocimiento básico de HTML, contenido en el módulo Introducción a HTML.

Nota: Si utilizas un ordenador/tablet/otro dispositivo y no puedes crear ficheros, puedes probar la mayoría de los ejemplos en programas de codificación online como JSBin or Thimble.

Guías

Este módulo contiene los siguientes artículos, que nos guiarán por la teoría básica de CSS y nos permitirán probar algunas habilidades.

Cómo funciona CSS

En este módulo comenzaremos con la base teórica, viendo qué es CSS y cómo el navegador transforma HTML en un DOM, y cómo se aplica el CSS a las partes del DOM, algunos ejemplos muy básicos de sintaxis y el código necesario para incluir nuestro CSS en nuestra página web.

Sintaxis CSS
A continuación, profundizaremos todavía más en la sintaxis, viendo cómo las propiedades y sus valores forman bloques declarativos, y cómo los bloques declarativos y los selectores forman reglas CSS completas. Terminaremos señalando otras características de la sintaxis CSS como los comentarios y los espacios en blanco.
Selectores
Ya han sido mencionados en el anterior artículo, pero ahora los veremos en mucho más detalle, viendo los tipos de selectores existentes y su funcionamiento.
Unidades y valores CSS
Hay muchos valores de propiedades CSS, valores numéricos, colores o funciones que realizan una acción (como mostrar una imagen de fondo o rotar un elemento). Algunos dependen de las unidades en que se expresen los valores a representar — como la medida de una caja: ¿30 pixels, 30 cm. o 30 ems? En esta guía veremos valores usuales como longitud, color y funciones simples, y otros menos comunes como grados o valores numéricos sin unidades.
Cascada y herencia

CSS dispone de dos sistemas relacionados para resolver situaciones con conflictos entre selectores (distintos selectores seleccionando los mismos elementos; ¿Cuál será el que se aplique finalmente?) y elementos anidados en otros elementos (¿Qué estilos se heredarán por los hijos y cuáles no?). Este artículo tratará de exponer ambos sistemas con el suficiente detalle para que resulte útil sin llegar a ser pesado.

El modelo de cajas

El modelo de cajas es la base del diseño web — cada elemento se representa como una caja rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la cebolla y la ubicación de unas cajas con respecto a otras. Antes de comprender cómo crear diseños CSS, debemos entender el modelo de cajas — que es lo que veremos en este artículo.

Depuración CSS

En el último artículo de este módulo, veremos los principios básicos de la depuración en CSS, incluyendo la exploración del CSS aplicado a una página, y otras herramientas que nos ayudarán a encontrar errores de codificación CSS.

Evaluaciones

Las siguientes pruebas comprobarán tu comprensión de los fundamentos de CSS tratados en las guías anteriores.

Comprensión de los fundamentos de CSS
Esta evaluación pone a prueba tu comprensión de las guías anteriores con algunos ejercicios cuidadosamente diseñados.

Vea también

Alfabetización Web Intermedia 1: Introducción a CSS
Un excelente curso básico de Mozilla que explora y prueba muchas de las habilidades de las que se habla en el módulo Introducción a CSS. Aprenda a estilizar los elementos HTML en una página web usando selectores, atributos y valores de CSS.

Etiquetas y colaboradores del documento

Colaboradores en esta página: hamfree, javierpolit, richardzacur
Última actualización por: hamfree,