Aplicar el CSS a l'HTML

Hi ha tres maneres d'aplicar el CSS a un document HTML:

1. estils en línia
2. estils incrustats
3. fulls d'estils externs

Tret que tingueu alguna raó molt bona per utilitzar un dels dos primers mètodes, us hauríeu de decidir sempre per la tercera opció. Aviat en veurem el motiu, que és molt obvi, però abans parlarem de les diferents opcions.

1. Estils en línia

Podeu aplicar estils a un element utilitzant l'atribut style

En aquest atribut enumereu totes les propietats del CSS i els seus valors (cada parella de propietat/valor se separa de les altres amb un signe de punt i coma, i cada propietat se separa del seu valor dintre de la parella amb un signe de dos punts). Aquesta és la manera de definir estils amb CSS.

L'avantatge dels estils inserits és que el navegador es veurà obligat a utilitzar aquests ajustos. Qualsevol altre estil definit amb altres fulls d'estils, o fins i tot els incrustats a l'element head del document, quedaran invalidats per aquests estils.

El gran problema dels estils inserits és que fan que el manteniment sigui molt més difícil del que hauria de ser. L'ús del CSS permet separar la presentació del document de la seva estructura, mentre que el que fan els estils inserits és precisament escampar regles de presentació per tot el document.


2. Estils incrustats

Els estils incrustats es col·loquen a l'element head del document en una etiqueta style.

L'avantatge dels estils incrustats és que no cal afegir un atribut style a cada paràgraf; els estils es poden aplicar a tots els paràgrafs amb una única definició. Això també vol dir que si heu de canviar l'aspecte de tots els paràgrafs podreu fer-ho intervenint en un únic lloc, tot i que això està limitat a un document;

Però què hauríeu de fer si volguéssiu definir alhora l'aspecte de tots el paràgrafs de tot un lloc web? Doncs utilitzar fulls d'estils externs.

3. Fulls d'estils externs

Els fulls d'estils externs permeten posar totes les definicions del CSS en un arxiu independent, guardar aquest arxiu amb l'extensió CSS i llavors aplicar-lo a tots els documents HTML amb un element link en el head del document.


Aquesta és la millor situació imaginable: Totes les definicions d'aspecte es troben en un únic arxiu, la qual cosa significa que podeu fer canvis a tot el lloc web només canviant un arxiu, i el navegador el pot carregar una vegada i llavors guardar-lo a la memòria cau per a tots els altres documents que hi fan referència, amb la qual cosa s'ha de descarregar una quantitat de dades menor.