Secció 1: Primeres passes

3. Associar style sheets a un document HTML: Linking i Embedding

Veurem ara com associar els style sheets a un document HTML. Els dos mètodes bàsics són linking i embedding, que es podrien traduir com 'enllaçar' i 'incrustar', tot i que també és possible associar-los mitjançant l'at-rule @import, com veurem a l'apartat 4 'Tipus de sentència'. Una darrera possibilitat és el que s'anomena inline style sheets.

Linking

Consisteix a utilitzar l'element LINK a la secció HEAD del document HTML per indicar quin arxiu .css s'ha d'utilitzar. Aquest sistema té l'avantatge que permet la reutilització d'un mateix arxiu .css a diferents pàgines HTML. A més queda clar que per una banda hi ha el contingut (arxiu .html) i per l'altra la presentació (arxiu .css).

És possible associar més d'un arxiu .css, utilitzant un element LINK per cadascun.

La sintaxi per 'enllaçar' un style sheet és:

<HTML>
   <HEAD>
      <LINK rel="stylesheet" type="text/css" href=url>
   </HEAD>

Nota: la url pot ser absoluta (p.ex. "http://www.dense13.com"), o bé local ("arxius/nomArxiu.css"). Recorda que ha d'anar entre cometes dobles o simples. Si l'style sheet i la pàgina HTML estan al mateix directori, la url serà simplement el nom de l'arxiu .css.

Embedding

L'altra opció és "incrustar" l'style sheet en el mateix document HTML (també a la secció HEAD), és a dir, escriure-hi el codi directament. Fixa't que no hi haurà cap arxiu .css, tant l'style sheet com l'HTML estaran al mateix arxiu.

Això té diversos inconvenients, el principal dels quals és probablement que caldrà copiar l'style sheet a tots i cadascun dels documents que la facin servir. Qualsevol canvi posterior suposarà molt més temps i tindrà més probabilitat d'error que si només haguéssim de modificar un arxiu. De tota manera optar per una o altra possibilitat dependrà dels factors concrets de cada cas. Val la pena conèixer-les totes dues i saber triar amb coherència.

La sintaxi per "incrustar" un style sheet és:

<HTML>
   <HEAD>
      <STYLE type="text/css">
           ...
           aquí van totes les sentències
           ...
      </STYLE>
   </HEAD>

Inline style sheets

Una darrera alternativa és incloure el bloc de declaració en els elements HTML individuals. Estrictament parlant no assignem cap style sheet al document, sinó que definim l'estil d'un determinat element directament en el codi HTML.

Per fer-ho utilitzarem l'atribut style, que es pot aplicar a (gairebé) qualsevol element HTML, i com a valor escriurem el bloc de declaracions sense les claus { i }.

<P style="color:red;font-size:20px">
Un paràgraf de color vermell i mida 20px.</P>

Observa com el valor de l'atribut style respecta estrictament la sintaxi CSS.

Generalment jo no recomanaria aquest mètode, ja que no permet la reutilització de l'estil (si el volem aplicar a tots els paràgrafs l'haurem de copiar a cadascun d'ells), i a més contradiu el principi fonamental dels style sheets: separar contingut i presentació. De tota manera és un recurs útil en determinades situacions.

A continuació...
4. Tipus de sentència (pendent)