CSS

For alternative betydninger, se CSS (flertydig). (Se også artikler, som begynder med CSS)

Cascading Style Sheets (CSS)
CSS 3 logoet
Filendelse:	.css
MIME-type:	text/css
Udviklet af:	World Wide Web Consortium (W3C)
Formattype:	Style sheet language

Cascading Style Sheets (forkortet CSS) er et computersprog, der bruges til at beskrive, hvordan man ønsker indholdet af et HTML/XHTML/XML-dokument præsenteret, f.eks. i en browser.

I HTML kan man indlejre CSS-koden i et style-element eller have det i filer for sig (på samme måde som man kan med JavaScript) ved henvisning via et link-element. En af fordelene ved at placere typografibeskrivelsen i en fil for sig selv er, at formateringen kan genbruges i flere dokumenter (ved at flere dokumenter inkluderer link til samme fil med css). Hvis man ikke lægger det i en fil for sig vil man skulle gentage den samme kode på hver side hvor man ønsker samme effekt, hvilket normalt ikke er hensigtsmæssigt.

Ved mere avanceret brug kan et CSS-dokument bruges til at styre en hel hjemmesides udseende og visuelle opbygning. Derved kan man holde indholdet af siden i HTML-koden og lade CSS-koden styre udseendet.

Ud over genbrug giver CSS-formatet mulighed for at kombinere formateringsoplysninger fra flere forskellige CSS-filer. Med denne teknik kan man eksempelvis have en CSS-fil med basal formatering, der bruges af alle HTML-dokumenter, man administrerer, og en anden, som bruges til eksempelvis "avanceret indhold".

Brug af Cascading Style Sheets i HTML

Fra et HTML-dokument kan der refereres til en eller flere CSS-filer med linjer som denne i head-elementet:

<link rel="stylesheet" href="basis.css" type="text/css" />
<link rel="stylesheet" href="avanceret.css" type="text/css" />

Man kan også skrive CSS-teksten i style-elementet og inkludere det direkte på siden. Eksempel:

<style type="text/css">
    p {
        color: sienna;
        margin-left: 20px;
    }
</style>

Til sidst kan CSS-teksten stå som en værdi i attributten style tilknyttet et element. Eksempel:

<p style="color: sienna; margin-left: 20px">
    Dette er et typografisk afsnit
</p>

I selve CSS-filen bruges en syntaks, som ikke ligner HTML. Det mest grundlæggende af syntaksen ser således ud:

/* Kommentar */
selector {
    egenskab1: værdi;
    egenskab2: værdi;
}

Og her er et konkret eksempel på et CSS-dokument:

/* Brug sort tekst på grå baggrund i hele dokumentet som standard */
body {
    color: black;  /* Sort tekstfarve */
    background: gray;  /* Grå baggrundsfarve */
}

/* Grønne centrerede overskrifter. Den anvendte baggrundsfarve til 
  overskrifterne forbliver den grå fra body-elementet, da h1, h2, og h3 
  altid er indeholdt i et body-element. */
h1, h2, h3 {
    color: green; /* Tilsidesæt tekstfarven fra body-elementet */
    text-align: center;  /* Centrer overskriften */
}

Som vist i eksemplet kan definitioner tilsidesættes eller "overskrives". Overskrivningsreglerne inden for CSS følger til dels rækkefølgen af definitioner, men mere vigtigt er, at de mest specifikke regler har forrang over for mindre specifikke regler. Derfor vil baggrunden forblive grå i eksemplet og den generelle tekstfarve vil være sort.

Klasser og id'er

Man kan bruge klasser og id'er til at strukturere og gøre genbrug lettere.

Eksempel:

<style>
    /* Denne regel refererer til elementer, hvis class-attribut 
       indeholder "minklasse" */
    .minklasse {
        font-size: 16px;
        font-family: Arial;
        color: red;
    }
</style>

<p class="minklasse">Dette vil stå med rød 16px Arial.</p>

Man kan også referere til specifikke id-attributter:

<style>
    /* Denne regel refererer til det element, hvis id-attribut 
       er lig med "mitid" (bemærk at kun et enkelt element kan 
       have en bestemt id-værdi). */
    #mitid {
        font-size: 16px;
        font-family: Arial;
        color: red;
    }
</style>

<p id="mitid">Dette vil stå med rød 16px Arial.</p>

Id'er og klasser kan også kombineres:

Eksempel:

<style>
    .min-class {
        background-image: url("http://example.com/baggrund.jpg");
    }
    #mit-id {
        color: red;
    }
</style>

<h1 id="mit-id" class="min-class">Rød overskrift med baggrundsbillede</h1>

Selectors

Selectoren ("udvælgeren") vælger et eller flere elementer. Det der står i krøllede parenteser {} efter selectoren kommer til at gælde for de valgte elementer. Her er en tabel over hvad selectorerne vælger:

Selector	Elementer den vælger	Alt imellem
*	Alle elementer	Alt tekst
E	Elementet E	<E> og </E>
E.C	Elementet E med class'en C	<E class="C"> og </E>
F > E	Elementet E som er child i et element F	<F><E> og </E></F>
F+E	Elementet E som er lige efter elementet F	<F></F><E> og </E>
E[d="c"]	Elementet E med attributten d med værdien c	<E d="c"> og </E>
E#myid	Elementet E med den unikke ID "myid"	<E id="myid"></E>

Note: Man kan godt blande tingene (eksempel: P.stor>SPAN+A[href="http://www.wikipedia.org"]:hover)

Egenskaber

Egenskaber (eng. properties) bestemmer hvad der skal ske med alle de elementer selectoren har valgt. Eksempel:

p {
    background: white;
}

Her udvælger selectoren HTML-elementet p, og egenskaben siger at baggrunden skal være hvid. Her kan du se en liste over egenskaber og hvad værdierne kan være: http://www.w3.org/TR/REC-CSS2/propidx.html

Eksterne henvisninger

• Cascading Style Sheets hos World Wide Web Consortium
• CSS Zen Garden
• Lær CSS hos World Wide Web Consortium's undervisningsside (på engelsk)