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 (

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