Kapittel 3.2 - Skriftstørrelse og farger

Ved hjelp av HTML flagget <font> kan man definere skrifttype (face=), farge (color=) og størrelse (size=), hvor size er det dårligste av dem. <font size=x> lar deg definere skriftstørrelse fra 1 til 7. Problemet er at det er umulig å vite hva <font size="4"> betyr, ettersom moderne nettlesere lar brukerne definere sine egne standard størrelser. Det er her CSS kommer inn i bildet med en passende løsning.

<p style="font-size: 12pt; font-family: palatino, arial;"> 
   Denne teksten vises i 12 punkters Palatino eller Arial. 
   Mens denne vises i 
   <span style="font-size:26pt;">26 punkters Times</span></p> 

Denne teksten vises i 12 punters Palatino eller Arial. Mens denne vises i 26 punkters Palatino eller Arial

Det er et par ting som er verd å ta en nærmere titt på i eksempelet overfor. For det første viser eksempelet godt hvordan CSS fungere som et "fossefall". All teksten innenfor <p>-flagget vises som 12 punkters palatino eller Arial, mens teksten innenfor <span>-flagget har en størrelse på 26 punkter. Ettersom <span>-flagget ikke definerer noen skrifttype "arver" den skrifttypen til flagget den befinner seg i, i dette tilfelle <p>-flagget.

En annen mulighet er å definere alle P flagg, eller en egen klasse innenfor p flagget, til 12 punkters Palatino eller Arial tekst ved å plassere følgende kode innenfor et <style> flagg:

<style> 
   p 
   { 
      font-size: 12pt; 
      font-family: palatino, arial; 
   } 
   p.normal 
   { 
      font-size: 12pt; 
      font-family: palatino, arial; 
   } 
</style> 

Koden overfor kan dermed kortes ned noe:

<p class="normal"> 
   Denne teksten vises i 12 punkters Palatino eller Arial. 
   Mens denne vises i 
   <span style="font-size: 26pt;">26 punkters Times</span></p>