Cascading style sheets har fått navnet sitt fordi stil definisjonene fungerer som et "fossefall", fra øverst på siden og til flagget det benyttes i. CSS ble utviklet først og fremst for å gi ekstra fin kontroll over utseendet og design på nettsider.
Et godt eksempel på hvordan man kan benytte CSS er hvis man ønsker å skrive ut et paragraf med en enkel ramme, 2 centimeters marg til høyre og venstre og linjeavstand på 1,5. Dersom du ønser å gjøre dette ved hjelp av standard HTML, må du opprette en tabell med tre kollonner, legge på en ramme på midterste kolonne, samtidig som kolonnene på kantene kun er 2cm tomme celler. Likevel oppstår det problemer med linjeavstanden. Dette kompliserte problemet kan løser rimelig enkelt ved hjelp av følgende CSS kode:
<p style="margin: 2cm; border: 1px solid; line-height:150%;">
Det finnes to viktige tillegg som CSS tilfører HTML: <div> og <span>. Begge flaggene lar deg definere CSS formateringer til innholdet, men forskjellen er at <div> inkluderer en ny linje før og etter flagget (på samme måte som <p>), men span ikke inkluderer noe linjeskift. Tommelfinger regelen er at man benytter <div> når man ønsker å formatere store mengder data, mens man benytter <span> dersom man kun ønsker å formatere enkle linjer eller ord.
<div style="color: red">
<span style="color: blue">Span</span> benyttes for å formatere enkelte
<span style="color: green">ord eller setninger</span>, mens div benyttes
til å formatere ett eller flere paragrafer.
</div>
Som har følgende utseendet i en nettleser:
Eksempelet overfor viser godt "fossefall" egenskapene til CSS. Teksten til hele dokumentet er satt til sort (definert i <body>-flagget). Videre er teksten i avsnittet definert som rød ved hjelp av <div>, mens enkelte deler av teksten er definert som blå og grønn ved hjelp av <span>.
This page
Other pages
Account
Administration