CSS

Hojas de estilo en cascada (CSS)

El logotipo oficial de la última versión, CSS 3
Ejemplo de código fuente CSS
Extensión de nombre de archivo	.css
Tipo de medio de Internet	texto/css
Identificador de tipo uniforme (UTI)	público.css
Desarrollado por	Consorcio de la World Wide Web (W3C)
Lanzamiento inicial	17 de diciembre de 1996 ; hace 27 años ( 17 de diciembre de 1996 )
Último lanzamiento	CSS 3 se está desarrollando como varios módulos independientes. Las instantáneas periódicas resumen su estado. 7 de diciembre de 2023 ; hace 10 meses ( 07-12-2023 )
Tipo de formato	Lenguaje de hojas de estilo
Contenedor para	Reglas de estilo para elementos HTML (etiquetas)
Contenido por	Documentos HTML
¿ Formato abierto ?	Sí
Sitio web	w3.org/TR/CSS/#css

Las hojas de estilo en cascada ( CSS ) son un lenguaje de hojas de estilo que se utiliza para especificar la presentación y el estilo de un documento escrito en un lenguaje de marcado como HTML o XML (incluidos los dialectos XML como SVG , MathML o XHTML ). ^[1] CSS es una tecnología fundamental de la World Wide Web , junto con HTML y JavaScript . ^[2]

CSS está diseñado para permitir la separación de contenido y presentación , incluyendo diseño , colores y fuentes . ^[3] Esta separación puede mejorar la accesibilidad del contenido , ya que el contenido se puede escribir sin preocuparse por su presentación; proporcionar más flexibilidad y control en la especificación de las características de presentación; permitir que varias páginas web compartan formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural; y permitir que el archivo .css se almacene en caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.

La separación de formato y contenido también permite presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en forma impresa, por voz (a través de un navegador basado en voz o un lector de pantalla ) y en dispositivos táctiles basados ​​en Braille . CSS también tiene reglas para el formato alternativo si se accede al contenido en un dispositivo móvil . ^[4]

El nombre "en cascada" proviene del esquema de prioridad especificado para determinar qué declaración se aplica si más de una declaración de una propiedad coincide con un elemento en particular. Este esquema de prioridad en cascada es predecible.

Las especificaciones CSS son mantenidas por el Consorcio World Wide Web (W3C). El tipo de medio de Internet ( tipo MIME ) text/cssestá registrado para su uso con CSS por RFC 2318 (marzo de 1998). El W3C opera un servicio gratuito de validación de CSS para documentos CSS. ^[5]

Además de HTML, otros lenguajes de marcado admiten el uso de CSS, incluidos XHTML , XML simple , SVG y XUL . CSS también se utiliza en el kit de herramientas de widgets GTK .

CSS tiene una sintaxis simple y utiliza una serie de palabras clave en inglés para especificar los nombres de varias propiedades de estilo.

Una hoja de estilo consta de una lista de reglas . Cada regla o conjunto de reglas consta de uno o más selectores y un bloque de declaración .

En CSS, los selectores declaran a qué parte del marcado se aplica un estilo haciendo coincidir las etiquetas y los atributos en el marcado mismo.

Los selectores pueden aplicar a lo siguiente:

• todos los elementos de un tipo específico, por ejemplo, los encabezados de segundo nivel h2
• elementos especificados por el atributo , en particular:
  • id : un identificador único dentro del documento, denotado en el idioma del selector por un prefijo hash , por ejemplo#id
  • clase : un identificador que puede anotar múltiples elementos en un documento, denotado por un prefijo de punto.classname , por ejemplo (la frase "clase CSS", aunque a veces se usa, es un nombre inapropiado, ya que las clases de elementos, especificadas con el atributo de clase HTML , son una característica de marcado que es distinta del subsistema CSS de los navegadores y los estándares W3C/WHATWG relacionados funcionan en estilos de documentos; consulte RDF y microformatos para conocer los orígenes del sistema de "clase" del modelo de contenido web)
• elementos dependiendo de cómo se coloquen en relación con otros en el árbol del documento .

Las clases y los identificadores distinguen entre mayúsculas y minúsculas, comienzan con letras y pueden incluir caracteres alfanuméricos, guiones y guiones bajos. Una clase puede aplicarse a cualquier cantidad de instancias de cualquier elemento. Un identificador solo puede aplicarse a un único elemento.

Las pseudoclases se utilizan en los selectores CSS para permitir el formato basado en información que no está contenida en el árbol del documento.

Un ejemplo de una pseudoclase muy utilizada es , que identifica el contenido solo cuando el usuario "señala" el elemento visible, normalmente manteniendo el cursor del ratón sobre él. Se adjunta a un selector como en o .:hovera:hover#elementid:hover

Una pseudoclase clasifica elementos de un documento, como o , mientras que un pseudoelemento realiza una selección que puede constar de elementos parciales, como o . ^[6] Nótese la distinción entre la notación de dos puntos dobles utilizada para pseudoelementos y la notación de dos puntos simples utilizada para pseudoclases.:link:visited::first-line::first-letter

Se pueden unir varios selectores simples mediante combinadores para especificar elementos por ubicación, tipo de elemento, id, clase o cualquier combinación de estos. ^[7] El orden de los selectores es importante. Por ejemplo, se aplica a todos los elementos de la clase myClass que están dentro de elementos div, mientras que se aplica a todos los elementos div que están dentro de elementos de la clase myClass. Esto no debe confundirse con identificadores concatenados como que se aplica a los elementos div de la clase myClass.div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

La siguiente tabla proporciona un resumen de la sintaxis del selector indicando su uso y la versión de CSS que lo introdujo. ^[8]

Un bloque de declaración consta de un par de llaves ( {}) que encierran una lista de declaraciones separadas por punto y coma . ^[9]

Cada declaración consta de una propiedad , dos puntos ( :) y un valor . Se pueden incluir espacios en blanco opcionales alrededor del bloque de declaración, declaraciones, dos puntos y punto y coma para facilitar la lectura. ^[10]

Las propiedades se especifican en el estándar CSS. Cada propiedad tiene un conjunto de valores posibles. Algunas propiedades pueden afectar a cualquier tipo de elemento y otras se aplican solo a grupos de elementos particulares. ^{[11] [12]}

Los valores pueden ser palabras clave, como "centro" o "heredarse", o valores numéricos, como 200px(200 píxeles), 50vw(50 por ciento del ancho de la ventana gráfica) o 80% (80 por ciento del ancho del elemento principal).

Los valores de color se pueden especificar con palabras clave (por ejemplo, " red"), valores hexadecimales (por ejemplo , , también abreviado como ), valores RGB en una escala de 0 a 255 (por ejemplo, ), valores RGBA que especifican tanto el color como la transparencia alfa (por ejemplo, ), o valores HSL o HSLA (por ejemplo , , ). ^[13]#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(0 100% 50%)hsl(0 100% 50% / 0.8)

Los valores numéricos distintos de cero que representan medidas lineales deben incluir una unidad de longitud, que es un código alfabético o una abreviatura, como en 200pxo 50vw; o un signo de porcentaje, como en 80%. Algunas unidades – cm( centímetro ); in( pulgada ); mm( milímetro ); pc( pica ); y pt( punto ) – son absolutas , lo que significa que la dimensión representada no depende de la estructura de la página; otras – em( em ); ex( ex ) y px( píxel ) ^{[ aclaración necesaria ]} – son relativas , lo que significa que factores como el tamaño de fuente de un elemento padre pueden afectar la medida representada. Estas ocho unidades fueron una característica de CSS 1 ^[14] y se mantuvieron en todas las revisiones posteriores. El Módulo de Valores y Unidades CSS Nivel 3 propuesto, si se adopta como Recomendación del W3C, proporcionará siete unidades de longitud adicionales: ch; Q; rem; ; vh; vmax; vminy vw. ^[15]

Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos en el código HTML. Todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños tenían que describirse explícitamente, a menudo repetidamente, dentro del HTML. CSS permite a los autores mover gran parte de esa información a otro archivo, la hoja de estilos, lo que da como resultado un HTML considerablemente más simple. Además, a medida que cada vez más dispositivos pueden acceder a páginas web adaptables, comienzan a aparecer diferentes tamaños de pantalla y diseños. Personalizar un sitio web para cada tamaño de dispositivo es costoso y cada vez más difícil. La naturaleza modular de CSS significa que los estilos se pueden reutilizar en diferentes partes de un sitio o incluso en varios sitios, lo que promueve la coherencia y la eficiencia.

Por ejemplo, los encabezados ( h1elementos), subtítulos ( h2), subsubtítulos ( h3), etc., se definen estructuralmente mediante HTML. En la versión impresa y en la pantalla, la elección de la fuente , el tamaño , el color y el énfasis de estos elementos es una cuestión de presentación .

Antes de CSS, los autores de documentos que querían asignar dichas características tipográficash2 a, por ejemplo, todos los encabezados, tenían que repetir el marcado de presentación HTML para cada aparición de ese tipo de encabezado. Esto hacía que los documentos fueran más complejos, más grandes y más propensos a errores y difíciles de mantener. CSS permite la separación de la presentación de la estructura. CSS puede definir el color, la fuente, la alineación del texto, el tamaño, los bordes, el espaciado, el diseño y muchas otras características tipográficas, y puede hacerlo de forma independiente para las vistas en pantalla e impresas. CSS también define estilos no visuales, como la velocidad de lectura y el énfasis para los lectores de texto auditivos. El W3C ha desaprobado ahora el uso de todo el marcado HTML de presentación. ^[16]

Por ejemplo, en HTML pre-CSS, un elemento de encabezado definido con texto rojo se escribiría como:

< h1 >< font  color = "red" > Capítulo 1. </ font ></ h1 >

Usando CSS, el mismo elemento se puede codificar usando propiedades de estilo en lugar de atributos de presentación HTML:

< h1  style = "color: red;" > Capítulo 1. </ h1 >

Las ventajas de esto pueden no ser evidentes de inmediato, pero el poder de CSS se hace más evidente cuando las propiedades de estilo se colocan en un elemento de estilo interno o, mejor aún, en un archivo CSS externo. Por ejemplo, supongamos que el documento contiene el elemento de estilo:

< estilo > h1 { color : rojo ; } </ estilo >     

Todos h1los elementos del documento se volverán automáticamente de color rojo sin necesidad de código explícito. Si más adelante el autor quisiera que h1los elementos fueran de color azul, podría hacerlo cambiando el elemento de estilo a:

< estilo > h1 { color : azul ; } </ estilo >     

en lugar de revisar laboriosamente el documento y cambiar el color de cada h1elemento individual.

Los estilos también se pueden colocar en un archivo CSS externo, como se describe a continuación, y cargar utilizando una sintaxis similar a la siguiente:

< link  href = "ruta/al/archivo.css"  rel = "hoja/de/estilo"  type = "texto/css" >

Esto desacopla aún más el estilo del documento HTML y hace posible cambiar el estilo de varios documentos simplemente editando un archivo CSS externo compartido.

CSS, o Cascading Style Sheets, ofrece una forma flexible de diseñar contenido web, con estilos que se originan a partir de los valores predeterminados del navegador, las preferencias del usuario o los diseñadores web. Estos estilos se pueden aplicar en línea, dentro de un documento HTML o mediante archivos .css externos para lograr una mayor coherencia. Esto no solo simplifica el desarrollo web al promover la reutilización y la facilidad de mantenimiento, sino que también mejora el rendimiento del sitio porque los estilos se pueden descargar en archivos .css dedicados que los navegadores pueden almacenar en caché. Además, incluso si los estilos no se pueden cargar o están deshabilitados, esta separación mantiene la accesibilidad y legibilidad del contenido, lo que garantiza que el sitio sea utilizable para todos los usuarios, incluidos aquellos con discapacidades. Su enfoque multifacético, que incluye consideraciones sobre la especificidad del selector, el orden de las reglas y los tipos de medios, garantiza que los sitios web sean visualmente coherentes y adaptables en diferentes dispositivos y necesidades de los usuarios, logrando un equilibrio entre la intención del diseño y la accesibilidad del usuario.

Se pueden importar varias hojas de estilo. Se pueden aplicar distintos estilos según el dispositivo de salida que se utilice; por ejemplo, la versión para pantalla puede ser muy distinta de la versión impresa, de modo que los autores pueden adaptar la presentación de forma adecuada para cada medio.

La hoja de estilo con la prioridad más alta controla la visualización del contenido. Las declaraciones que no se establecen en la fuente con la prioridad más alta se pasan a una fuente de menor prioridad, como el estilo del agente de usuario. El proceso se denomina en cascada .

Uno de los objetivos de CSS es permitir a los usuarios un mayor control sobre la presentación . Alguien a quien le resulte difícil leer los encabezados en cursiva roja puede aplicar una hoja de estilo diferente. Según el navegador y el sitio web, un usuario puede elegir entre varias hojas de estilo proporcionadas por los diseñadores, o puede eliminar todos los estilos agregados y ver el sitio usando el estilo predeterminado del navegador, o puede anular solo el estilo de encabezado en cursiva roja sin alterar otros atributos. Se han creado extensiones de navegador como Stylish y Stylus para facilitar la administración de dichas hojas de estilo de usuario. En el caso de proyectos grandes, se puede utilizar la cascada para determinar qué estilo tiene una mayor prioridad cuando los desarrolladores integran estilos de terceros que tienen prioridades conflictivas y para resolver aún más esos conflictos. Además, la cascada puede ayudar a crear diseños temáticos, que ayudan a los diseñadores a ajustar aspectos de un diseño sin comprometer el diseño general.

La especificidad se refiere a los pesos relativos de varias reglas. ^[17] Determina qué estilos se aplican a un elemento cuando más de una regla podría aplicarse. Según la especificación, un selector simple (por ejemplo, H1) tiene una especificidad de 1, los selectores de clase tienen una especificidad de 1,0 y los selectores de ID tienen una especificidad de 1,0,0. Debido a que los valores de especificidad no se transfieren como en el sistema decimal, se utilizan comas para separar los "dígitos" ^[18] (una regla CSS que tenga 11 elementos y 11 clases tendría una especificidad de 11,11, no 121).

Así pues, los selectores de la siguiente regla dan como resultado la especificidad indicada:

Considere este fragmento HTML:

<!DOCTYPE html> < html >  < head >  < meta  charset = "utf-8" >  < style > # xyz { color : blue ; } </ style > </ head > < body > < p id = "xyz" style = "color: green;" > Para demostrar especificidad </ p > </ body > </ html >            

En el ejemplo anterior, la declaración en el styleatributo anula la del <style>elemento porque tiene una mayor especificidad y, por lo tanto, el párrafo aparece en verde:

La herencia es una característica clave en CSS; depende de la relación ancestro-descendiente para operar. La herencia es el mecanismo por el cual las propiedades se aplican no solo a un elemento especificado sino también a sus descendientes. ^[17] La ​​herencia se basa en el árbol del documento, que es la jerarquía de elementos XHTML en una página basada en anidamiento. Los elementos descendientes pueden heredar valores de propiedad CSS de cualquier elemento ancestro que los encierre. En general, los elementos descendientes heredan propiedades relacionadas con el texto, pero sus propiedades relacionadas con el cuadro no se heredan. Las propiedades que se pueden heredar son color, fuente, espaciado entre letras, altura de línea, estilo de lista, alineación de texto, sangría de texto, transformación de texto, visibilidad, espacio en blanco y espaciado de palabras. Las propiedades que no se pueden heredar son fondo, borde, visualización, flotante y transparente, altura y ancho, margen, altura y ancho mínimos y máximos, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical e índice z.

La herencia se puede utilizar para evitar declarar ciertas propiedades una y otra vez en una hoja de estilo, lo que permite un CSS más corto.

La herencia en CSS no es lo mismo que la herencia en lenguajes de programación basados ​​en clases , donde es posible definir la clase B como "como la clase A, pero con modificaciones". ^[19] Con CSS, es posible aplicar estilo a un elemento con "clase A, pero con modificaciones". Sin embargo, no es posible definir una clase CSS B como esa, que luego podría usarse para aplicar estilo a múltiples elementos sin tener que repetir las modificaciones.

Dada la siguiente hoja de estilo:

p { color : rosa ; }   

Supongamos que hay un elemento p con un elemento de énfasis (<em>) en su interior:

< p > Esto es para < em > ilustrar </ em > la herencia </ p >

Si no se asigna ningún color al elemento em, la palabra resaltada "illustrate" hereda el color del elemento padre, p. La hoja de estilo p tiene el color rosa, por lo tanto, el elemento em también es rosa:

Se ignora el espacio entre las propiedades y los selectores. Este fragmento de código:

cuerpo { desbordamiento : oculto ; fondo : #000000 ; imagen de fondo : url ( imagenes/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : arriba a la izquierda ;} 

es funcionalmente equivalente a este:

cuerpo { desbordamiento : oculto ; color de fondo : #000000 ; imagen de fondo : url ( imagenes/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : superior izquierda ; }            

Una forma habitual de formatear CSS para facilitar su lectura es sangrar cada propiedad y darle su propia línea. Además de formatear CSS para facilitar su lectura, se pueden utilizar propiedades abreviadas para escribir el código más rápido, lo que también se procesa más rápidamente al renderizarse: ^[20]

cuerpo { desbordamiento : oculto ; fondo : #000 url ( images/bg.gif ) sin repetición arriba a la izquierda ; }         

A veces, varios valores de propiedad se sangran en su propia línea:

@ font-face { familia-fuente : 'Comic Sans' ; tamaño-fuente : 20px ; src : url ( 'primero.ejemplo.com' ), url ( 'segundo.ejemplo.com' ), url ( 'tercero.ejemplo.com' ), url ( 'cuarto.ejemplo.com' ); }          

CSS 2.1 define tres esquemas de posicionamiento:

Flujo normal

Los elementos en línea se disponen de la misma manera que las letras de las palabras del texto, uno tras otro en el espacio disponible hasta que no haya más lugar y luego se inicia una nueva línea debajo. Los elementos en bloque se apilan verticalmente, como los párrafos y como los elementos de una lista con viñetas. El flujo normal también incluye la ubicación relativa de los elementos en bloque o en línea y los cuadros de inserción.

Flotadores

Un elemento flotante se saca del flujo normal y se desplaza hacia la izquierda o la derecha tanto como sea posible en el espacio disponible. Luego, otro contenido fluye junto con el elemento flotante.

Posicionamiento absoluto

Un elemento con posición absoluta no tiene lugar en el flujo normal de otros elementos ni tiene efecto sobre él. Ocupa la posición asignada en su contenedor independientemente de los demás elementos. ^[21]

Hay cinco valores posibles de la positionpropiedad. Si un elemento se coloca de cualquier forma distinta a , se utilizan staticlas propiedades adicionales top, bottom, lefty para especificar desplazamientos y posiciones. El elemento que tiene una posición estática no se ve afectado por las propiedades , o .righttopbottomleftright

El valor predeterminado coloca el elemento en el flujo normal .

El elemento se coloca en el flujo normal y luego se desplaza o desplaza desde esa posición. Los elementos del flujo subsiguientes se disponen como si el elemento no se hubiera movido.

Especifica el posicionamiento absoluto . El elemento se posiciona en relación con su antecesor no estático más cercano.

El elemento se coloca absolutamente en una posición fija en la pantalla incluso mientras se desplaza el resto del documento ^[21]

La floatpropiedad puede tener uno de tres valores. Los elementos fijos o posicionados de forma absoluta no pueden flotar. Otros elementos normalmente fluyen alrededor de los elementos flotantes, a menos que su propiedad se lo impida .clear

izquierda

El elemento flota a la izquierda de la línea en la que debería haber aparecido; otros elementos pueden fluir alrededor de su lado derecho.

bien

El elemento flota a la derecha de la línea en la que debería haber aparecido; otros elementos pueden fluir alrededor de su lado izquierdo.

claro

Fuerza al elemento a aparecer debajo ('clear') de los elementos flotantes a la izquierda ( ), derecha ( ) o ambos lados ( ). ^{[21] [22]}clear:leftclear:rightclear:both

CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994. ^[23] En ese momento, Lie estaba trabajando con Tim Berners-Lee en el CERN . ^[24] Varios otros lenguajes de hojas de estilo para la web fueron propuestos al mismo tiempo, y las discusiones en listas de correo públicas y dentro del Consorcio World Wide Web dieron como resultado la primera Recomendación CSS del W3C (CSS1) ^[25] que se publicó en 1996. En particular, una propuesta de Bert Bos fue influyente; se convirtió en coautor de CSS1, y se lo considera cocreador de CSS. ^[26]

Las hojas de estilo han existido de una forma u otra desde los comienzos del Lenguaje de marcado generalizado estándar ( SGML ) en la década de 1980, y CSS se desarrolló para proporcionar hojas de estilo para la web. ^[27] Un requisito para un lenguaje de hojas de estilo web era que las hojas de estilo provenieran de diferentes fuentes en la web. Por lo tanto, los lenguajes de hojas de estilo existentes como DSSSL y FOSI no eran adecuados. CSS, por otro lado, permite que el estilo de un documento se vea influenciado por múltiples hojas de estilo a través de estilos "en cascada". ^[27]

A medida que el HTML fue creciendo, llegó a abarcar una mayor variedad de capacidades estilísticas para satisfacer las demandas de los desarrolladores web . Esta evolución dio al diseñador más control sobre la apariencia del sitio, a costa de un HTML más complejo. Las variaciones en las implementaciones de navegadores web , como ViolaWWW y WorldWideWeb , ^[28] dificultaron la apariencia consistente del sitio y los usuarios tenían menos control sobre cómo se mostraba el contenido web. El navegador/editor desarrollado por Tim Berners-Lee tenía hojas de estilo que estaban codificadas en el programa. Por lo tanto, las hojas de estilo no se podían vincular a documentos en la web. ^[24] Robert Cailliau , también del CERN, quería separar la estructura de la presentación para que diferentes hojas de estilo pudieran describir diferentes presentaciones para impresión, presentaciones basadas en pantalla y editores. ^[28]

Mejorar las capacidades de presentación web fue un tema de interés para muchos en la comunidad web y se propusieron nueve lenguajes de hojas de estilo diferentes en la lista de correo www-style. ^[27] De estas nueve propuestas, dos fueron especialmente influyentes en lo que se convirtió en CSS: Cascading HTML Style Sheets ^[23] y Stream-based Style Sheet Proposal (SSP). ^{[26] [29]} Dos navegadores sirvieron como bancos de pruebas para las propuestas iniciales; Lie trabajó con Yves Lafon para implementar CSS en el navegador Arena de Dave Raggett . ^{[30] [31] [32]} Bert Bos implementó su propia propuesta de SSP en el navegador Argo . ^[26] Posteriormente, Lie y Bos trabajaron juntos para desarrollar el estándar CSS (la 'H' se eliminó del nombre porque estas hojas de estilo también se podían aplicar a otros lenguajes de marcado además de HTML). ^[24]

La propuesta de Lie fue presentada en la conferencia "Mosaic and the Web" (posteriormente llamada WWW2) en Chicago, Illinois en 1994, y nuevamente con Bert Bos en 1995. ^[24] En esa época el W3C ya se estaba estableciendo y se interesó en el desarrollo de CSS. Organizó un taller con ese fin presidido por Steven Pemberton . Esto dio como resultado que el W3C añadiera trabajo sobre CSS a los entregables del comité de revisión editorial (ERB) de HTML. Lie y Bos fueron el personal técnico principal en este aspecto del proyecto, con miembros adicionales, incluido Thomas Reardon de Microsoft, que también participaron. En agosto de 1996, Netscape Communication Corporation presentó un lenguaje de hojas de estilo alternativo llamado JavaScript Style Sheets (JSSS). ^[24] La especificación nunca se terminó y está obsoleta. ^[33] A fines de 1996, CSS estaba listo para convertirse en oficial y la Recomendación CSS nivel 1 se publicó en diciembre.

El desarrollo de HTML, CSS y DOM se había llevado a cabo en un solo grupo, el Comité de Revisión Editorial de HTML (ERB). A principios de 1997, el ERB se dividió en tres grupos de trabajo: el Grupo de Trabajo HTML , presidido por Dan Connolly del W3C; el Grupo de Trabajo DOM, presidido por Lauren Wood de SoftQuad ; y el Grupo de Trabajo CSS , presidido por Chris Lilley del W3C.

El Grupo de Trabajo CSS comenzó a abordar cuestiones que no se habían abordado con el nivel CSS 1, lo que dio como resultado la creación del nivel CSS 2 el 4 de noviembre de 1997. Se publicó como Recomendación del W3C el 12 de mayo de 1998. El nivel CSS 3, que se inició en 1998, todavía está en desarrollo en 2014 ^[update].

En 2005, los grupos de trabajo de CSS decidieron aplicar los requisitos de los estándares de forma más estricta. Esto significó que los estándares ya publicados, como CSS 2.1, CSS 3 Selectors y CSS 3 Text, pasaron del nivel de recomendación candidata al de borrador de trabajo.

La especificación CSS 1 se completó en 1996. Ese mismo año se lanzó Internet Explorer 3 ^{[24] de Microsoft, que ofrecía un soporte limitado para CSS.} IE 4 y Netscape 4.x añadieron más soporte, pero era, por lo general, incompleto y tenía muchos errores que impedían que se adoptara CSS de forma útil. Pasaron más de tres años antes de que algún navegador web lograra una implementación casi completa de la especificación. Internet Explorer 5.0 para Macintosh , que se lanzó en marzo de 2000, fue el primer navegador en tener soporte completo (más del 99 por ciento) para CSS 1, ^[34] superando a Opera , que había sido el líder desde su introducción del soporte para CSS quince meses antes. Otros navegadores siguieron su ejemplo poco después, y muchos de ellos implementaron además partes de CSS 2.

Sin embargo, incluso cuando los navegadores web posteriores de la "versión 5" comenzaron a ofrecer una implementación bastante completa de CSS, todavía tenían errores en ciertas áreas. Estaban plagados de inconsistencias, errores y otras peculiaridades . Microsoft Internet Explorer 5. x para Windows , a diferencia del muy diferente IE para Macintosh , tenía una implementación defectuosa del modelo de caja CSS , en comparación con los estándares CSS. Tales inconsistencias y variaciones en la compatibilidad de funciones hicieron que fuera difícil para los diseñadores lograr una apariencia consistente en todos los navegadores y plataformas sin el uso de soluciones alternativas denominadas hacks y filtros CSS. Los errores del modelo de caja de Windows de IE eran tan graves que, cuando se lanzó Internet Explorer 6 , Microsoft introdujo un modo compatible con versiones anteriores de interpretación de CSS (" modo peculiaridades ") junto con un "modo estándar" alternativo y corregido. Otros navegadores que no eran de Microsoft también proporcionaban capacidades de cambio de modo. Por lo tanto, se hizo necesario que los autores de archivos HTML se aseguraran de que contuvieran un marcador especial distintivo de "CSS conforme a estándares" para mostrar que los autores querían que el CSS se interpretara correctamente, de conformidad con los estándares, en lugar de estar destinado al navegador IE5/Windows , que ya hace tiempo que está obsoleto . Sin este marcador, los navegadores web con la capacidad de cambiar de modo "quirks" dimensionarán los objetos en las páginas web como lo haría IE 5 en Windows, en lugar de seguir los estándares CSS.

Los problemas con la adopción irregular de CSS y las erratas en la especificación original llevaron al W3C a revisar los estándares CSS 2 para convertirlos en CSS 2.1, que se acercaba a una instantánea funcional del soporte CSS actual en los navegadores HTML. Se eliminaron algunas propiedades de CSS 2 que ningún navegador había implementado con éxito y, en unos pocos casos, se cambiaron comportamientos definidos para poner el estándar en línea con las implementaciones existentes predominantes. CSS 2.1 se convirtió en una Recomendación candidata el 25 de febrero de 2004, pero CSS 2.1 volvió al estado de Borrador de trabajo el 13 de junio de 2005 ^[35] y solo volvió al estado de Recomendación candidata el 19 de julio de 2007 ^[36].

Además de estos problemas, la .cssextensión fue utilizada por un producto de software utilizado para convertir archivos de PowerPoint en archivos de presentación de diapositivas compacta, ^[37] por lo que algunos servidores web sirvieron todos .css^[38] como tipo MIME application/x-pointplus^[39] en lugar de text/css.

En ocasiones, los proveedores de navegadores individuales introdujeron nuevos parámetros antes de la estandarización y la universalización. Para evitar interferir con las implementaciones futuras, los proveedores antepusieron nombres únicos a los parámetros, como -moz-en el caso de Mozilla Firefox , -webkit-que lleva el nombre del motor de navegación de Apple Safari , -o-en el caso de Opera Browser y -ms-en el de Microsoft Internet Explorer y las primeras versiones de Microsoft Edge que utilizan EdgeHTML.

Ocasionalmente, los parámetros con prefijos de proveedor como -moz-radial-gradienty -webkit-linear-gradienttienen una sintaxis ligeramente diferente en comparación con sus contrapartes sin prefijo de proveedor. ^[40]

Las propiedades prefijadas quedan obsoletas en el momento de la estandarización. Existen programas que agregan automáticamente prefijos para navegadores más antiguos y que señalan versiones estandarizadas de parámetros prefijados. Dado que los prefijos están limitados a un pequeño subconjunto de navegadores, eliminar el prefijo permite que otros navegadores vean la funcionalidad. Una excepción son ciertas -webkit-propiedades prefijadas obsoletas, que son tan comunes y persistentes en la web que otras familias de navegadores han decidido admitirlas para lograr compatibilidad. ^[41]

CSS tiene varios niveles y perfiles. Cada nivel de CSS se basa en el anterior, generalmente agregando nuevas características y generalmente se denotan ^[42] como CSS 1, CSS 2, CSS 3 y CSS 4. Los perfiles son típicamente un subconjunto de uno o más niveles de CSS creados para un dispositivo o interfaz de usuario en particular. Actualmente, existen perfiles para dispositivos móviles, impresoras y televisores. Los perfiles no deben confundirse con los tipos de medios, que se agregaron en CSS 2.

La primera especificación CSS que se convirtió en una recomendación oficial del W3C es CSS nivel 1, publicada el 17 de diciembre de 1996. Håkon Wium Lie y Bert Bos son reconocidos como los desarrolladores originales. ^{[43] [44]} Entre sus capacidades se encuentran el soporte para

• Propiedades de fuente como tipografía y énfasis
• Color del texto, fondos y otros elementos.
• Atributos de texto como el espacio entre palabras, letras y líneas de texto.
• Alineación de texto, imágenes, tablas y otros elementos
• Margen, borde, relleno y posicionamiento para la mayoría de los elementos.
• Identificación única y clasificación genérica de grupos de atributos

El W3C ya no mantiene la Recomendación CSS 1. ^[45]

La especificación CSS nivel 2 fue desarrollada por el W3C y publicada como recomendación en mayo de 1998. Un superconjunto de CSS 1, CSS 2 incluye una serie de nuevas capacidades como posicionamiento absoluto, relativo y fijo de elementos y z-index , el concepto de tipos de medios, soporte para hojas de estilo auditivas (que luego fueron reemplazadas por los módulos de voz CSS 3) ^[46] y texto bidireccional, y nuevas propiedades de fuente como sombras.

El W3C ya no mantiene la recomendación CSS 2. ^[47]

La revisión 1 del nivel 2 de CSS, a menudo denominada "CSS 2.1", corrige errores en CSS 2, elimina funciones con poco soporte o que no son totalmente interoperables y añade extensiones de navegador ya implementadas a la especificación. Para cumplir con el proceso del W3C para estandarizar especificaciones técnicas, CSS 2.1 estuvo entre el estado de borrador de trabajo y el estado de recomendación candidata durante muchos años. CSS 2.1 se convirtió por primera vez en recomendación candidata el 25 de febrero de 2004, pero volvió a ser borrador de trabajo el 13 de junio de 2005 para una revisión más profunda. Volvió a ser recomendación candidata el 19 de julio de 2007 y luego se actualizó dos veces en 2009. Sin embargo, debido a que se realizaron cambios y aclaraciones, volvió nuevamente al estado de borrador de trabajo de última convocatoria el 7 de diciembre de 2010.

CSS 2.1 pasó a ser Recomendación Propuesta el 12 de abril de 2011. ^[48] Después de ser revisado por el Comité Asesor del W3C, finalmente se publicó como Recomendación del W3C el 7 de junio de 2011. ^[49]

Se planeó que CSS 2.1 fuera la primera y última revisión del nivel 2, pero el trabajo de baja prioridad en CSS 2.2 comenzó en 2015.

A diferencia de CSS 2, que es una gran especificación única que define varias características, CSS 3 se divide en varios documentos separados llamados "módulos". Cada módulo agrega nuevas capacidades o amplía las características definidas en CSS 2, preservando la compatibilidad con versiones anteriores. El trabajo en CSS nivel 3 comenzó aproximadamente en la época de la publicación de la recomendación original de CSS 2. Los primeros borradores de CSS 3 se publicaron en junio de 1999. ^[50]

Debido a la modularización, los diferentes módulos tienen diferente estabilidad y estados. ^[51]

Algunos módulos tienen el estado de Candidate Recommendation ( CR ) y se consideran moderadamente estables. En la etapa CR , se recomienda que las implementaciones eliminen los prefijos de proveedores. ^[52]

No existe una única especificación CSS4 integrada, ^[54] porque la especificación se ha dividido en muchos módulos separados que se nivelan de forma independiente.

Los módulos que se basan en elementos del CSS Nivel 2 comenzaron en el Nivel 3. Algunos de ellos ya han alcanzado el Nivel 4 o ya se están acercando al Nivel 5. Otros módulos que definen una funcionalidad completamente nueva, como Flexbox , ^[55] han sido designados como Nivel 1 y algunos de ellos se están acercando al Nivel 2.

El grupo de trabajo CSS a veces publica "instantáneas", una colección de módulos completos y partes de otros borradores que se consideran lo suficientemente estables como para que los desarrolladores de navegadores los implementen. Hasta ahora, cinco de estos documentos de "mejores prácticas actuales" se han publicado como notas en 2007, ^[56] 2010, ^[57] 2015, ^[58] 2017, ^[59] y 2018. ^[60]

Dado que estas instantáneas de especificaciones están destinadas principalmente a los desarrolladores, ha habido una creciente demanda de un documento de referencia con versiones similares dirigido a los autores, que presentaría el estado de las implementaciones interoperables como se documenta actualmente en sitios como Can I Use... ^[61] y MDN Web Docs. ^[62] Se ha establecido un grupo comunitario W3C a principios de 2020 para discutir y definir dicho recurso. ^[63] El tipo real de control de versiones también es tema de debate, lo que significa que el documento, una vez producido, podría no llamarse "CSS4".

Cada navegador web utiliza un motor de diseño para representar páginas web, y el soporte para la funcionalidad CSS no es consistente entre ellos. Debido a que los navegadores no analizan CSS a la perfección, se han desarrollado múltiples técnicas de codificación para navegadores específicos con soluciones alternativas (comúnmente conocidas como hacks CSS o filtros CSS). La adopción de nuevas funcionalidades en CSS puede verse obstaculizada por la falta de soporte en los principales navegadores. Por ejemplo, Internet Explorer tardó en agregar soporte para muchas características CSS 3, lo que ralentizó la adopción de esas características y dañó la reputación del navegador entre los desarrolladores. Además, filteren algunas versiones se utilizó una sintaxis propietaria para la propiedad sin prefijo de proveedor. ^[64] Para garantizar una experiencia consistente para sus usuarios, los desarrolladores web a menudo prueban sus sitios en múltiples sistemas operativos, navegadores y versiones de navegador, lo que aumenta el tiempo de desarrollo y la complejidad. Se han creado herramientas como BrowserStack para reducir la complejidad de mantener estos entornos.

Además de estas herramientas de prueba, muchos sitios mantienen listas de compatibilidad de navegadores para propiedades CSS específicas, incluyendo CanIUse y MDN Web Docs . Además, CSS 3 define consultas de características, que proporcionan una @supportsdirectiva que permitirá a los desarrolladores apuntar a navegadores con soporte para cierta funcionalidad directamente dentro de su CSS. ^[65] El CSS que no es compatible con navegadores más antiguos también se puede parchear a veces usando polyfills de JavaScript , que son piezas de código JavaScript diseñadas para hacer que los navegadores se comporten de manera consistente. Estas soluciones alternativas, y la necesidad de admitir la funcionalidad de respaldo, pueden agregar complejidad a los proyectos de desarrollo y, en consecuencia, las empresas definen con frecuencia una lista de versiones de navegadores que admitirán y no admitirán.

A medida que los sitios web adoptan estándares de código más nuevos que son incompatibles con navegadores más antiguos, estos navegadores pueden quedar impedidos de acceder a muchos de los recursos de la web (a veces intencionalmente). ^[66] Muchos de los sitios más populares de Internet no solo se degradan visualmente en navegadores más antiguos debido a la mala compatibilidad con CSS, sino que no funcionan en absoluto, en gran parte debido a la evolución de JavaScript y otras tecnologías web.

Algunas limitaciones señaladas de las capacidades actuales de CSS incluyen:

Las reglas de alcance para propiedades como z-index buscan el elemento padre más cercano con un atributo position: absolute o position: relative. Esta extraña combinación tiene efectos no deseados. Por ejemplo, es imposible evitar declarar un nuevo alcance cuando uno se ve obligado a ajustar la posición de un elemento, lo que impide utilizar el alcance deseado de un elemento padre.

CSS implementa pseudoclases que permiten un grado de retroalimentación del usuario mediante la aplicación condicional de estilos alternativos. Una pseudoclase CSS, " ", es dinámica (equivalente a "onmouseover" de JavaScript) y tiene potencial para un mal uso (por ejemplo, implementar ventanas emergentes de proximidad del cursor), ^[67] pero CSS no tiene la capacidad para que un cliente la deshabilite (no hay una propiedad similar a "disable") o limite sus efectos (no hay valores similares a "nochange" para cada propiedad).:hover

No hay forma de nombrar una regla CSS, lo que permitiría (por ejemplo) que los scripts del lado del cliente hagan referencia a la regla incluso si su selector cambia.

Los estilos CSS a menudo deben duplicarse en varias reglas para lograr el efecto deseado, lo que genera un mantenimiento adicional y requiere pruebas más exhaustivas. Se propusieron algunas características CSS nuevas para resolver esto, pero luego se abandonaron. ^{[68] [69]} En cambio, los autores pueden obtener esta capacidad mediante el uso de lenguajes de hojas de estilo más sofisticados que se compilan en CSS, como Sass , Less o Stylus .

Además del pseudoelemento, no se pueden seleccionar rangos específicos de texto sin necesidad de utilizar elementos de marcador de posición.:first-letter

CSS facilita la publicación de contenido en múltiples formatos de presentación al ajustar los estilos en función de varios parámetros nominales. Estos parámetros incluyen preferencias explícitas del usuario (como temas o tamaño de fuente), compatibilidad con diferentes navegadores web, el tipo de dispositivo utilizado para ver el contenido (por ejemplo, computadora de escritorio, tableta o dispositivo móvil), resoluciones de pantalla, la ubicación geográfica del usuario y muchas otras variables. CSS también permite un diseño responsivo, lo que garantiza que el contenido se adapte dinámicamente a diferentes tamaños y orientaciones de pantalla, lo que mejora la accesibilidad y la experiencia del usuario en una amplia gama de entornos.

Cuando se utiliza CSS de forma eficaz, en términos de herencia y "cascada", se puede utilizar una hoja de estilo global para afectar y dar estilo a los elementos de todo el sitio. Si surge la situación de que se debe cambiar o ajustar el estilo de los elementos, estos cambios se pueden realizar editando las reglas en la hoja de estilo global. Antes de CSS, este tipo de mantenimiento era más difícil, costoso y requería más tiempo.

Una hoja de estilo, interna o externa, especifica el estilo una vez para un rango de elementos HTML seleccionados por classtipo o relación con otros. Esto es mucho más eficiente que repetir la información de estilo en línea para cada aparición del elemento. Una hoja de estilo externa generalmente se almacena en la memoria caché del navegador y, por lo tanto, se puede usar en varias páginas sin tener que volver a cargarla, lo que reduce aún más la transferencia de datos a través de una red.

Con un simple cambio de una línea, se puede utilizar una hoja de estilo diferente para la misma página. Esto tiene ventajas en términos de accesibilidad, además de brindar la posibilidad de adaptar una página o sitio a diferentes dispositivos de destino. Además, los dispositivos que no pueden comprender el estilo aún muestran el contenido.

Sin CSS, los diseñadores web normalmente deben diseñar sus páginas con técnicas como tablas HTML que dificultan la accesibilidad para usuarios con problemas de visión (ver Diseño web sin tablas#Accesibilidad ).

Los frameworks CSS son bibliotecas preparadas que tienen como objetivo permitir un estilo más sencillo y compatible con los estándares de las páginas web utilizando el lenguaje de hojas de estilo en cascada. Los frameworks CSS incluyen Blueprint , Bootstrap , Foundation y Materialize. Al igual que las bibliotecas de lenguajes de programación y scripting, los frameworks CSS suelen incorporarse como hojas .css externas a las que se hace referencia en el HTML . Proporcionan una serie de opciones listas para usar para diseñar y maquetar la página web. Aunque muchos de estos frameworks se han publicado, algunos autores los utilizan principalmente para la creación rápida de prototipos o para aprender de ellos, y prefieren "elaborar a mano" CSS que sea apropiado para cada sitio publicado sin la sobrecarga de diseño, mantenimiento y descarga que supone tener muchas características sin utilizar en el estilo del sitio. ^[70]<head>

A medida que aumenta el tamaño de los recursos CSS utilizados en un proyecto, un equipo de desarrollo a menudo necesita decidir sobre una metodología de diseño común para mantenerlos organizados. Los objetivos son la facilidad de desarrollo, la facilidad de colaboración durante el desarrollo y el rendimiento de las hojas de estilo implementadas en el navegador. Las metodologías populares incluyen OOCSS (CSS orientado a objetos), ACSS (CSS atómico), CSS (hoja de estilo en cascada orgánica), SMACSS (arquitectura escalable y modular para CSS) y BEM (bloque, elemento, modificador). ^[72]

• Destello de contenido sin estilo

• Sitio web oficial