Cascading Style Sheets

Wikipedia

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å de tolkar CSS-koden som en del av HTML-koden och därför visar koden direkt på webbsidan. En annan andledning är också för att det blir krångligare att ändra koden i efterhand sedan. 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-color: #E9E9E9;}
p {font-family: georgia, "Times New Roman", serif; font-size: 19px;}

Ovanstående CSS-kod innehåller två instruktioner för hur body-elementet och dess innehåll ska presenteras. Den första raden (background-color: #E9E9E9;) anger att bakgrunden ska ha en väldigt ljus grå färg. Nästa rad ställer in typsnittet till Georgia i första hand, i andra hand Times New Roman. Om besökaren på webbsidan inte har något av dessa typsnitt installerade, så används i tredje hand något annat serif-typsnitt. Slutligen anges att typsnittet ska visas i en storlek av exakt 19 bildpunkter (pixlar).

Resultat:

[redigera] Externa länkar

• W3Cs webbplats om CSS
• Nybörjarguide till CSS