Webbdesignens språk, del 2

En av de största anledningarna till varför webbsidor i dag ser mycket mer spännande och estetiskt tilltalande ut jämfört med vad de gjorde i början av 90-talet är CSS. I föregående del av denna artikelserie gick vi igenom HTML (själva grunden för webbdesign) och dess utveckling. I den här delen ska vi nu titta närmare på det språk som fungerar som stilmall för strukturerade dokument (alltså ett HTML- eller XML-baserat dokument), nämligen CSS. CSS ger helt enkelt instruktioner för enskilda element och bestämmer med andra ord hur ett dokument, eller en webbsida, skall visas. Det handlar alltså om att bland annat ge justeringar för olika objekt samt att ge texter specifika typsnitt, storlekar och färger.

 

Vad ska man med CSS till?

Tidigare skrevs alltså beskrivande specifikationer till text och objekt in i själva HTML‑dokumentet. Detta förändras 1994 då Håkan Wium Lie och Bert Bos introducerade CSS, som står för Cascading Style Sheets. Själva syftet med framtagandet av stilmallar var att separera design från innehåll så att flera dokument kunde bli styrda genom en enda fil.

Vad ska man med CSS till?

Precis som vi redan nämnt i Webbdesignens språk, del 1, så finns det en poäng i att låta struktur och presentation stå isär. Man kan nämligen med hjälp av CSS använda sig av en enda fil för att ge designinstruktioner till flera olika HTML-filer samtidigt, så länge man kopplar ihop dessa. Vill man då till exempel ändra på vissa färger på webbsidan, eller ge all text ett nytt typsnitt, så kan man enkelt ändra detta i CSS och så uppdateras alla de HTML-filer som refererar till CSS-filen. Allt som krävs i HTML är alltså en referens till CSS-filen, vilket kan göras med hjälp av ett link-element (till exempel <link rel=”stylesheet” type=”text/css” href=”sökvägen/tillstilmallen.css”>) eller ett style-element (så som <style type=”text/css”>@import url (stilmall.css);</style>).

Hur funkar det då?

Istället för att skriva taggar så skrivs CSS med så kallade CSS-regler, även kallade deklarationer. En CSS-deklaration innehåller en egenskap och ett värde. Egenskapen kan vara till exempel en färg, en text-storlek, en ram eller en marginal, och följs av värdet som helt enkelt specificerar egenskapen (för en färg kan det till exempel vara färgen grå eller rosa, och för en text-storlek är det numret på text-storleken, till exempel 12). Med hjälp av så kallade selektorer så bestämmer man vad för område eller tag på webbsidan som denna deklaration skall gälla; det skulle till exempel kunna gälla alla huvudrubriker eller alla textstycken. Man skriver alltså först ut en selektor som sedan följs av en eller flera deklarationer.

HTML, CSS och aktuell webbläsare är i ständig interaktion med varandra. Hur CSS kommer att visa din webbsida beror på vilken webbläsare som används. När man använder sig av CSS är det därför viktigt att känna till framför allt två saker: i vilken ordning som webbläsaren kommer att läsa din CSS, samt i vilken ordning den kommer att prioritera dina CSS-koder. Det tog ett tag innan alla webbläsare började stödja CSS, men idag är det ett mycket populärt språk inom webbdesign och används på de flesta större webbplatserna runt om i världen.