Cascading Style Sheets, CSS

Namnet kommer från en författares möjlighet att definiera ett utseende som sedan kan återanvändas på flera dokument med olika innehåll. 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.
 

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/stilmallen.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 anledning ä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.
 

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- och p-elementet samt 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 19 bildpunkter (pixlar).
 

Variabler

CSS-dokumentationen ger inget eget stöd för variabler. Detta leder ofta till att exempelvis färger måste definieras upprepade gånger i ett CSS-dokument, vilket kan bli omständligt att hantera då mängden CSS-kod växer. För att underlätta arbetet med CSS har ett flertal tillägg utvecklats, oberoende av W3C, som bland annat utökar CSS med stöd för variabler, operatorer och nestlade regler. Exempel på tillägg till CSS är SASS och LESS, vilka erbjuder likvärdig funktionalitet men med varierande syntax. CSS-koden skrivs då enligt respektive tilläggs eget syntax och kompileras sedan till ren CSS-kod som webbläsaren kan tolka.

Läs mer om:
Marknadsföring
Reklam
Broschyr
Trycksaker
Text och typografi
Typsnitt

Denna artikel omfattas av Creative Commons Erkännande-Dela Lika-licens;

Den använder sig av material från Wikipedia.