Cascading Style Sheets (CSS, en català: Fulls d'Estil en Cascada) és un llenguatge de fulls d'estil utilitzat per descriure la semàntica de presentació (l'aspecte i format) d'un document escrit en un llenguatge de marques. La seva aplicació més comuna és dissenyar pàgines web escrites en HTML i XHTML, però el llenguatge també pot ser aplicat a qualsevol classe de document XML, incloent-hi SVG i XUL.
CSS està dissenyat principalment per permetre la separació de contingut del document (escrit en HTML o un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, colors, i fonts. Aquesta separació pot millorar l'accessibilitat al contingut, proporcionar més flexibilitat i control en l'especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules). CSS també pot deixar la mateixa pàgina de marques ser presentada en estils diferents mitjançant mètodes de render diferents, com a la pantalla, en impressió, per veu (quan és llegida en veu alta per un navegador amb lector o pantalla lectora) i amb mecanismes tàctils amb sistemes Braille. Mentre que l'autor d'un document típicament associa els documents amb un full d'estil CSS, els lectors poden utilitzar un full d'estil diferent, potser un al seu propi ordinador, per invalidar aquell que l'autor ha especificat.
CSS especifica un esquema de prioritat per determinar quines regles d'estil s'apliquen si més d'una regla està associada amb un element en particular. En aquests fulls anomentas en cascada, es calculen prioritats o pesos i s'assignen a regles, de manera que els resultats siguin previsibles.
Les especificacions CSS són mantingudes pel World Wide Web Consortium (W3C). El tipus de mitja d'Internet (Tipus MIME) text/css és registrat per a l'ús amb CSS per (Març de 1998).
Els tres tipus d'estils CSS proporciona tres camins diferents per aplicar les regles d'estil a una pàgina Web:
1. Un full d'estil extern,
que és un full d'estil que està emmagatzemat en un arxiu diferent a l'arxiu on s'emmagatzema el codi HTML de la pàgina web. Aquesta és la manera de programar més potent, perquè separa completament les regles de format per la pàgina HTML de l'estructura bàsica de la pàgina.
2. Un full d'estil intern, que és un full d'estil que està incrustat dins d'un document HTML. (Va a la dreta de l'element <head>). D'aquesta manera s'obté el benefici de separar la informació de l'estil, del codi HTML pròpiament dit. Es pot optar per copiar el full d'estil incrustat d'una pàgina a una altra, (aquesta possibilitat és difícil d'executar si es vol per guardar les còpies sincronitzades). En general, l'única vegada que es fa servir un full d'estil intern, és quan es vol proporcionar alguna característica a una pàgina web en un simple fitxer, per exemple, si s'està enviant alguna cosa a la pàgina web.
3. Un estil en línia, que és un mètode per insertar el llenguatge d'estil de pàgina directament, dins d'una etiqueta HTML. Aquesta manera de fer no és totalment adequada. L'inserir la descripció del format dins del document de la pàgina web a nivell de codi es converteix en una feina llarga, costosa i poc elegant per resoldre el problema de la programació de la pàgina. Aquest mode de treball es podria usar de manera ocasional si es pretén aplicar un format amb pressa, ràpidament. No és tot senzill o estructurat com hauria de ser, però funciona. Aquest és el mètode recomanat per maquetar correus electrònics en HTML.
Sintaxi CSS té una sintaxi simple i utilitza un cert nombre de paraules clau angleses per especificar els noms de diverses propietats d'estil.
Un full d'estil consta d'una llista de regles. Cada regla o conjunt de regles consta d'un o més selectors i un bloc de declaracions. Un bloc de declaració consta d'una llista de declaracions entre claus d'ator. Cada declaració mateixa consta d'una propietat, dos punts (:), un valor, seguit de semidos punts (;).
En CSS, els selectors s'utilitzen per declarar a quins dels elements de marca s'aplica un estil. Els seleccionadors poden afectar tots els elements d'un tipus específic, o només aquells elements que tenen un cert atribut; es pot afectar elements depenent de com es posen relativament els uns dels altres en el codi de marcatge, o damunt com es nien dins del moder d'objectes del document.
Les pseudoclasses són una altra forma d'especificació utilitzada en CSS per identificar elements de marca, i en alguns casos, accions d'usuari específiques a què s'aplica un bloc de declaracions particular. Un exemple sovint utilitzat és la pseudoclasse de :hover que aplica un estil a' només quan l'usuari 'assenyala' l'element visible, normalment mantenint el cursor sobre l'element. S'afegeix a un seleccionador com en a:hover o #elementid:hover. Altres pseudoclasses i els pseudo-elements són, per exemple, :first-line, :visited o :before. Una pseudoclasse especial és :lang(c), "c".
Una pseudoclasse selecciona elements sencers, com :link o :visited, mentre que un pseudo-element fa una selecció que pot constar d'elements parcials, com :first-line o :first-letter.
Els seleccionadors es poden combinar d'altres maneres també, especialment en CSS 2.1, per aconseguir especificitat i flexibilitat més gran.see the complete definition of selectors at the W3C Web site
Aquí hi ha un exemple que resumeix les regles de dalt:
selector [, selector2, ...][:pseudo-classe] {propietat: valor; [propietat2: valor2; ...] } /* comentari */
Ús Abans de CSS, gairebé tots els atributs de presentació de documents de HTML es contenien dins del marcatge de HTML; tots els colors de font, estils de fons, alineacions d'element, vores i mides s'havien de descriure explícitament, sovint repetidament, dins del HTML. CSS permet als autors moure molta d'aquella informació a un full d'estil separat que fa el marcatge de HTML considerablement més simple.
Els encapçalaments (elements de h1), subencapçalaments (h2), sub-subencapçalaments (h3), etc., es defineixen estructuralment utilitzant HTML. En impressió i a la pantalla, l'elecció de font, mida, color i èmfasi per a aquests elements és presentacional.
Abans de CSS, els autors de documents que volien assignar unes característiques tipogràfiques a, per exemple, tots els encapçalaments h2 havien d'utilitzar l'etiqueta font de HTML i altres elements presentacionals per a cada instància d'aquell tipus d'encapçalament. Les marques de presentació addicionals en HTML feia més complexos els documents, i generalment més difícils de mantenir. En CSS, la presentació és separada de l'estructura. En impressió, CSS pot definir color, font, alineació de text, mida, vores, espaiat, disposició moltes altres característiques tipográfiques.Ho pot fer independentment per pantalles i vistes impreses. CSS també defineix estils no visuals com la velocitat i èmfasi amb què el text es llegeix en veu alta per lectors de text auditius. El W3C ara considera que els avantatges de CSS per definir tots els aspectes de la presentació de pàgines de HTML són superiors a uns altres mètodes. Per això, ha declarat obsolet l'ús de tot el marcatge HTML de presentació original.
Fonts La informació CSS pot ser proporcionada per diverses fonts. La informació d'estil de CSS es pot adjuntar com a document separat o ser dins el document HTML. Es poden importar múltiples fulls d'estil. Diferents estils es poden aplicar depenent del mecanisme de sortida que s'utilitza; per exemple, la versió de pantalla pot ser bastant diferent de la versió impresa, de manera que els autors puguin fer a mida la presentació apropiadament per a cada medi.
Esquema de prioritat per a fonts CSS (de prioritat més alta a més baixa):
Estils d'autor (proporcionat per l'autor de la pàgina web): Estils dins del document HTML, informació d'estil d'un únic element, especificat utilitzant l'atribut "style" Estils encastats, blocs d'informació CSS dins del mateix document HTML Fulls d'estil extern, i.e., un arxiu CSS separat al que es fa referència des del document Estil d'usuari: Un arxiu CSS local que l'usuari especifica amb una opció de navegador, que actua com un invalidador aplicat a tots els documents. Estil d'agent d'usuari Estils per defecte aplicats per l'agent usuari, i.e., les opcions per defecte del navegador per a la presentació d'elements.
El full d'estil amb la prioritat més alta controla com es mostra el contingut. Les declaracions no posades en la font de prioritat més alta són passades per una font de prioritat més baixa com l'estil d'agent usuari. Aquest procés s'anomena cascading.
Un dels objectius de CSS és també permetre control més gran dels usuaris sobre la presentació. Algú que troba els encapçalaments en cursiva vermells difícils de llegir pot aplicar un full d'estil diferent. Depenent del seu navegador i el lloc web, un usuari pot triar entre diversos fulls d'estil proporcionats pels dissenyadors, pot treure tot l'estil afegit i veure el lloc emprant l'estil per defecte del navegador, o pot invalidar només l'estil d'encapçalament en cursiva vermell sense canviar uns altres atributs.
Arxiu highlightheaders.css que conté:
h1 { color: white; background-color: orange !important; } h2 { color: white; background-color: green !important; }
Tal arxiu s'emmagatzema localment i és aplicable si s'ha especificat en les opcions de navegador. "!important" significa que prevalgui sobre les especificacions dels autors.
Avantatges d'utilitzar els fulls d'estil Els avantatges d'utilitzar CSS (o un altre llenguatge d'estil) són:
Control centralitzat de la presentació d'un lloc web complet amb el qual s'agilita de forma considerable la seva actualització. Els navegadors ens permeten als usuaris especificar la seva pròpia fulla d'estil local que serà aplicada a un lloc web, amb el qual augmenta considerablement l'accessibilitat. Per exemple, persones amb deficiències visuals poden configurar la seva pròpia fulla d'estil per augmentar la grandària del text o remarcar més els enllaços. Una pàgina pot disposar de diferents fulles d'estil segons el dispositiu que la mostri o fins i tot a elecció de l'usuari. Per exemple, per ser impresa, mostrada en un dispositiu mòbil, o ser "llegida" per un sintetitzador de veu. El document HTML en si mateix és més clar d'entendre i s'aconsegueix reduir considerablement la seva grandària (sempre que no s'utilitzi estil en línia).
Història Els fulls d'estil han existit d'una forma o altra des dels començaments de SGML durant els anys 1970. Els Fulls d'Estil en Cascada es desenvolupaven com a mitjà per crear una aproximació consistent a proporcionar informació d'estil per a documents web.
A mesura que HTML augmentava, anava afegint una varietat més àmplia de capacitats estilístiques per satisfer les demandes de desenvolupadors web. Aquesta evolució donava més control sobre l'aspecte dels llocs però al cost que HTML es tornés més complex d'escriure i de mantenir per als dissenyadors. Les diferències entre navegadors web feien difícil la consistència de l'aparença dels llocs web, i els usuaris tenien menys control sobre com el contingut web era mostrat.