Lav et Cascading Style Sheets (CSS)

Det første man skal bruge er en fil med style sheet'et. Extension på denne type filer er .css, og det er ikke andet end en tekstfil på samme måde som html-filerne. Man kunne f.eks. kalde den styling.css.

Der er ingen krav til hvor man placerer filen. Det er hensigtsmæssigt at placere den i et directory til css-filer, men der er ikke noget formelt krav. Jeg bruger sædvanligvis et directory der hedder StyleSheets, men det bestemmer man selv. Det der er vigtigt er, at man ved hvor den ligger, og at den ikke bliver flyttet på.

Måden man får en given side til at anvende et style sheet på, er ved at linke til det i HEAD tag'en. For det style sheet der hedder styling.css i directoriet StyleSheets, ser syntaksen således ud:


Når siden indlæses af en browser, bliver style sheetet indlæst med samme lejlighed, og siden formateret efter instrukserne.

Formateringen i et style sheet deles ud på tre typer: tags, class og ID.

Tags er tags som vi kender dem, f.eks. TABLE og H1, hvor man f.eks. siger at overskriften H1 altid skal være fed skrift i kursiv.

Man kan imidlertid have flere behov for formatering af flere typer af celler i en tabel. Så duer det ikke at formatere tag'en TD, for så bliver alle cellerne ens. Her definerer man i stedet en klasse til hver type af celler. For at få tag'en til at anvende klassen anvender man attributten CLASS. Hvis man har defineret en klasse af celler der hedder GreyBackground, får man cellen, dvs. TD tag'en, til at bruge den ved at skrive <TD CLASS="GreyBackground">

ID'er fungerer helt ligesom klasser, man bruger bare attributten ID, så for GreyBackground som ID er syntaxen <TD ID="GreyBackground">. ID er noget man normalt kun bruger, når man arbejder med felter der allerede bruger ID, f.eks. at læse og skrive i felter.

VIGTIGT! Ingen mellemrum i navne på klasser of ID'er!

I css-filen anvender man de variabler man har til rådighed i attributten STYLE for en given tag. Dem skal man i sagens natur slå op for de enkelte tags og sikre sig er valide. For tags er syntaksen flg.:


For klasser er syntaksen:


For ID'er er syntaxen:


Bemærk at der er et punktum foran klassenavnet og et hash-symbol (også kaldet havelåge i ældre litteratur) før ID-navnet. Det er den måde browserne kender forskel på tags, klasser og ID'er, når de skal læse filen.

Lad os sige, at vi skal bruge en hovedoverskrift på sitet (den tag der hedder H1) der er med fed skrift, i kursiv, bruger skrifttypen Verdana og har fontstørrelsen 24 pt. Dette skrives således:


Bemærk, at det der står mellem { og } er nøjagtig det samme som man skriver i sin STYLE="" til sine tags. I css-filen skriver man gerne hver variabel på en ny linje, og med lidt indryk, som vist i eksemplet, men dette er ikke nødvendigt for funktionaliteten. Det er kun for at sørge for at holde koden overskuelig.

Syntaksen for klasser er nøjagtig den samme som for tags. Lad os sige, at vi i en tabel skal bruge celler med grå baggrund og fed skrift af typen Verdana i punktstørrelse 14 til overskrifterne og almindelig Verdana i punktstørrelse 10 på hvid baggrund til de andre celler. Disse kunne man passende kalde GreyCell og WhiteCell. Man vil så i css-filen skrive:

Links har en særlig status i forhold til style sheets, idet man har en række ekstra muligheder. Som udgangspunkt kan A-tag'en styles som vist i det foregående, men fordi links er lavet til bl.a. at vise at der er et link og ikke blot tekst og derudpver indikere om man har klikket på linket tidligere eller ej, er der nogle ekstra muligheder.

Synteksen er som flg.:

Udseendet på linket, hvis man ikke har besøgt siden:


Udseendet på linket, hvis man har besøgt siden:


Udseendet på linket, lige når man holder musen over det:


Udseendet på linket, lige når man klikker på det:


Man skal lige være opmærksom på, at i css-filen skal A:active stå efter A:hover for at fungere ordentligt.

Hover fungerer også ved andre tags, f.eks. DIV, men kun ved de nyere browsere. Dette bruger man især ved navigationspaneler, som f.eks. drop down menuer, hvor man ikke har et link, men skal have rullegardinet til at falde ned, så man kan se de underliggende links man kan vælge imellem. Den udbredte brug af tablet-computere og smartphones, hvor man ikke har en pointer at holde over et objekt, betyder at brugen af hover bør være begrænset til links. Tablets og smartphones kan i nogen omfang konvertere hover-effekten så den fungerer som ONCLICK, men det fungerer ikke helt godt og bør undgås.