Cascading Style Sheets

Wikipedia

Cascading Style Sheets
Filändelse:	`.css`
MIME-typ:	`text/css`
Utvecklad av:	W3C
Typ av format:	stilmall
Standard:	CSS 1, CSS 2, CSS 2.1

Cascading Style Sheets (CSS, på svenska stilmall) är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. Tekniken är ett sätt att anpassa dokumentet med hänsyn till datortyp, skärmupplösning, färgdjup och installerade typsnitt.

Ordet kommer från en författares möjlighet att låta dokumentet ärva och använda sina egna stilar då det presenteras, ungefär som ett 'stildraperi' eller 'stilförhänge'. Tekniken introducerades av Håkon Wium Lie och Bert Bos 1994 i webbläsaren Argo.

Ett XML- eller HTML-baserat dokument har inte på förhand en given utformning utan består av strukturerad text utan stilinformation. Hur dokumentet skrivs ut på papper, på en webbsida, på displayen i en mobiltelefon eller en handdator, bestäms av en stilmall. CSS ingår inte som en del av XML-språket, men kan användas för att anpassa presentationer av webbsidor. I slutändan är det dock mottagarklienten som har stort inflytande över hur dokumentet presenteras.

[redigera] Användning

CSS används av Wikipedia och av de flesta stora webbplatser. CSS-dokumentet inkluderas oftast med hjälp av ett link-element:

<link rel="stylesheet" type="text/css" href="sökvägen/till/stilmallen.css">

Denna rad specificerar sökvägen till filen med stilspecifikationerna (href="sökvägen/till/stillmallen.css") och hur webbläsaren ska tolka filen (rel="stylesheet" type="text/css").

Ett annat sätt att använda CSS i ett HTML eller XHTML-dokument är style-elementet, som kan användas på två sätt. Det första är att inkludera CSS-filen via en CSS-instruktion:

<style type="text/css">@import url(stilmall.css);</style>

Alternativt går det att skriva in CSS-koden direkt i style-elementet. Detta är inte rekommenderat då det kan uppstå problem med äldre webbläsare då dom tolkar CSS-koden som en del av HTML-koden och därför visar koden direkt på webbsidan. Det är därför rekommenderat att använda ett link-element för att koppla CSS-kod till webbsidor, dels för att spara bandbredd och dels att en HTML-tolk och XHTML-tolk hanterar style-element på olika sätt.

CSS-tekniken har ibland kritiserats för att komplicera arbetet för webbutvecklare då många webbläsares stöd för CSS-standarden varierar kraftigt, webbläsaren Internet Explorer version 6 och tidigare är ofta utsatta för dessa anklagelser. Vissa speciella designdelar anses vara onödigt komplicerade som till exempel horisontell och vertikal centrering av olika element.

[redigera] Exempel på CSS-dokument

body
   {
   background: #EEE;
   font: 100%/1.5 Georgia, serif;
   color: #333;
   }

Ovanstående CSS-kod innehåller tre instruktioner för hur body-elementet och dess innehåll ska presenteras. Den första raden (background: #EEE;) anger att bakgrunden ska ha en väldigt ljus grå färg. Nästa rad ställer in textstorleken till 100%, radavståndet till ett och ett halvt tecken, och typsnittet till Georgia. Den sista raden ger all text, och eventuella ramar, en väldigt mörk grå färg.