MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

CSS

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

Las Hojas de estilo en cascada (en inglés Cascading Stylesheets y siglas CSS) es la siguiente tecnología que deberías comenzar a aprender después de HTML. Mientras que HTML se utiliza para definir la estructura y semántica del contenido, CSS se usa para estilizarlo y posicionarlo visualmente. Por ejemplo, se puede usar CSS para cambiar la fuente, el color, el tamaño y el espaciado del contenido, pero también se puede aplicar para distribuirlo en columnas o para añadir animaciones y otros elementos decorativos.

Itinerario de aprendizaje

Antes de comenzar con CSS, debes tener aprendidos previamente los fundamentos de HTML. Para ello, te recomendamos acudir a nuestra introducción a HTML. Una vez que hayas avanzado, podemos pasar a aprender estos conceptos:

  • CSS, comenzando con el módulo "Introducción a CSS"
  • Módulos HTML más avanzados
  • JavaScript, y cómo usarlo para añadir funcionalidad dinamica a las pagina web.

Se recomienda aprender HTML y CSS de forma conjunta, ya que CSS aporta un valor añadido a HTML, pero no podrás saber CSS plenamente sin tener conocimientos de HTML.

Antes de comenzar con este tema, debes tener tener al menos un conocimiento básico sobre el uso de computadores y uso de la Web de forma pasiva (i.e. revisando y consumiendo contenido). También deberías tener configurado un entorno básico de desarrollo, el cual explicamos en Instalación de software básico, y por último, saber crear y gestionar ficheros, que explicamos en detalle en Manejando los archivos — Ambos forman parte del módulo Primeros pasos en la Web para principiantes.

Se recomienda trabajar el módulo Primeros pasos en la Web antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo que se cubre en el articulo de CSS básico se cubre también en nuestra introducción al modulo de CSS, aunque en mucho mas detalle.

Módulos

Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar desde el primero.

Introducción a CSS
Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores, propiedades, escritura de reglas CSS, aplicar CSS al HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos básicos del modelo de caja y depuración de CSS.
Estilo del texto
Aquí se estudian los fundamentos de aplicación de estilos a texto, entre los que se incluye la tipografía, negrita, cursiva, espaciado e interlineado y sombreado, entre otras funciones. También se incluye la aplicación de estilo a listas y enlaces.
Estilo de cajas
Lo siguiente es la aplicación de estilo a cajas, paso fundamental en el diseño de páginas web. En este módulo recapitulamos el modelo de cajas para después dar una mirada al control de la dispocisión de las cajas mediante el ajuste del de relleno, bordes y márgenes, modificando colores de fondo, imagenes y otras caracteristicas. También veremos otros ajustes mas decorativos como sombras y filtros en las cajas.
Disposición del CSS
Cuando lleguemos acá ya habremos dado una visatdo a los fundamentos de CSS, como darle estilo al texto, y como estilizar y manipular las cajas que contienen tu contenido. Ahora es momento de ver la forma de ubicar tus cajas en el lugar correcto en relación al la ventana de visualización (viewport) y viceversa. Hemos cubierto los requisitos necesarios para ahora sumergirnos completamente en la disposición de CSS, viendo diferentes ajustes de visualización, metodos de dispocisión tradicional involucrando flotante (float) y posicionamiento, así como nuevas herramientas un poco mas enredadas pero muy utiles como flexbox.
Diseño Adaptable (Responsive design RWD)
Con la gran diversidad de dispositivos que actualmente son capaces de surfear la Web, los diseños web adaptables (RWD) se han convertido en una habilidad imprescindible para el desarrollo web. Este modulo cubrirá los principios básicos y las herramientas de RWD, explica como aplicar diferente CSS a un documento dependiendo de las caracteristicas del dispositivo como ancho de la pantalla, orientación,  resolución, así como también explora las tecnologíás disponibles para mostrar video e imagenes dependiendo de estas caracteristicas.

Resolver problemas comunes con CSS

Usa CSS para resolver problemas comunes proporciona vinculos a secciones de contenido explicando como usar CSS para resolver problemas muy comunes cuando se está creando una página web.

Fundamentos

Empieza aqui si no estas familiarizado con CSS:

Que propiedades hay en CSS y cómo usarlas
Este articulo explica como usar los selectores y aplicar las propiedades CSS de los elementos HTML.
Estilo de texto basico de CSS
Styling text es una aplicación facil de CSS. Aprende en este articulo cómo.
El uso de CSS en una pagina web
Conociendo que CSS es una cosa, pero también hay que saber jugar con HTML. Este artículo te explica cómo.

Ver También

CSS en MDN
El principal punto de entrada para la documentacíon de CSS en MDN, en donde encontrarás documentacíon detallada de referencia para todas las funcionalidades del lenguaje CSS. ¿Quieres conocer todos los valores que una propiedad puede tomar? Este es un buen lugar para comenzar. 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: TomatoSenpai, andrpueb, Aglezabad, RaulHernandez
 Última actualización por: TomatoSenpai,