Hoja de estilos en cascada

(Redirigido desde «Css»)

Ir a la navegaciónIr a la búsqueda
Rename icon.svg
Se ha sugerido que esta página sea renombrada como CSS . Motivo: los argumentos
están expuestos en la discusión.

«CSS» redirige aquí. Para otras acepciones, véase CSS (desambiguación).

Hoja de estilos en cascada
CSS-shade.svg
Archivo:CSS3 logo and wordmark.svg y valor desconocido
Desarrollador
CSS Working Group
https://www.w3.org/Style/CSS/ y https://drafts.csswg.org/
Información general
Extensión de archivo css
Tipo de MIME text/css
Lanzamiento inicial 17 de diciembre de 1996
Última versión CSS31
Tipo de formato Lenguaje de hoja de estilos
Estándar(es) Level 1 (Recommendation)
Level 2 (Recommendation)
Level 2 Revisión 1 (Recommendation)
Level 2 Revisión 2 (CSS 2.2)
Formato abierto Sí
[editar datos en Wikidata]
CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en
cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de
un documento estructurado escrito en un lenguaje de marcado.2 Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas
en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML,
incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con HTML y JavaScript, CSS es una
tecnología usada por muchos sitios web para crear páginas visualmente atractivas,
interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles
(como Firefox OS).3

CSS está diseñado principalmente para marcar la separación del contenido del
documento y la forma de presentación de este, características tales como las capas
o layouts, los colores y las fuentes.4 Esta separación busca mejorar la
accesibilidad del documento, proveer más flexibilidad y control en la
especificación de características presentacionales, permitir que varios documentos
HTML compartan un mismo estilo usando una sola hoja de estilos separada en un
archivo .css, y reducir la complejidad y la repetición de código en la estructura
del documento.

La separación del formato y el contenido hace posible presentar el mismo documento

marcado en diferentes estilos para diferentes métodos de renderizado, como en
pantalla, en impresión, en voz (mediante un navegador de voz o un lector de
pantalla), y dispositivos táctiles basados en el sistema Braille. También se puede
mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o
tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente,
como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja
de estilos del diseñador.

La especificación CSS describe un esquema prioritario para determinar qué reglas de

estilo se aplican si más de una regla coincide para un elemento en particular.
Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las
prioridades son calculadas y asignadas a las reglas, así que los resultados son
predecibles.

La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME
type text/css está registrado para su uso por CSS descrito en el RFC 2318.5 El W3C
proporciona una herramienta de validación de CSS gratuita para los documentos CSS.

Índice
1 Sintaxis
1.1 Selectores
1.2 Bloque de declaraciones
1.3 Uso
1.4 Fuentes
1.5 Especificidad
1.5.1 Ejemplo
1.6 Herencia
1.6.1 Ejemplo
1.7 Espacios en blanco
1.8 Posicionamiento
1.8.1 Propiedades de posicionamiento
1.8.2 Float y clear
2 Historia
3 Niveles
3.1 CSS1
3.2 CSS2
3.2.1 CSS 2.1
3.3 CSS3
4 Soporte por los navegadores web
5 Limitaciones
6 Limitaciones resueltas
7 Ventajas
8 Framework CSS
9 Véase también
10 Referencias
11 Enlaces externos
Sintaxis
CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para
especificar los nombres de varias propiedades de estilo. Una hoja de estilos
consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno
o más selectores, y un bloque de declaración.

Selectores
Artículo principal: Selector CSS
Los selectores declaran qué etiquetas se le aplican a los estilos que coincidan con
la etiqueta o atributo señalados en la regla.

Los selectores pueden aplicarse a:

Todos los elementos de un tipo, como los párrafos <p>.

Elementos seguidos de un atributo, en particular:
id: identificador, un identificador único para la etiqueta.
class: clase, un identificador para anotar múltiples elementos.
Las clases y los identificadores son sensibles a las mayúsculas, comienzan con
letras, y pueden incluir caracteres alfanuméricos y guiones bajos. Una clase se
aplica a cualquier número de elementos. Un identificador se aplica a un solo
elemento.

Las pseudoclases son usadas en los selectores CSS para permitir el formateo usando
información que no está incluida en el documento. Un ejemplo de una pseudoclase muy
usada es :hover, que identifica el contenido que está siendo apuntado por un
puntero, como el cursor del ratón. Este nombre se añade al selector, de esta
manera: a:hover o #elementid:hover. Una pseudoclase clasifica elementos, como :link
o :visited, mientras que un pseudoelemento hace una selección de elementos
parciales, como ::first-line o ::first-letter.

Los selectores pueden ser combinados de muchas maneras para obtener una mayor
flexibilidad y precisión. Múltiples selectores pueden ser unidos en una misma línea
para especificar elementos por su ubicación, tipo de elemento, identificador,
clase, o cualquier combinación de estos. El orden de los selectores es importante.
Por ejemplo, div.myClass {color: red;} aplica a todos los elementos <div> con la
clase myClass, mientras que.myClass div {color: red;} aplica a todos los elementos
<div> que estén dentro de cualquier elemento con la clase myClass.

La tabla siguiente proporciona un resumen de la sintaxis de los diversos

selectores, indicando su forma de uso y la versión de CSS en la que fueron
introducidos:

Patrón Significado Nivel CSS

de aparición
E un elemento de tipo E 1
E:link un elemento E que es un enlace que no ha sido visitado (:link) o ya fue
visitado (:visited) 1
E:active un elemento E que está realizando cierta acción por parte del usuario
1
E::first-line la primera línea formateada de un elemento E 1
E::first-letter la primera letra formateada de un elemento E 1
.c todos los elementos con class="c" 1
#myid el elemento con id="myid" 1
E.warning un elemento E que pertenece a la clase "warning" 1
E#myid un elemento E cuyo id sea "myid" 1
E F un elemento F descendiente de un elemento E 1
* cualquier elemento 2
E[foo] un elemento E con un atributo "foo" 2
E[foo="bar"] un elemento E cuyo atributo "foo" tiene un valor exacto de "bar"
2
E[foo~="bar"] un elemento E cuyo atributo "foo" tiene una lista de valores
separados por espacios, y uno de ellos es "bar" 2
E:first-child el primer hijo de un elemento E 2
E:lang(eo) un elemento E cuyo idioma esté especificado en "eo" 2
E::before contenido generado antes del contenido del elemento E 2
E::after contenido generado después del contenido del elemento E 2
E > F un elemento F hijo de un elemento E 2
E + F un elemento E inmediatamente sucedido de un elemento F 2
E[foo^="bar"] un elemento E cuyo atributo "foo" tenga un valor que comience
exactamente con la cadena "bar" 3
E[foo$="bar"] un elemento E cuyo atributo "foo" tenga un valor que finalice
exactamente con la cadena "bar" 3
E[foo*="bar"] un elemento E cuyo atributo "foo" tenga un valor que contenga la
subcadena "bar" 3
E:root un elemento E en la raíz del documento 3
E:nth-child(n) un elemento E, el n-esimo hijo de este 3
E:nth-last-child(n) un elemento E, el n-esimo hijo de este, contando desde el
último hijo 3
E:nth-of-type(n) un elemento E, el n-esimo hijo de este, contando solo los del
mismo tipo que el padre 3
E:nth-last-of-type(n) un elemento E, el n-esimo hijo de este, contando solo los
del mismo tipo que el padre, y desde el último hijo 3
E:last-child el último hijo de un elemento E 3
E:first-of-type un elemento E, los primeros hermanos de su tipo 3
E:last-of-type un elemento E, los últimos hermanos de su tipo 3
E:only-child el único hijo del elemento E 3
E:only-of-type el único hermano del elemento E 3
E:empty un elemento E que no posea hijos (incluyendo nodos de texto) 3
E:target un elemento E de enlace siendo pulsado 3
E:enabled un elemento E de interfaz de usuario habilitado 3
E:disabled un elemento E de interfaz de usuario deshabilitado 3
E:checked un elemento E de interfaz de usuario marcado (válido para los checkboxs
y los radiobuttons) 3
E:not(s) un elemento E que no coincide con el selector simple s 3
E ~ F un elemento E sucedido de un elemento F 3
Bloque de declaraciones
Un bloque de declaraciones consiste en una lista de declaraciones unidas. Cada
declaración consiste en una propiedad, dos puntos (:), y un valor. Si hay muchas
declaraciones en un bloque, un punto y coma (;) es insertado para separar cada
declaración.

Las propiedades son insertadas en el estándar CSS. Cada propiedad tiene un conjunto
de posibles valores. Algunas propiedades afectan a cualquier elemento, otras solo a
un grupo particular de elementos. Los valores pueden ser palabras clave, como
"center" o "inherit", o valores numéricos, como 200px (200 píxeles) o 80% (80 por
ciento del ancho de la ventana). Los valores de colores son especificados por medio
de una palabra clave (ej. "red"), de valores hexadecimales (ej. #FF0000, pudiéndose
abreviar como #F00), valores RGB en una escala del 0 al 255 (ej. rgb(255, 0, 0)),
valores RGBA igual que los valores RGB pero con soporte para el canal alfa de
transparencias (ej. rgba(255, 0, 0, 0.8)), y valores HSL o HSLA (ej. hsl(000, 100%,
50%), hsla(000, 100%, 50%, 80%)).

Uso
Antes del desarrollo de CSS, toda la información presentacional de los documentos
HTML era incluida en el código HTML. Los colores de las fuentes, los estilos de
fondo, la alineación de los elementos, los bordes y tamaños eran descritos
explícitamente, a veces de manera redundante, dentro del HTML. CSS permite a los
diseñadores mover toda la información presentacional a otro archivo, la hoja de
estilos, resultando en un código HTML notablemente más simple.

Por ejemplo, las cabeceras (h1), sub-cabeceras (h2 ej. red), sub-sub-cabeceras
(h3), etc., son definidas estructuralmente usando HTML. En la impresión y las
pantallas, la elección de la fuente, tamaño, color y énfasis para esos elementos es
presentacional.

Antes de CSS, los diseñadores que deseaban asignar características tipográficas,

por ejemplo, a todos los elementos h2 tenían que repetir el código presentacional
HTML por cada elemento al que se le deseaba aplicar ese estilo. Esto creaba
documentos más complejos, largos, más propensos a errores y difíciles de mantener.
CSS permite la separación entre la presentación y la estructura. CSS puede definir
el color, fuente, alineación del texto, tamaño, bordes, espaciado, capas y muchas
otras características tipográficas, y pueden aplicarse distintos estilos de
impresión y de pantalla. CSS también define estilos no visuales, como la velocidad
de lectura y énfasis en los lectores de textos aurales. El W3C ha declarado
obsoleto el uso de las etiquetas presentacionales HTML.

Por ejemplo, aplicando estilos mediante etiquetas presentacionales HTML, un

elemento h1 definido con texto rojo se puede representar como:

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

Usando CSS, el mismo elemento puede escribirse usando propiedades de estilo inline
en vez de atributos y etiquetas de presentación:
<h1 style="color: red;"> Capítulo 1. </h1>
Una hoja de estilos CSS externa, descrita abajo, puede enlazarse con un documento
HTML usando la sintaxis siguiente:

<link href="hojadeestilos.css" rel="stylesheet" type="text/css" />

El código CSS se puede incluir en el código HTML en la etiqueta <style> dentro de
la etiqueta <head> del documento:

<style>
h1 {color: red}
</style>
Fuentes
Los estilos CSS puede ser provistos desde varias fuentes. Esas fuentes pueden ser
el navegador web, el usuario y el diseñador. La información del diseñador puede ser
clasificada de las siguientes formas: inline, media type, importancia,
especificidad del selector, orden de reglas, herencia y definición de propiedades.
La información de los estilos CSS puede estar en un documento separado o puede
estar embebido dentro de un documento HTML. Múltiples hojas de estilos pueden ser
importadas al mismo tiempo. Los diferentes estilos pueden ser aplicados dependiendo
de la salida del dispositivo usado en ese momento; por ejemplo, la versión para
monitores puede ser diferente de la versión impresa, así que los diseñadores pueden
aplicar diferentes estilos dependiendo del dispositivo usado.

La hoja de estilos con la máxima prioridad controla la visualización del contenido.

Las declaraciones no establecidas en la fuente con máxima prioridad son
sobreeescritas, como las hojas de estilos del agente de usuario. Este proceso es
llamado cascading, o cascada.6

Una de las metas de CSS es permitir a los usuarios un mayor control sobre la
presentación. Algunas personas que encuentran a los encabezados rojos en itálicas
difíciles de leer pueden aplicar una hoja de estilos diferente. Dependiendo del
navegador y del sitio web, un usuario puede escoger entre varias hojas de estilo
provistas por los diseñadores, o pueden remover todas las hojas de estilos añadidas
y ver el sitio usando los estilos por defecto del navegador, o pueden sobreescribir
solo el estilo de los encabezados rojos en itálica sin alterar otros atributos.

Esquemas de prioridad CSS (de mayor a menor importancia)

Prioridad Tipo de origen de CSS Descripción
1 Importancia La anotación !important sobreescribe la prioridad anterior
2 Inline Un estilo aplicado a un elemento HTML por medio del atributo
style
3 Media Type Una propiedad aplica a todas las media types, a menos que un
media type específico CSS esté definido
4 Definido por el usuario La mayoría de los navegadores tienen esta
característica de accesibilidad: un estilo CSS definido por el usuario
5 Especificidad del selector Un selector contextual específico (#heading p)
sobreescribe una definicón general (p)
6 Orden de las reglas La última regla especificada tiene una mayor
prioridad
7 Herencia Si una propiedad no está especificada, es heredada del elemento
padre
8 Definición de propiedad CSS en el documento HTML Una regla CSS común
sobreescribe el valor del navegador
9 Predeterminado del navegador La prioridad más baja: estos valores son
determinados por las especificaciones iniciales de la W3C
Especificidad
La especificidad se refiere a los pesos relativos de varias reglas. Determina qué
estilos se aplican a un elemento cuando más de una regla intentan aplicar estilos a
ella. Basándose en la especificación, un simple selector (h1, por ejemplo) tiene
una especificidad de 1, los selectores de clase tienen una especificidad de 1,0, y
los selectores de id una especificidad de 1,0,0. Porque los valores de
especificidad no se acarrean como en el sistema decimal, las comas son usadas para
separar los "dígitos" (una regla CSS que tiene 11 elementos y 11 clases tiene una
especificidad de 11,11, no 121).

Por lo tanto los siguientes selectores de reglas dan como resultado la

especificidad indicada:

Selectores Especificidad
H1 {color: white;} 0, 0, 0, 1
P EM {color: green;} 0, 0, 0, 2
.grape {color: red;} 0, 0, 1, 0
P.bright {color: blue;} 0, 0, 1, 1
P.bright EM.dark {color: yellow;} 0, 0, 2, 2
#id218 {color: brown;} 0, 1, 0, 0
style=" " 1, 0, 0, 0
Ejemplo
Considera este documento HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#id{propiedad:valor;}
</style>
</head>
<body>
<p id="xyz" style="color: blue;">Para demostrar la especificidad</p>
</body>
</html>
En este ejemplo, la declaración en el atributo style sobreescribe la declaración
del elemento <style> porque tiene un especificidad más alta.

Herencia
La herencia es una característica clave en CSS; basada en la relación ancestro-
descendiente para operar. La herencia es el mecanismo por el cual las propiedades
no solo se aplican a un solo elemento, sino también a sus descendientes. La
herencia se basa en el árbol del documento, el cual es la jerarquía de los
elementos XHTML en una página basada en el anidamiento. Los elementos descendientes
pueden heredar los valores de las propiedades CSS de un elemento ancestro. En
general, los elementos descendientes heredan las propiedades relacionadas al texto,
pero las propiedades relacionadas con la caja no. Las propiedades que pueden ser
heredadas son el color, fuente, espaciado, el peso de la línea, propiedades de
lista, alineación del texto, identado, visibilidad, espaciado de espacios and y
espaciado entre palabras. Las propiedades que no pueden ser heredadas son el fondo,
bordes, visualización, posicionamiento, tamaño, márgenes, tamaño mínimo y máximo,
outline, desbordamiento, relleno, posición, alineación vertical y z-index.7

La herencia previene que algunas propiedades sean declaradas una y otra vez en la
hoja de estilos, permitiendo a los diseñadores escribir menos código CSS. Mejora la
carga rápida de los sitios por los usuarios, y permite a los clientes ahorrar
dinero en los costos de desarrollo y ancho de banda.

Ejemplo
Se tiene la siguiente hoja de estilos:
 h1 {
color: pink;
}
Este es un elemento h1 con una etiqueta de énfasis (em) dentro:

<h1>
Esto es para <em>ilustrar</em> la herencia
</h1>
Si no se asigna un color al elemento em, la palabra «ilustrar» heredará el color
del elemento padre, h1. Entonces, la palabra «ilustrar» aparecerá de color rosa.
Pongamos por ejemplo el color gris para el texto que esté entre las etiquetas em.

em {
color: gray;
}
Espacios en blanco
Los espacios en blanco entre propiedades y selectores se ignoran. Este pedazo de
código:

body{overflow:hidden;background:#000000;}
es igual a este otro:

body {
overflow: hidden;
background: #000000;
}
Aunque el espaciado mejora la legibilidad del código.

Posicionamiento
CSS 2.1 define 3 esquemas de posicionamiento:

Normal
Los elementos inline, o de línea, son dispuestos de la misma manera que las letras
en las palabras de un texto, una vez que ya no hay más espacio en una línea,
entonces se empieza una nueva línea abajo. Los elementos block, o de bloque, son
dispuestos verticalmente, como los párrafos.
Flotante
Un elemento float está fuera del flujo normal y puesto lo más posible a la derecha
o izquierda en el espacio disponible. Los demás elementos fluyen alrededor del
elemento float.
Absoluto
Un elemento posicionado absolutamente no tiene un lugar, y no afecta al flujo
normal de los elementos. Ocupa el espacio que se le ha asignado independientemente
de los demás elementos.
Propiedades de posicionamiento
Hay 4 posibles valores para la propiedad position. Si un elemento está posicionado
de una manera diferente a static, hay cuatro subpropiedades usadas para especificar
posiciones y offsets: top, bottom, left y right.8

Static
El valor por defecto a los elementos en el flujo normal.
Relative
El elemento el posicionado en el flujo normal, y luego movido relativamente a su
posición normal. Los demás elementos son independientes del elemento movido
relativamente.
Absolute
Especifica el posicionamiento absoluto. El elemento es posicionado en relación a su
antecesor no estático más cercano.
Fixed
El elemento es posicionado absolutamente en una posición fija de la pantalla aunque
el resto del documento se mueva.
Float y clear
La propiedad float puede tener 3 valores diferentes. Los elementos posicionados
absolutamente o de manera fija no pueden ser aplicados a esta propiedad. Los demás
elementos flotan normalmente alrededor de los elementos flotantes, a menos que se
establezcan alguna de las propiedades clear.

left
Los elementos float flotan a la izquierda y los otros elementos fluyen a la derecha
de este elemento.
right
Los elementos float flotan a la derecha y los otros elementos fluyen a la izquierda
de este elemento.
clear
Fuerza al elemento a no fluir alrededor de los elementos que flotan a la izquierda
(clear: left), a la derecha (clear: right) o a ambos lados (clear: both).
Historia

Håkon Wium Lie, CTO de la compañía Opera Software y cocreador del estándar CSS
CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994.9 Al
mismo tiempo, Lie trabajaba con Tim Berners-Lee en el CERN.10 Muchos otros
lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones
en las listas de correo públicas dentro del W3C dieron lugar a la primera
Recomendación CSS por el W3C (CSS1)11 en 1996. En particular, la propuesta de Bert
Bos fue influyente; él fue el coautor de CSS1 y es reconocido como el cocreador de
CSS.12

Las hojas de estilo han existido de una forma u otra desde los comienzos del
Standard Generalized Markup Language (SGML) en la década de los 80s, y CSS fue
desarrollado para proveer hojas de estilos para la web.13 Un requerimiento para un
lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes
estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como
DSSSL y FOSI no fueron adecuados. CSS, por otro lado, permite al documento ser
influido por múltiples hojas de estilo por medio de los estilos en «cascada».13

A medida que HTML fue creciendo, llegó a abarcar una amplia variedad de capacidades
de diseño para satisfacer las demandas de los diseñadores web. Esta evolución dio
al diseñador mayor control sobre la apariencia del sitio, con el costo de un HTML
más complejo. Variaciones en las implementaciones de los navegadores web, como
ViolaWWW y WorldWideWeb,14 hicieron más difícil la consistencia de la apariencia
del sitio web, y los usuarios tenían menos control sobre cómo era mostrado el
contenido web. El navegador/editor creado por Tim Berners-Lee tenía hojas de
estilos que fueron introducidas dentro del programa. Las hojas de estilos, por lo
tanto, no eran enlazadas a los documentos en la web.15 Robert Cailliau, también del
CERN, quería separar la estructura de la presentación, de modo que diferentes hojas
de estilo podrían describir diferentes presentaciones para impresión, pantallas y
editores.14

Mejorar las capacidades de la presentación en la web fue un tema de interés para

muchos en las comunidades web, y 9 diferentes lenguajes de hojas de estilos fueron
propuestos en la lista de correo www-style.13 De esas nueve propuestas, dos
influenciaron profundamente en lo que sería CSS: Cascading HTML Style Sheets9 y
Stream-based Style Sheet Proposal (SSP).1216 Dos navegadores fueron usados para
pruebas para las propuestas iniciales; Lie trabajó con Yves Lafon para implementar
CSS en el navegador Arena creado por Dave Raggett.171819 Bert Bos implementó su
propia propuesta SSP en el navegador Argo.12 Desde entonces, Lie y Bos trabajaron
juntos para desarrollar el estándar CSS. La 'H' se eliminó del nombre porque estas
hojas de estilo pueden ser aplicadas a otros lenguajes de marcado además de HTML.10
La propuesta de Lie fue presentada en la conferencia "Mosaic and the Web" (más
tarde llamada WWW2) en Chicago, Illinois en 1994, y de nuevo con Bert Bos en
1995.10 En ese tiempo el W3C ya estaba siendo establecido, y mostraba interés en el
desarrollo de CSS. Organizó un taller para ese fin presidido por Steven Pemberton.
Esto resultó en que W3C le dio más trabajo sobre CSS a lo resultados del Comité de
Revisión Editorial (ERB). Lie y Bos eran el equipo técnico principal en esta parte
del proyecto, con participantes adicionales como Thomas Reardon de Microsoft. En
agosto de 1996 Netscape Communication Corporation presentó una alternativa de
lenguaje de hoja de estilos llamada JavaScript Style Sheets (JSSS).10 La
especificación nunca fue finalizada y quedó obsoleta.20 A finales de 1996, CSS
estaba listo para ser oficial, y la recomendación CSS 1 fue publicada en diciembre.

El desarrollo de HTML, CSS, y DOM había sido realizado en un solo grupo, el HTML
Editorial Review Board (ERB). A comienzos de 1997, el ERB fue dividido en tres
grupos de trabajo: HTML Working Group, liderado por Dan Connolly del W3C; DOM
Working group, liderado por Lauren Wood de SoftQuad; y CSS Working Group, liderado
por Chris Lilley del W3C.

El grupo de trabajo de CSS comenzó corrigiendo errores que no habían sido revisados
en el CSS 1, resultando en la creación de CSS 2, el 4 de noviembre de 1997. Fue
publicado como una recomendación el 12 de mayo de 1998. Las adiciones a CSS de allí
en adelante, conocidas colectivamente como "CSS3", tomaron un aspecto modular,
desarrollándose cada función de forma independiente.

En 2005 el grupo de trabajo de CSS decidió mejorar los requerimentos de los

estándares de forma más estricta. Esto significó que los estándares ya publicados
como CSS 2.1, CSS3 Selectors y CSS3 Text fueron retrocedidos del estado
"Recomendaciones candidatas" a "Borrador de trabajo".

Niveles
CSS se ha creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre
el anterior, generalmente añadiendo funciones al nivel previo.

Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para
un dispositivo o interfaz particular. Actualmente, pueden usarse perfiles para
dispositivos móviles, impresoras o televisiones.

CSS1
La primera especificación oficial de CSS, recomendada por la W3C fue CSS1,
publicada en diciembre de 1995,21 y abandonada en abril de 2008.21

Algunas de las funcionalidades que ofrece son:

Propiedades de las fuentes, como tipo, tamaño, énfasis...

Color de texto, fondos, bordes u otros elementos.
Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.
Alineación de textos, imágenes, tablas u otros.
Propiedades de caja, como margen, borde, relleno o espaciado.
Propiedades de identificación y presentación de listas.
CSS2
La especificación CSS2 fue desarrollada por la W3C y publicada como recomendación
en mayo de 1998, y abandonada en abril de 2008.22

Como ampliación de CSS1, se ofrecieron, entre otras:

Las funcionalidades propias de las capas (<div>) como de posicionamiento

relativo/absoluto/fijo, niveles (z-index), etcétera.
El concepto de "media types".
Soporte para las hojas de estilo auditivas.
Texto bidireccional, sombras, etcétera.
CSS 2.1
La primera revisión de CSS2, usualmente conocida como "CSS 2.1", corrige algunos
errores encontrados en CSS2, elimina funcionalidades poco soportadas o inoperables
en los navegadores y añade alguna nueva especificación.

De acuerdo al sistema de estandarización técnica de las especificaciones, CSS2.1

tuvo el estado de "candidato" (candidate recommendation) durante varios años,23
pero la propuesta fue rechazada en junio de 2005. En junio de 2007 fue propuesta
una nueva versión candidata, y está actualizada en 2009, pero en diciembre de 2010
fue nuevamente rechazada.

En abril de 2011, CSS 2.1 volvió a ser propuesta como candidata,24 y después de ser
revisada por el W3C Advisory Committee, fue finalmente publicada como recomendación
oficial el 7 de junio de 2011.25

CSS3
A diferencia de CSS2, que fue una única especificación que definía varias
funcionalidades, CSS3 está dividida en varios documentos separados, llamados
"módulos".

Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se
preservan las anteriores para mantener la compatibilidad.

Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación

oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de
1999.26

Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en

diferentes estados de su desarrollo,27 de forma que a fechas de noviembre de 2011,
hay alrededor de cincuenta módulos publicados,26 tres de ellos se convirtieron en
recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres" y
"Color".

Algunos módulos, como "Fondos y colores", "Consultas de medios" o "Diseños

multicolumna" están en fase de "candidatos", y considerados como razonablemente
estables, a finales de 2011, y sus implementaciones en los diferentes navegadores
son señaladas con los prefijos del motor del mismo.28

Soporte por los navegadores web

Cada navegador web usa un motor de renderizado para renderizar páginas web, y el
soporte de CSS no es exactamente igual en ninguno de los motores de renderizado. Ya
que los navegadores no aplican el CSS correctamente, muchas técnicas de
programación han sido desarrolladas para ser aplicadas por un navegador específico
(comúnmente conocida esta práctica como CSS hacks o CSS filters). La adopción de
nuevas funcionalidades en CSS son obstaculizadas por la ausencia de soporte en los
navegadores mayoritarios. Por ejemplo, Internet Explorer ha sido lento para añadir
el soporte para algunas características de CSS3, lo cual ha dificultado la adopción
de estas características, y dañado la reputación del navegador entre los
desarrolladores2930 . Para asegurar una experiencia consistente para sus usuarios,
los desarrolladores web en ocasiones prueban sus sitios en múltiples navegadores,
sistemas operativos y versiones de navegadores. Incrementando el tiempo de
desarrollo y la complejidad. Varias herramientas como BrowserStack han sido
construidas para reducir la complejidad del mantenimiento de las páginas web.

Además de las ya mencionadas herramientas de prueba, muchos sitios mantienen listas

del soporte de navegadores para las propiedades específicas de CSS, incluyendo
CanIUse y Mozilla Developer Network. Además, CSS3 definen muchas queries, entre las
cuales se provee la directiva @supports que permite a los desarrolladores
especificar navegadores con soporte para alguna función en específico directamente
en el CSS.31 El código CSS que no es soportado por versiones antiguas de un
navegador, es provisto algunas veces por medio de polyfills en JavaScript. Estos
métodos añaden complejidad a los proyectos de desarrollo, y en consecuencia, las
compañías frecuentemente definen una lista de las diferentes versiones de
navegadores que son soportadas y que no son soportadas.

Como los sitios web adoptan nuevas normas del código que son incompatibles con los
navegadores más antiguos, a estos navegadores se les quita el acceso a muchos de
los recursos en la web (a veces intencionalmente). Muchos de los sitios más
populares en Internet no solo son visualmente feos en los navegadores 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.32

Limitaciones
Algunas de las limitaciones conocidas de las capacidades actuales de CSS son:

Los selectores no pueden ascender

CSS actualmente no ofrece una manera de seleccionar al padre de un elemento que
satisfaga algún criterio33. Los selectores CSS Nivel 4, que aún están en calidad de
Working Draft, ha propuesto un selector, pero solo como parte de otro selector34.
un esquema de selectors más avanzado (como XPath) podría habilitar hojas de estilo
más sofisticadas. Las mayores razones del CSS Working Group para rechazar
propuestas para los selectores ascendentes son relacionadas al rendimiento del
navegador y las fallas en aumento del renderizado35.
Las pseudoclases dinámicas no se pueden controlar
Las pseudoclases dinámicas (como :hover) no se pueden controlar o deshabilitar
desde el navegador, lo que las hace susceptibles de abuso por parte de los
diseñadores de banners o ventanas emergentes.36
No se pueden nombrar estilos CSS
No existe manera alguna de nombrar a un estilo CSS, lo cual podría permitir scripts
del lado del cliente para referirse a la regla aún si el selector cambia.
No se pueden incluir estilos de una regla dentro de otra
Los estilos CSS en ocasiones deben ser duplicados en varias reglas para alcanzar el
efecto deseado, causando mantenimiento adicional y requiriendo más pruebas. Algunas
características de CSS fueron propuestas para solventar esto, pero (en febrero de
2016) no se ha implementado nada aún.37
No se puede seleccionar texto específico sin alterar el marcado
Además del pseudo-elemento :first-letter, no se puede seleccionar un rango
específico de texto sin utilizar etiquetas como <span>.
Limitaciones resueltas
También hay limitaciones que ya han sido resueltas:

Alineado vertical
Mientras que el alineado horizontal es generalmente fácil de controlar, el alineado
vertical es frecuentemente no intuitivo, o de plano imposible. Simples tareas, como
la de centrar un elemento verticalmente o poniendo un pie de página abajo es muy
difícil. El Flexible Box Module mejora esta situación considerablemente y el
alineado vertical es mucho más simple y soportado en todos los navegadores
actuales. Los navegadores más viejos no tienen estas características
(principalmente Internet Explorer 9 y abajo) y no son soportados actualmente por
sus fabricantes.38
Ausencia de expresiones
No hay aun una opción estándar para especificar los valores de propiedades como una
expresión simple (como margin-left: 10% – 3em + 4px;). Esto puede ser útil en
muchos casos, como para calcular el número de columnas de una tabla. Internet
Explorer en sus versiones 5 a 7 soportan una extensión propietaria expression()39,
con una funcionalidad similar. expression() ya no es soportada por Internet
Explorer 8 en adelante, excepto en los modos de compatibilidad. Esta decisión fue
tomada para mejorar "el cumplimiento de los estándares, el rendimiento del
navegador, y por razones de seguridad"39. Como sea, una recomendación candidata
calc() para superar esta limitación ha sido publicada por el CSS WG y ahora está
soportada por la mayoría de los navegadores modernos40.
Ausencia de la declaración de columnas de texto
Aunque ya es posible implementar esto en la especificación de CSS3 (usando el
módulo column-count), las capas con muchas columnas son difíciles de implementar
con CSS 2.141. Con CSS 2.1, el proceso se hace usando elementos flotantes, los
cuales son renderizados de diferente manera en los distintos navegadores, tamaños,
formas de pantalla y sistemas operativos. Ahora, todos los navegadores modernos
soportan esta característica de CSS3 de una forma u otra42.
Ventajas
Por otro lado, algunas ventajas de utilizar CSS son:

Separación del contenido y la presentación

CSS facilita la publicación de contenido en múltiples formatos de presentación
basado en parámetros nominales. Estos incluyen preferencias explícitas del usuario,
diferentes navegadores web, el tipo de dispositivo usado para ver el contenido (una
PC o un teléfono inteligente), la localización geográfica u otras variables.
Consistencia del sitio
Cuando CSS es usado efectivamente, en términos de herencia y "cascading", una hoja
de estilos global puede ser usado para aplicar estilos a todo un sitio. Si más
adelante estos estilos deben ser cambiados, los cambios pueden ser hechos solo con
cambiar las reglas en la hoja de estilos global. Antes de CSS, esto era mucho más
difícil, caro y más tardado.
Ancho de banda
Una hoja de estilos interna o externa, especifica el estilo para un conjunto de
elementos HTML seleccionados por clase, tipo, o herencia. Esto es más eficiente que
repetir información para cada ocurrencia del elemento. Una hoja de estilos externa
usualmente es guardada en la caché del navegador, y puede ser usada en múltiples
páginas sin ser cargada de nuevo, reduciendo la transferencia de datos a través de
la red.
Formateo de página
Con un cambio simple en una sola línea, puede cambiarse la hoja de estilos para la
misma página. Esto trae ventajas para la accesibilidad, además de que posibilita
adaptar el sitio a diferentes dispositivos.
Accesibilidad
Sin CSS, los diseñadores web típicamente diseñaban sus páginas con elementos como
tablas que dificultaban la accesibilidad para otros usuarios, y que iban en
perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a
personas con algunas limitaciones sensoriales.
Framework CSS
Los frameworks CSS son bibliotecas preparadas para permitir la simplificación, y el
mayor cumplimiento de los estándares en el diseño de páginas web usando el lenguaje
CSS. Algunos de los frameworks CSS más comunes son Foundation, Blueprint,
Bootstrap, Cascade Framework y Materialize. Como en la programación de bibliotecas
en los lenguajes de script, los frameworks CSS son usualmente incorporados como
hojas de estilo CSS externas referenciadas con la etiqueta <link>. Esto provee una
gran cantidad de opciones listas para el diseño y la maquetación de una página web.
Aunque muchos frameworks ya han sido publicados, algunos diseñadores las usan
mayormente para desarrollar prototipos rápidos, o por motivos de aprendizaje, y
prefieren construir a mano su propio código CSS43.

Véase también
Em (tipografía)
HTML
Acid3
CSS Zen Garden
Anexo:Lista de lenguajes de hojas de estilo
Mejora progresiva
Help:Cascading Style Sheets (en inglés)
Referencias
«W3C CSS2.1 specification for rule sets, declaration blocks, and selectors». World
Wide Web Consortium. Consultado el 20 de junio de 2009. Especificaciones para el
CSS2.1(en inglés)
«CSS developer guide». Mozilla Developer Network. Consultado el 21 de octubre de
2016.
«Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript».
www.htmlgoodies.com. Consultado el 21 de octubre de 2016.
«HTML & CSS - W3C». www.w3.org. Consultado el 21 de octubre de 2016.
RFC 2318. IETF. (marzo de 1998)
«The cascade» (en inglés). W3C. 12 de abril de 2016.
«Inheritance» (en inglés). W3C. 12 de abril de 2016.
«Positioning schemes» (en inglés). W3C. 12 de abril de 2016.
Lie, Hakon W (10 de octubre de 1994). Cascading HTML style sheets - a proposal.
CERN. Consultado el 25 de mayo de 2014.
Lie, Håkon Wium; Bos, Bert (1999). Cascading Style Sheets, designing for the Web.
Addison Wesley. ISBN 0-201-59625-3. Consultado el 23 de junio de 2010.
«Cascading Style Sheets, level 1». World Wide Web Consortium.
Bos, Bert (14 de abril de 1995). «Simple style sheets for SGML & HTML on the web».
World Wide Web Consortium. Consultado el 20 de junio de 2010.
«Cascading Style Sheets». University of Oslo. Archivado desde el original el 4 de
octubre de 2014. Consultado el 3 de septiembre de 2014.
Petrie, Charles; Cailliau, Robert (November 1997). «Interview Robert Cailliau on
the WWW Proposal: "How It Really Happened."». Institute of Electrical and
Electronics Engineers. Archivado desde el original el 6 de enero de 2011.
Consultado el 18 de agosto de 2010.
Bos, Håkon Wium Lie, Bert (1999). Cascading style sheets: designing for the Web
(2nd edición). Harlow, Essex, England: Addison-Wesley. ISBN 0-201-59625-3.
Bos, Bert (31 de marzo de 1995). «Stream-based Style sheet Proposal». Consultado
el 3 de septiembre de 2014.
Nielsen, Henrik Frystyk (7 de junio de 2002). «Libwww Hackers». World Wide Web
Consortium. Consultado el 6 de junio de 2010.
«Yves Lafon». World Wide Web Consortium. Consultado el 17 de junio de 2010.
«The W3C Team: Technology and Society». World Wide Web Consortium. 18 de julio de
2008. Consultado el 22 de enero de 2011.
Lou Montulli; Brendan Eich; Scott Furman; Donna Converse; Troy Chevalier (22 de
agosto de 1996). «JavaScript-Based Style Sheets». World Wide Web Consortium.
Consultado el 23 de junio de 2010.
W3C: Especificación CSS1 (en inglés)
«Especificación CSS2» (en inglés). W3C. 1998.
CSS 2.1 fue lanzada como Candidata a recomendación el 25 de febrero de 2004 (en
inglés)
W3C:CSS2.1 (recomendación propuesta por la W3C) (en inglés)
La W3C publica el estándard CSS2.1 (en inglés)
Bos, Bert (18 de febrero de 2011). «Descriptions of all CSS specifications». World
Wide Web Consortium. Consultado el 3 de marzo de 2011. Descripción de todas las
especificaciones del CSS, por la W3C (en inglés)
Bos, Bert (26 de febrero de 2011). «CSS current work». World Wide Web Consortium.
Consultado el 3 de marzo de 2011. Trabajos actuales en CSS (en inglés)
Etemad, Elika (12 de diciembre de 2010). «Cascading Style Sheets (CSS) Snapshot
2010». World Wide Web Consortium. Consultado el 3 de marzo de 2011. Definiciones
del CSS (2010) (en inglés)
Clemente Laboreo, Daniel. «Pop-up para usuarios de IE».
http://www.danielclemente.com. Consultado el 12 de noviembre de 2017.
«CSS3 Solutions for Internet Explorer – Smashing Magazine». Smashing Magazine (en
inglés estadounidense). 28 de abril de 2010. Consultado el 12 de octubre de 2016.
 «Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog».
hacks.mozilla.org. Consultado el 12 de octubre de 2016.
«Looking at the Web with Internet Explorer 6, one last time». Ars Technica.
Consultado el 12 de octubre de 2016.
Molly Holzschlag (enero de 2012). «Seven Things Still Missing from CSS». .net
Magazine. Archivado desde el original el 5 de marzo de 2017. Consultado el 12 de
noviembre de 2017.
«Selectors Level 4 – Determining the Subject of a Selector». W3.org. Archivado
desde el original el 17 de agosto de 2013. Consultado el 13 de agosto de 2013.
Snook, Jonathan (octubre de 2010). «Why we don't have a parent selector».
snook.ca. Archivado desde el original el 18 de enero de 2012. Consultado el 12 de
noviembre de 2017.
«Pure CSS Popups». meyerweb.com. Archivado desde el original el 9 de diciembre de
2009. Consultado el 19 de noviembre de 2009.
Tab Atkins Jr. «CSS apply rule». GitHub. Archivado desde el original el 22 de
febrero de 2016. Consultado el 27 de febrero de 2016.
«Internet Explorer End of Support». Microsoft. Consultado el 27 de febrero de
2016.
«About Dynamic Properties». Msdn.microsoft.com. Consultado el 20 de junio de 2009.
«Can I use... Support tables for HTML5, CSS3, etc.». CanIUse.com. Archivado desde
el original el 4 de marzo de 2016. Consultado el 27 de febrero de 2016.
«CSS Multi-column Layout Module». World Wide Web Consortium. Consultado el 1 de
mayo de 2011.
«Can I use... Support tables for HTML5, CSS3, etc.». CanIUse.com. Consultado el 27
de febrero de 2016.
Cederholm, Dan; Ethan Marcotte (2009). Handcrafted CSS: More Bulletproof Web
Design. New Riders. p. 114. ISBN 978-0-321-64338-4. Consultado el 19 de junio de
2010.
Enlaces externos
«CSS Snapshot 2015». W3C (en inglés). Consultado el 10 de diciembre de 2015. – Este
documento reúne en un solo documento todas las especificaciones que conforman el
estado actual de CSS en 2015.
«Cascading Style Sheets (CSS) Snapshot 2010». W3C (en inglés). Consultado el 23 de
julio de 2014. – Incluye enlaces a las especificaciones.
Comparación de la presentación CSS en diferentes motores (Wikipedia en inglés)
[1] CSS3 Introduction
CSS en Open Directory Project.
Esta obra contiene una traducción parcial derivada de «Css» de Wikipedia en inglés,
concretamente de esta versión, publicada por sus editores bajo la Licencia de
documentación libre de GNU y la Licencia Creative Commons Atribución-CompartirIgual
3.0 Unported.
Control de autoridades
Proyectos WikimediaWd Datos: Q46441Commonscat Multimedia: Cascading Style
SheetsWikibooks Libros y manuales: Hojas de estilo CSS
IdentificadoresBNE: XX550325BNF: 13739222f (data)GND: 4467617-7LCCN:
sh2001004461Microsoft Academic: 93213560
Categorías: Diseño webLenguajes de marcadoEstándares del World Wide Web
ConsortiumIntroducciones relacionadas a la ciencia de la computación de 1996
Menú de navegación
No has accedido
Discusión
Contribuciones
Crear una cuenta
Acceder
ArtículoDiscusión
LeerEditarVer historial
Buscar
Buscar en Wikipedia
Portada
Portal de la comunidad
Actualidad
Cambios recientes
Páginas nuevas
Página aleatoria
Ayuda
Donaciones
Notificar un error
Herramientas
Lo que enlaza aquí
Cambios en enlazadas
Subir archivo
Páginas especiales
Enlace permanente
Información de la página
Citar esta página
Elemento de Wikidata
Imprimir/exportar
Crear un libro
Descargar como PDF
Versión para imprimir
En otros proyectos
Wikimedia Commons
Wikilibros

En otros idiomas
‫العربية‬
English
Français
Bahasa Indonesia
Bahasa Melayu
Português
Русский
‫اردو‬
中文
80 más
Editar enlaces
Esta página se editó por última vez el 16 ago 2021 a las 23:04.
El texto está disponible bajo la Licencia Creative Commons Atribución Compartir
Igual 3.0; pueden aplicarse cláusulas adicionales. Al usar este sitio, usted acepta
nuestros términos de uso y nuestra política de privacidad.
Wikipedia® es una marca registrada de la Fundación Wikimedia, Inc., una
organización sin ánimo de lucro.
Política de privacidadAcerca de WikipediaLimitación de responsabilidadVersión para
móvilesDesarrolladoresEstadísticasDeclaración de cookiesWikimedia FoundationPowered
by MediaWiki