Què és el CSS?

This translation is in progress.

Els fulls d'estil en cascada (CSS o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i amb HTML (mira Introducció a l'HTML).
Objectiu: Aprendre què és el CSS.

Al mòdul Introducció a l'HTML exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.

Els estils predeterminats que utilitza un navegador

No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.

Per a què serveix el CSS?

Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.

Un document sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: HTML és el més comú, però també en pots trobar d'altres com ara SVG or XML.

Presentar un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els navegadors com Firefox, Chrome o Edge estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.

Nota: De vegades, un navegador, se l'anomena agent d'usuari, que significa bàsicament que un programa informàtic representa una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no és l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.

El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el color i la mida de la lletra dels títols i els enllaços. Es pot utilitzar per a crear el disseny de la pàgina web. Per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com l’animació. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.

La sintaxi CSS

El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».

El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:

h1 {
    color: red;
    font-size: 5em;
}

La regla s’obre amb un selector, que selecciona l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 (<h1>).

Tot seguit, hi ha un conjunt de claus { }, i a dins hi haurà una o més declaracions, que prenen la forma de parells propietat i valor. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.

Abans de la clau hi ha la propietat, i després, el valor. Les propietats CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat color, que pot prendre diversos valors de color. També hi ha la propietat font-size. Aquesta propietat pot prendre diverses unitats de mida com a valor.

Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.

Nota: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de referències CSS de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn css-feature-name» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».

Mòduls CSS

Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en mòduls. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots fer una ullada a la referència MDN en el mòdul Fons i vores per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia.

En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es troba entre altres coses similars i, probablement, en la mateixa especificació. 

Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats background-color i border-color es defineixin en aquest mòdul. I tens raó.

Especificacions CSS

Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com W3C, WHATWG, ECMA o Khronos) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.

El CSS no és diferent: el desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està format per representants de venedors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.

El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.

Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar suport per a les funcions d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.

Suport dels navegadors

Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article Com funciona el CSS. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.

El que segueix és el gràfic de dades de compatibilitat per a la propietat font-family de CSS.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
system-uiChrome Full support 56Edge No support NoFirefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Què segueix

Ara que coneixes què és el CSS, passem a Començar amb el CSS, on pots començar a escriure algun codi CSS.

En aquest mòdul

  1. Què és el el CSS
  2. Primers passos amb el CSS
  3. Com s'estructura el CSS
  4. Com funciona el CSS
  5. Aplica els teus nous coneixements