Introducció als Fulls d'Estil (CSS)

Ja a la versió 4.0 de l'HTML es va començar a separar l'estructura d'un document del seu aspecte. L'HTML es reservava pel que s'havia dissenyat en un principi, per l'estructura, i per l'aspecte es crea un nou "llenguatge": Els Fulls d'Estil (CSS: Cascading Style Sheets). Tot i que els navegadors no complien amb l'estàndard complert, molt aviat es van veure els avantatges de fer servir fulls d'estil: Més control sobre posició, tipus de lletra, colors, imatges, ... que mai; recollir en un sol lloc el format i aspecte de tot un conjunt de pàgines web, compatibilitat fàcil entre diferents navegadors, codi més senzill i pàgines més petites (i, per tant, més ràpides de descarregar).

En aquest document es vol presentar aquest llenguatge, sense pretendre ser un tractat complert sobre el tema. Com molts altres temes en l'àmbit informàtic, s'aprenen fent-los servir. Els fulls d'estil són una eina potentíssima. Els límits són més qüestió de la imaginació dels que els fan servir.

Pel tema dels fulls d'estil s'utilitzen especialment dues etiquetes HTML (a més de les que es fan servir normalment) i dos atributs. Les etiquetes son div i span. Totes dues serveixen per marcar des de on i fins a on va un fragment de document. Juntament amb els atributs class i id, ens permetran més tard definir l'aspecte i format d'aquest fragment.

Per exemple:

<div id="menu">
  <a href="index.html">Presentació</a><br />
  <a href="aficions.html">Aficions</a><br />
  <a href="amics.html">Amics</a><br />
  <a href="enllacos.html">Enllaços</a><br />
</div>

Després podem definir l'aspecte d'aquest fragment així:

#menu {
  border: thin solid red;
  color: maroon;
  background-color: #ADD8E6;
}

amb el que fariem que el "menu" tingués unes vores vermelles, text marró i fons blau clar.

A la pràctica, amb els fulls d'estil no fa falta gairebé cap altre atribut d'HTML que class i id. Només aquells atributs obligatoris a certes etiquetes (com src a img o href a les etiquetes a) o aquells que vulguem posar per que els navegadors que no entenen els fulls d'estil presentin la informació adequadament (com per exemple l'atribut border d'una table).

Normalment l'etiqueta div serveix per marcar blocs i span per marcar fragments continus. Els blocs tenen una amplada, unes vores, uns marges, ... mentre que els fragments continus formen part d'un flux de dades. Altres exemples d'etiquetes de bloc son h1, p i table. Exemples d'etiquetes continues són strong, a, code, ... Tot i que amb fulls d'estil es pot canviar el comportament d'aquestes etiquetes.

El primer lloc on es poden col·locar atributs d'estil es dins una mateixa etiqueta HTML, amb l'atribut HTML style.

Per exemple:

<h1 style="color: darkblue; width: 100%;">Introducció als Fulls d'Estil (CSS)</h1>

L'inconvenient d'aquesta col·locació és que ni el codi és senzill, ni separem gaire estructura de aspecte. En alguns casos no hi ha més remei que posar els estils a un atribut style, però en general, no és aconsellable fer-ho.

Una altra possibilitat és posar-ho a una etiqueta style dins el head del document HTML.

Per exemple:

<style>
  h1 {
    color: darkblue; 
    width: 100%;
  }
</style>

Aquesta col·locació té l'avantatge de mantenir tots els atributs d'estil a un mateix lloc del document. El codi HTML és molt més net i l'estil és fàcil de modificar sense haver d'anar a l'HTML. El problema es que si volem el mateix estil a més d'una pàgina, hauríem de mantenir una etiqueta style a cada pàgina HTML, i modificar-les una per una.

La millor manera de definir un full d'estil és a un fitxer apart, per exemple anomenant-lo elmeu.css i amb aquest contingut:

h1 {
  color: darkblue; 
  width: 100%;
}
#menu {
  border: thin solid red;
  color: maroon;
  background-color: #ADD8E6;
}

Per que el navegador sàpiga que ha d'aplicar l'estil a la pàgina, hem d'incloure aquesta etiqueta al head de la pàgina:

<link rel="stylesheet" href="elmeu.css" type="text/css">

Aquesta última és la col·locació recomanada, ja que és la que ens permet treure més profit dels fulls d'estil.

Al full d'estil, podem definir l'aspecte d'una etiqueta:

h1 {
  color: darkblue; 
  width: 100%;
}

L'aspecte d'un fragment amb un determinat nom:

#menu {
  border: thin solid red;
  color: maroon;
  background-color: #ADD8E6;
}

L'aspecte d'un fragment d'un determinat tipus (per exemple, quan fem servir class="cita"):

.cita {
  font-style: italic;
  margin-left: 10%;
}

També podem definir un atribut per a més d'una etiqueta al mateix temps:

body, td, th {
  font-family: arial, sans-serif;
}

O l'aspecte d'una etiqueta segons el seu context (per exemple, un enllaç dins el fragment menu):

#menu a {
  text-decoration: none;
  font-weight: bold;
}

Per últim, hi ha un tipus de atribut que es diu pseudo-class, dels quals ara mateix els navegadors només entenen uns quants (el més utilitzat, :hover pels enllaços:

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

A molts atributs CSS hem d'especificar quantitats. Aquestes quantitats de vegades fan referència a la mida de la lletra, a la mida de la pàgina o a una mida exacta, absoluta. La següent taula recull els diferents tipus de dades que ens podem trobar als fulls d'estil.

Tipus de dada		Significat	Exemple
Longitut	em	amplada d'una "m"	margin-left: 1.5em
	ex	amplada d'una "x"	padding: 2ex
	px	píxel	font-size: 20px
	in	polzada (2,54 cm)	margin: 0.25in
	cm	centímetre	margin: 2.5cm 3cm
	mm	milímetre	margin: 25mm
	pt	punt (com a les mides de lletra)	font-size: 12pt
	pc	pica (una altra mida de lletra)	font-size: 18pc
Percentatge		% respecte al bloc on es trobi l'etiqueta	font-size: 200%
Color	#RGB	components vermell, vert i blau del color en hexadecimal i de 0 a 15	color: #FE0
	#RRGGBB	components vermell, vert i blau del color en hexadecimal i de 0 a 255	color: #F7E403
	(R,G,B)	components vermell, vert i blau del color en decimal i de 0 a 255	color: (200, 150, 25)
	(R%,G%,B%)	components vermell, vert i blau del color en percentatge	color: (100%, 45%, 5%)
	color	nom predefinit del color	color: darkblue
(URL)		URL on trobar el fitxer	list-item-image: url(imatges/boleta.gif)

Els blocs a una pàgina web tenen marges (margin), vores (border) i farcit (padding) per tots quatre costats: a dalt (top), dreta (right), a baix (bottom) i esquerra (left). Això pot ser una mica confós al principi. Aquesta imatge il·lustra què és cada cosa:

El contingut (content) és el que hi posem dins el bloc. Al voltant té el padding, a continuació les vores i finalment els marges. Si definim un color de fons, aquest només arribarà fins les vores.

En aquest apartat es llista la majoria d'atributs definits a la versió 1 de les CSS (CSS1). Hi ha una segona versió que encara no suporten completament els navegadors (CSS2), de la qual s'inclouen també alguns; i hi ha una versió 3 (CSS3) en desenvolupament.

Atributs de tipus de lletra

Atributs de color i fons

Atributs de text

Atributs de capsa/bloc

Atributs de classificació

Pseudo-classes

Aquí no hi són tots els atributs possibles, però si la majoria dels que mai utilitzaràs. Experimenta i pràctica i dominaràs el tema dels fulls d'estil!

• Especificació CSS1 (en castellà). Avís: Molt críptica.
• Fulls d'estil en Cascada a la Wikipedia (en castellà)
• Exemples de diversos fulls d'estil aplicats al mateix HTML
• Wiki de css-discutio - Una referencia molt útil (en anglès)