Tot Sobre el CSS
CSS són les sigles en anglès de Cascading Style Sheets, que significa «fulles de esilo en cascada». És un llenguatge que s’usa per a estilitzar elements escrits en un llenguatge de marcat com a HTML.
CSS va ser desenvolupat per W3C (World Wide Web Consortium) en 1996 per una raó molt senzilla. HTML no va ser dissenyat per a tenir etiquetes que ajudin a formatar la pàgina. Està fet només per a escriure el marcat per al lloc.
Es van incloure etiquetes com <font> en HTML versió 3.2, i això els va causar molts problemes als desenvolupadors. Atès que els llocs web tenien diferents fonts, fons de colors i estils, el procés de reescriure el codi va ser llarg, dolorós i costós. Per tant, CSS va ser creat per W3C per a resoldre aquest problema.
La relació entre HTML i CSS és molt fort. Atès que HTML és un llenguatge de marcat (és a dir, constitueix la base d’un lloc) i CSS emfatitza l’estil (tota la part estètica d’un lloc web), van de bracet.
CSS no és tècnicament una necessitat, però no voldràs tenir un lloc que només tingui HTML, ja que es veuria completament despullat.
Especificacions CSS
Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) es defineixen en extensos documents denominats especificacions, publicats per organitzacions d’estàndards (com W3C (en-US), WHATWG, ECMA (en-US) o Khronos (en-US)) que defineixen amb precisió com se suposa que han de comportar-se aquestes tecnologies.
El cas de CSS no és diferent: ho desenvolupa un grup del W3C anomenat CSS Working Group. Aquest grup està compost per representants de proveïdors de navegadors i altres companyies interessades en CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents i no estan vinculats a cap organització.
El CSS Working Group desenvolupa o especifica característiques noves del CSS. Algunes vegades ho fan perquè un navegador en particular està interessat en alguna capacitat, unes altres perquè els dissenyadors i desenvolupadors web demanen una característica, i altres perquè el grup ha identificat un requisit. El CSS està en desenvolupament constant i tots els dies presenta noves característiques disponibles. No obstant això, un element clau sobre el CSS és que tota la comunitat s’esforça molt a no canviar mai res que pugui perjudicar els llocs web antics. Un lloc web creat l’any 2000, que utilitza el poc CSS disponible que hi havia en aquest moment, encara hauria de poder utilitzar-se avui dia!
Com a nouvingut al CSS, és probable que trobis les especificacions aclaparadores: estan destinades al fet que els enginyers les utilitzin per a implementar suport de les seves característiques en els agents d’usuari en què treballen, no perquè ho llegeixin els desenvolupadors web per a comprendre el CSS. Molts desenvolupadors experimentats preferiran consultar la documentació disponible en MDN o altres tutorials. No obstant això, val la pena saber que existeixen i comprendre la relació que hi ha entre el CSS que estàs utilitzant, el suport del navegador (veure més a baix) i les especificacions.
¿Com funciona CSS?
CSS utilitza una sintaxi simple basada en l’anglès amb un conjunt de regles que la governen. Com esmentem anteriorment, HTML no va ser fet amb la intenció d’utilitzar elements d’estil, sinó només per al marcat de la pàgina. Va ser creat simplement per a descriure el contingut. Per exemple: <p>Això és un paràgraf.</p>.
Però, com li apliques un estil al paràgraf? L’estructura de sintaxi CSS és bastant simple. Compta amb un selector i un bloc de declaració. Primer selecciones un element i després declares el que vols fer amb ell. Bastant senzill, veritat?
No obstant això, hi ha regles que has de recordar. Les regles de l’estructura són bastant simples, així que no et preocupis.
El selector apunta a l’element HTML que desitges estilitzar. El bloc de declaració conté una o més declaracions separades per punt i coma.
Cada declaració inclou un nom de propietat CSS i un valor, separats per dos punts. Una declaració CSS sempre acaba amb un punt i coma, i els blocs de declaració estan envoltats per claus.
¿Per a què serveix el CSS?
Com hem esmentat, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris: com es dissenyen, compaginen, etc.
Un document sol ser un arxiu de text estructurat amb un llenguatge de marcat: HTML és el més comú, però també existeixen uns altres com SVG o XML.
Presentar un document a un usuari significa convertir-lo en un formulari que el públic pugui utilitzar. Els navegadors, com per exemple Firefox, Chrome o Edge (en-US), estan dissenyats per a presentar documents visualment en una pantalla d’ordinador, un projector o una impressora.
El CSS es pot usar per a estils de text molt bàsics com, per exemple, canviar el color i la grandària dels encapçalats i els enllaços. Es pot utilitzar per a crear un disseny, com podria ser convertir una columna de text en una composició (en-US) amb una àrea de contingut principal i una barra lateral per a informació relacionada. Fins i tot es pot usar per a crear efectes d’animació. Dona un cop d’ull als enllaços d’aquest paràgraf per a veure exemples específics.
Mòduls CSS
Com hi ha tantes coses que es podrien dissenyar usant CSS, el llenguatge es divideix en mòduls. Veuràs referències a aquests mòduls a mesura que exploris en MDN i observaràs que moltes de les pàgines de documentació estan organitzades entorn d’un mòdul en particular. Per exemple, pots donar un cop d’ull a la referència MDN del mòdul Fons i vores per a esbrinar quin és el seu propòsit, quines altres propietats i característiques diferents conté. També trobaràs enllaços a l’especificació CSS que defineix la tecnologia (veure més a baix).
En aquesta fase, no has de preocupar-te massa sobre com s’estructura el CSS, no obstant això, pot facilitar-te la cerca d’informació si, per exemple, saps que és probable que una certa propietat es trobi entre altres similars i, per tant, en la mateixa especificació.
Tornem al mòdul de Fons i vores per a un exemple específic: pots pensar que té lògica que les propietats background-color i border-color es defineixin en aquest mòdul. I portes tota la raó.
Avantatges de CSS
La diferència entre un lloc web que implementa CSS i un que no, és enorme i definitivament es nota.
Potser has vist algun lloc web que no es pot carregar per complet i té un fons blanc amb la major part del text en blau i negre. Això significa que la part CSS del lloc no es va carregar correctament o no existeix.
Així és com es veu un lloc amb sol HTML, i crec que estaràs d’acord amb mi que no llueix molt bé.
Abans de CSS, tot l’estil havia d’incloure’s en el marcat HTML. Això significa que calia descriure per separat tots els fons, els colors de font, les alineacions, etc.
CSS permet estilitzar tot en un arxiu diferent, creant l’estil allí i després integrant l’arxiu CSS sobre el marcat HTML. Això fa que el marcat HTML sigui molt més net i fàcil de mantenir.
En resum, amb CSS no has de descriure repetidament com es veuen els elements individuals. Això estalvia temps, fa el codi més curt i menys propens a errors.
CSS et permet tenir múltiples estils en una pàgina HTML, i això fa que les possibilitats de personalització siguin gairebé infinites. Avui dia, això s’està tornant una necessitat més que una cosa bàsica.
Programador de videojocs, Creador de pàgines Web, Desenvolupador d’aplicacions per Android.
