Els fulls d'estil en cascada (Cascading Style Sheets o CSS) són un llenguatge formal que permet definir la disposició i presentació d'una pàgina web. Per tant, els fulls d'estil permeten canviar el disseny de qualsevol pàgina web sense haver de modificar el seu codi HTML o PHP.

Una pàgina web està composada per peces o elements. Ara bé, no totes les pàgines contenen les mateixes parts. Per exemple, a Moodle, aquestes parts o elements inclouen: el nucli, formularis, la capçalera, el peu, l'administració, els blocs, les bitàcoles, el calendari, els cursos, la documentació, les qualificacions, l'autenticació, els missatges, les anotacions, les preguntes, les pestanyes, les etiquetes, els usuaris i molts més mòduls.

Per permetre l'edició dels seus estils, els elements de cada pàgina web poden tenir associats diferents tipus de selectors.

Identifiquen un determinat element del document XHTML, com ara el paràgraf (p), la capçalera principal (h1), els enllaços (a) o les imatges (img).

  <h1>Introducció</p>

  h1 {
   color: red;
  }

A l'exemple anterior, el selector XHTML h1 s'associarà a tots els elements <h1> (text de capçalera principal o de primer nivell) del document. Per tant, segons la regla anterior, totes les capçaleres de primer nivell, és a dir, tots els elements <h1> del document, apareixeran amb el text de color vermell (color: red;).

Especifiquen un determinat element del document que conté l'atribut id. Per exemple, al document XHTML següent:

  <h1 id="principal">Introducció</p>

l'etiqueta <h1> conté l'atribut id de valor “principal”. L'especificació d'aquest selector al full d'estil es correspondria amb:

  #principal {  
    color: green;  
  }

Com es pot veure, davant del valor de l'atribut id (en aquest cas principal), cal afegir el caràcter # (Alt gr + 3). En aquest cas, el resultat serà que els elements que tinguin l'atribut id=“principal” apareixeran amb el text de color verd (color: green;).

Especifiquen un determinat element del document que conté l'atribut class. Per exemple:

  <p class="ciutat">Girona</p>

  .ciutat {
    color: red;
  }

Al document anterior l'etiqueta p (paràgraf) conté l'atribut class que té per valor “ciutat” al qual se li vol aplicar un determinat estil. En aquest cas, per definir-ho al full d'estil caldrà afegir el caràcter . (punt) al davant del nom de la classe (.ciutat).

A més, es poden combinar classes diferents en un mateix element XHTML:

  <p class="ciutat comarca">Girona</p>

i aplicar a cadascuna una regla diferent, com ara el text de color vermell pels elements que tinguin la classe ciutat associada i la mida de la lletra (font-size: 20px) pels que tinguin la classe comarca:

  .ciutat {  
    color: red;  
  }  
 
  .comarca {  
    font-size: 20px;  
  }

És possible niuar diferents selectors amb el propòsit d'associar una regla CSS a un element específic del document XHTML. Per aconseguir-ho és necessari separar cada selector amb un espai.

  #informacio p.exemple strong {
    color: red;
  }
  #informacio p.exemple {
    color: dark grey;
  }

A aquest exemple, els selectors niuats són #informacio, p.exemple i strong. Per ordre de jerarquia, el primer element (#informació) conté al següent (p.exemple), i així successivament fins l'últim selector.

Com s'aplica aquesta regla? Al cas anterior, tot el text que es trobi entre les etiquetes <strong>…</strong> que estigui a un paràgraf amb la classe exemple (<p class=“exemple”>) que, alhora, aparegui dins d'una capa que tingui informació com a identificador (<div id=“informacio”>), es mostrarà de color vermell. Així ,per exemple, el text “una expressió” del codi XHTML següent apareixerà de color vermell mentre que “2+2 és” es mostrarà en gris fosc:

  <div id="informacio">
    <p class="exemple">2+2 és <strong>una expressió</strong></p>  
  </div>

• Tutorial CSS del W3Schools. Tutorial, en anglès, que explica pas a pas tots els aspectes relacionats amb els fulls d'estil en cascada. A més, conté exemples en línia i proves d'autoavaluació.

• XHTML i CSS. Introducció als estàndards i accessibilitat web. Material d'autoformació del Departament d'Educació de Catalunya, disponible en català, que conté algunes pràctiques amb conceptes bàsics sobre CSS (per exemple la pràctica 4 del mòdul 2).

• Zen Garden. Portal de referència dins del món del disseny que conté exemples d'ús dels fulls d'estil en cascada.

• Firebug és una extensió pel navegador Mozilla Firefox que inclou utilitats per inspeccionar els estils CSS de qualsevol pàgina web i modificar-los sobre la marxa. Aquesta pàgina del curs D27 anterior i aquesta altra pàgina de Moodle docs (en anglès) contenen més informació.

• Web Developer Toolbar per Mozilla Firefox és una altra extensió amb funcionalitats similars a l'anterior. Aquesta pàgina de la documentació de Moodle inclou més informació sobre l'ús d'aquesta extensió.

• Clear Cache Button és una extensió de Mozilla Firefox que facilita la neteja de la memòria cau i l'historial del navegador web (entre d'altres) ja que permet afegir un botó per fer més accessibles aquestes funcionalitats.

• Fonaments dels temes
• CSS (en anglès).