CSS

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

Et simpelt CSS dokument.

Cascading Style Sheets (også kaldet typografiark, stylesheet eller bare CSS) er et computer-sprog, der bruges til at beskrive, hvordan man ønsker indholdet af et HTML/XHTML/XML-dokument præsenteret, f.eks. i en browser. Man kan indlejre sproget i et HTML-dokument 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 denne type oplysninger 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 hensigtmæssigt.

Ved mere avanceret brug kan et CSS-dokument bruges til at styre en hel hjemmesides udseende og 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".

Brugen af Cascading style sheets

Fra et HTML-dokument 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 i et element. Eksempel:

<p style="color: sienna; margin-left: 20px">
Dette er en paragraph
</p>

I selve CSS-filen bruges en syntaks, som ikke ligner HTML. Her er et eksempel på syntaksen:

selector {
  property: value;
  /*Kommentar*/
  property: value;
}

/* Brug sort tekst på grå baggrund i dokumentet */
body {
  font-family: sans-serif;
  color: black;
  background: gray;
}

/* Grønne centrerede overskrifter. Baggrund skinner igennem fra 'body' */
h1, h2, h3 {
  color: #11ee11;
  text-align: center;
}

Som vist i eksemplet kan definitioner overskrives. Overskrivningsreglerne inden for en CSS-fil følger 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 "minclass" */
.minclass {
  font-size: 16px;
  font-family: Arial;
  color: red;
}
</style>
<p class="minclass">Dette vil stå med rød 16px Arial.</p>

Har man derimod lyst til at bruge "id" kan det gøres på samme måde:

Eksempel:

<style>
#mitid { /*Dette er ID*/
  font-size: 16px;
  font-family: Arial;
  color: red;
}
</style>
<p id="mitid">Dette vil stå på samme måde med rød 16px Arial.</p>

Id'er og klasser kan også kombineres:

Eksempel:

<style>
 /*Dette er Class*/
.min-class {
  background-image: url("http://example.com/baggrund.jpg");
}
#mit-id {
  font-size: 16px;
}
</style>

<h1 id="mit-id" class="min-class">

Selectors

Selector'en vælger et eller flere elementer. Det der står i disse parenteser: {} bag efter selector'en kommer til at gælde for de valgte elementer. Her er en tabel over hvad selector'ne vælger:

Selector'en	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 attribute'en d med value'en c	<E d="c"> og </E>
E#myid	Elementet E med den unike ID som er "myid"	<E id="myid"></E>

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

Property

Property'er er dem der bestemmer hvad der skal ske med alle de elementer Selector'en har valgt. Eksempel:

p {
    background: white;
}

Her vælger Selector'en elementet P og Property'en siger at background'en skal ændres. Value'en bag efter siger at den skal være hvid. Her kan du se en liste over Property'er og hvad value'erne kan være: http://www.w3.org/TR/REC-CSS2/propidx.html

Eksterne henvisninger

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