Så du har skapat en blogg, valt ett förinstallerat tema och sitter och tänker att du skulle vilja ändra lite, som typsnitt, teckenstorlek och färg på länkarna?

Det kan du enkel göra genom att redigera vad som kallas för temats  “stylesheet” eller “stilmall”. En stilmall består egentligen av en uppsättning regler som talar om för webbläsaren hur sidan skall visas och olika element på bloggen skall se ut. På så vis kan man koppla en stil till t.ex. alla rubriker på sidan, och sedan enkelt ändra denna genom att ändra på ett enda ställe i stilmallen, istället för att gå igenom hela bloggen och ändra på alla ställen där det finns rubriker.

Detta kallas för att man separerar design från innehåll.

Hur gör man då? En stil defineras i ett språk som kallas CSS. CSS kan verka avskräckande och komplicerat, men om man tittar närmare på det så är det inte så svårt. Men låt oss först öppna bloggens stilmalredigerare.

Gå till menyn Utseende i administrationsdelen av bloggen och välj alternativet Custom CSS. Du får då upp ett stort inmatningsfält som är fullt med information och instruktioner på engelska. Dessa kan du läsa om du vill, eller bara strunta i för tillfället.

Gå till slutet av texten i inmatningsfältet och tryck fram en ny, tom rad. Vi ska nu ändra typsnittet på alla rubriker på din blogg.

För att göra detta skriv följande på den tomma raden:
h2 {font-family:helvetica,arial,verdana;}

Ser det konstigt ut? Låt oss titta på vad det vi just skrev egentligen betyder.

h2 är en “selector” eller “elementväljare” som man kanske kan kalla det på svenska. “h2” är elementväljare för nivå 2 rubriker (header 2).

font-family är den egenskap som vi önskar ändra/definera. I detta fallet skriver vi “font-family”, vilket avser typsnittet.

helvetica,arial,verdana anger värdet på den egenskap (font-family) vi angav nyss. Här skrev vi “helvetica,arial,verdana”, vilka är namn på olika vanliga typsnitt. Egentligen räcker det med “helvetica”, de båda följande typsnitten är bara back-up som säger vad de som inte har “helvetica” på sin dator skall se.

Om du nu klickar på “Uppdatera” så sparas dina ändringar och om du går till din bloggs framsida så bör du kunna se skillnaden!

Eventuellt kan du behöva ladda om sidan med “F5″ eftersom att den gamla stilmallen ligger kvar i din webbläsares buffertminne.

Prova nu att lägga till följande instruktion i stilmallen:

color:green;

Nu ska raden se ut som följer:

h2 {font-family:helvetica,arial,verdana; color:green;}

Vad gjorde vi nu då? Vi talar helt enkelt om att vi vill att rubriker i nivå 2 skall ha grön text. Tecknet “;” avslutar varje instruktion och måste finnas med.

Ett annat sätt att ange färgvärden är med hexadecimala RGB-värden. Här kan du se exempel på sådana hexadecimala färgvärden.

Vi skulle alltså kunna skriva

color:#00FF00;

vilket fortfarande betyder grönt, eller valfri annan färg, t.ex.

color:#669999;

vilket ger den här färgen.

Nu har vi lärt oss några grundläggande saker om stilmallar och CSS. I nästa del ska vi gå lite djupare in på vad man kan göra med CSS för att ändra utseendet på sin blogg.

Lycka till!