CSS
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (incluyendo varios lenguajes basados en XML como SVG, MathML o XHTML). CSS describe cómo debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.
CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permitía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.
Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes módulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo desarrollar y publicar recomendaciones separadas por módulos. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las últimas especificaciones estables de CSS.
- Introducción a CSS
-
Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de conceptos básicos de CSS para saber qué es CSS y cómo usarlo.
- Tutoriales CSS
-
Nuestra área de aprendizaje de CSS contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.
- Referencia CSS
-
Nuestra exhaustiva referencia de CSS para desarrolladores web experimentados describe cada propiedad y concepto de CSS.
Tutoriales
Nuestra área de aprendizaje CSS presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.
- Primeros pasos en CSS
-
CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.
- Bloques de construcción CSS.
-
Este módulo continúa a partir de donde dejó el módulo de primeros pasos de CSS. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más. Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (debugging) y mucho más.
El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como estilo de textos y diseño CSS.
- Estilo de texto
-
Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS. Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto. Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.
- Diseño de CSS
-
En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, así como algunas técnicas de herencia que quizás desees conocer.
- Uso de CSS para resolver problemas comunes
-
Proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web.
Referencia
-
Referencia CSS: Esta referencia exhaustiva para desarrolladores web experimentados describe cada propiedad y concepto de CSS.
-
Conceptos clave de CSS:
- La sintaxis y las formas del lenguaje
- Especificidad, herencia y la cascada
- Unidades y valores CSS
- Modelo de caja y colapso de margen
- El bloque contenedor
- Contextos de apilamiento y formato de bloques
- Valores iniciales, calculados, usados y actuales
- Propiedades abreviadas de CSS
- Diseño de caja flexible de CSS
- Diseño de cuadrícula CSS (CSS Grid)
- Media queries
- Animaciones
Cookbook
El libro de cocina de diseño CSS tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios. Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.
Herramientas para el desarrollo de CSS
- Puede usar el Servicio de Validación CSS de W3C para verificar si su CSS es válido. Esta es una herramienta de depuración de valor incalculable.
- Las herramientas para desarrolladores de Firefox te permiten ver y editar el CSS de una página en vivo a través de las herramientas Inspectory Editor de estilos.
- La extensión Web Developer para Firefox le permite rastrear y editar CSS en vivo en sitios vigilados.
- La comunidad web ha creado varias herramientas CSS para que las uses.
Meta errores
- Firefox: Error 1323667 en Firefox
Ver también
- Demos de CSS: obtén un impulso creativo explorando ejemplos de las últimas tecnologías de CSS en acción.
- Lenguajes web a los que se aplica CSS frecuentemente: HTML, SVG, MathML, XHTML y XML.
- Tecnologías de Mozilla que hacen un amplio uso de CSS: extensiones y temas de Firefox y Thunderbird.
- Lista de correo de Mozilla
- Preguntas de Stackoverflow sobre CSS