29/8/22, 15:21 ¿Qué es el CSS?

- Aprende sobre desarrollo web | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

¿Qué es el CSS?
Las hojas de estilo en cascada (CSS, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En
este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.

Prerrequisitos: Conocimientos básicos de informática,

tener instalado el software básico, conocimientos básicos de cómo
trabajar con
archivos y nociones de HTML (véase
Introducción al HTML).
Objetivo: Aprender qué es CSS.
En el módulo Introducción al HTML, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador
web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces
aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la
práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la
página no especifica un estilo explícito.
Los estilos predeterminados utilizados por el navegador
Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo
se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.

¿Para qué sirve el CSS?

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se
diseñan, compaginan, etc.
Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros
como SVG o XML.
Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo
Firefox, Chrome o Edge (en-US), están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una
impresora.

Nota: Un navegador también recibe el nombre de agente de usuario, que consiste en un programa informático que representa a una
persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de
CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF
para imprimir.

El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se
puede utilizar para crear un diseño, como podría ser convertir una columna de texto en una composición (en-US) con un área de contenido
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS 1/4
29/8/22, 15:21 ¿Qué es el CSS? - Aprende sobre desarrollo web | MDN

principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación. Echa un vistazo a los
enlaces de este párrafo para ver ejemplos específicos.

Sintaxis del CSS

El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos
particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras
grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:
h1 {

color: red;

font-size: 5em;

La regla se abre con un selector (en-US). Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de
nivel uno ( <h1> (en-US)).
Luego tenemos un conjunto de llaves { } . Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor.
Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades (en-US) CSS admiten diferentes valores, dependiendo de
qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color , que puede tomar varios valores de color. También
tenemos la propiedad de font-size , que puede tomar varias unidades de tamaño como valor.
Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.
h1 {

color: red;

font-size: 5em;

p {

color: black;

Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el
proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede
usar como valor.

Nota: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la
referencia CSS del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn css-feature-name» en tu motor de
búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y
«mdn font-size».

Módulos CSS
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS 2/4
29/8/22, 15:21 ¿Qué es el CSS? - Aprende sobre desarrollo web | MDN

Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida
que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por
ejemplo, puedes echar un vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su propósito, qué otras propiedades
y características diferentes contiene. También encontrarás enlaces a la especificación CSS que define la tecnología (ver más abajo).
En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información
si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación.
Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades background-color
y border-color se definan en este módulo. Y llevas toda la razón.
Especificaciones CSS
Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones,
publicados por organizaciones de estándares (como W3C (en-US), WHATWG, ECMA (en-US) o Khronos (en-US)) que definen con precisión cómo
se supone que deben comportarse esas tecnologías.
El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS Working Group . Este grupo está compuesto por representantes
de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que
actúan como voces independientes y no están vinculados a ninguna organización.
El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está
interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha
identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un
elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web
antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy
en día!
Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen
para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para
comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin
embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver
más abajo) y las especificaciones.

Soporte del navegador

Report problems with this compatibility data on GitHub
diordnA rof xoferiF
diordnA emorhC

diordnA arepO
emorhC

xoferiF

arepO

irafaS
egdE

Chrome 1 Edge 12 Firefox 1 Opera 3.5 Safari 1 Chrome 18 Firefox 4 Opera 10.1
font-
family
Android for Android
Android
Chrome 56 Edge 79 Firefox 92 Opera 43 Safari 9 Chrome 56 Firefox 92 Opera 43
system-
Android for Android
ui
Android
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS 3/4
29/8/22, 15:21 ¿Qué es el CSS? - Aprende sobre desarrollo web | MDN
Tip: you can click/tap on a cell for more information.
Full support No support See implementation notes. Uses a non-standard name. Has more compatibility info.

Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa
que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en
pantalla. Veremos este proceso más en profundidad en el artículo Cómo funciona el CSS. Es inusual que todos los navegadores puedan
implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS
en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de
propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un
sitio web.
Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS font-family .

¿Qué viene ahora?

Ahora que comprendes mínimamente qué es el CSS, pasemos a Comenzar con CSS, donde puedes empezar a escribir algo de CSS tú mismo.

En este módulo
1. ¿Qué es el CSS?
2. Comenzar con CSS
3. Cómo se estructura el CSS
4. Cómo funciona el CSS
5. Pon en práctica tus conocimientos nuevos

Last modified: 17 ago 2022, by MDN contributors

https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS 4/4