MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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.

Fundamental CSS comprehension
This assessment tests your understanding of the above guides with some carefully crafted exercises.

See also

Intermediate Web Literacy 1: Intro to CSS
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn to style HTML elements on a webpage using CSS selectors, attributes, and values.

Etiquetas y colaboradores del documento

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