CSS
For alternative betydninger, se CSS (flertydig). (Se også artikler, som begynder med CSS)
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>
.minbodyclass { /*Dette er Class*/
background-image: url("http://eksempel.dk/baggrund.jpg");
font-family: Tahoma;
font-size: 11px;
}
</style>
<body class="minbodyclass">
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