CSS (siglas en inglés de Cascading Style Sheets; en español: «hojas de estilo en cascada») es un lenguaje informático especializado en definir y cohesionar la presentación de un documento escrito en un lenguaje de marcado como HTML o XML; por ello, puede ser aplicado a cualquier documento etiquetado en XHTML, SVG, XUL, RSS, etcétera. Junto con el propio HTML y JavaScript, CSS está en la base de la tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para aplicaciones móviles.
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. 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.RFC 2318. IETF. (marzo de 1998) El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
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
Los selectores declaran qué etiquetas se 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 CSSde apariciónE un elemento de tipo E 1E:link un elemento E que es un enlace que no ha sido visitado (:link) o ya fue visitado (:visited) 1E:active un elemento E que está realizando cierta acción por parte del usuario 1E::first-line la primera línea formateada de un elemento E 1E::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" 1E.warning un elemento E que pertenece a la clase "warning" 1E#myid un elemento E cuyo id sea "myid" 1E F un elemento F descendiente de un elemento E 1* cualquier elemento 2E[foo] un elemento E con un atributo "foo" 2E[foo="bar"] un elemento E cuyo atributo "foo" tiene un valor exacto de "bar" 2E[foo~="bar"] un elemento E cuyo atributo "foo" tiene una lista de valores separados por espacios, y uno de ellos es "bar" 2E:first-child el primer hijo de un elemento E 2E:lang(eo) un elemento E cuyo idioma esté especificado en "eo" 2E::before contenido generado antes del contenido del elemento E 2E::after contenido generado después del contenido del elemento E 2E > F un elemento F hijo de un elemento E 2E + F un elemento E inmediatamente sucedido de un elemento F 2E[foo^="bar"] un elemento E cuyo atributo "foo" tenga un valor que comience exactamente con la cadena "bar" 3E[foo$="bar"] un elemento E cuyo atributo "foo" tenga un valor que finalice exactamente con la cadena "bar" 3E[foo*="bar"] un elemento E cuyo atributo "foo" tenga un valor que contenga la subcadena "bar" 3E:root un elemento E en la raíz del documento 3E:nth-child(n) un elemento E, el n-esimo hijo de este 3E:nth-last-child(n) un elemento E, el n-esimo hijo de este, contando desde el último hijo 3E:nth-of-type(n) un elemento E, el n-esimo hijo de este, contando solo los del mismo tipo que el padre 3E: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 3E:last-child el último hijo de un elemento E 3E:first-of-type un elemento E, los primeros hermanos de su tipo 3E:last-of-type un elemento E, los últimos hermanos de su tipo 3E:only-child el único hijo del elemento E 3E:only-of-type el único hermano del elemento E 3E:empty un elemento E que no posea hijos (incluyendo nodos de texto) 3E:target un elemento E de enlace siendo pulsado 3E:enabled un elemento E de interfaz de usuario habilitado 3E:disabled un elemento E de interfaz de usuario deshabilitado 3E:checked un elemento E de interfaz de usuario marcado (válido para los checkboxs y los radiobuttons) 3E:not(s) un elemento E que no coincide con el selector simple s 3E ~ 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:blue;"> 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 sobrescritas, como las hojas de estilos del agente de usuario. Este proceso es llamado cascading, o cascada.