CSS

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

Et simpelt CSS dokument.

Cascading Style Sheets, (også kaldet for 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 mellem to style-tags eller have det i filer for sig (på samme måde som man kan med javascript) ved henvisning via et link-tag. Fordelen 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 ikke er hensigtmæssigt.

Ved mere avanceret brug, kan et CSS-dokument bruges til at kontrollere en hel hjemmesides udseende og opbygning. Derved kan man holde indholdet af siden i HTML-koden og samtidig lade CSS-koden kontrollere 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>:

<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. Det skal bare være i <head>-elementet. Eksempel:

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

Til sidst kan CSS-teksen stå som en value i attribute'en 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å hvid baggrund i dokumentet */
body {
  font-family: verdana, arial, helvetica, sans-serif;
  color: black;
  background: white;
}

/* 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 ikke rækkefølgen af definitioner, men de mest specifikke regler gælder. Derfor vil baggrunden forblive hvid i eksemplet og den generelle tekstfarve vil være sort.

Class's & ID's

Class og ID bruges en hel del i CSS deriblandt til opstilling af design.

Eksempel:

<style>
.minclass { /*Dette er Class*/
font-size: 11px;
font-family: Tahoma;
font-color: Red;
}
</style>
<p class="minclass">Dette er kun et eksempel</p>

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

Eksempel:

<style>
#mitid { /*Dette er ID*/
font-size: 11px;
font-family: Tahoma;
font-color: Red;
}
</style>
<p id="mitid">Dette er kun et eksempel</p>

Udover dette kan man selvfølgelig også gøre dette med body tags såsom:

Eksempel:

<style>
.mitbodyclass { /*Dette er Class*/
background-image: url("http://eksempel.dk/baggrund.jpg");
font-family: Tahoma;
font-size: 11px;
}
</style>

<body class="mitbodyclass">

Selectors

Selector'en vælger et eller flere elementer. Det der står i disse parenteser: {} bag efter Selector'en kommer så 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