Introduktion till CSS

Här får du lära dig grunderna i hur formgivningsspråket CSS fungerar. Det finns bl.a. några skrivregler och nya benämningar som du behöver känna till för att förstå fortsättningen.

Varje element i dokumentträdet, motsvaras i CSS-språket av en väljare (selector). Med hjälp av väljaren beskriver man vilket element som ska formges. Väljaren har samma namn som taggen har, men i CSS används inte samma skiljetecken.

Vill man t.ex. ändra huvudrubrikens egenskaper så heter väljaren h1 kort och gott, precis som webbelementets tagg.

h1 { }

OBS! Enbart den gren i dokumentträdet som börjar med body får användas som väljare.

Efter väljaren följer ett mellanslag, samt två motstående klamrar. Mellan dessa klamrar skriver man namnet på den eller de egenskaper som man vill ändra på hos den benämnda väljaren (webbelementet). Varje egenskap har också ett värde.

Man skulle kunna beskriva egenskaper (properties) och värden (values) på detta sätt:

  • Egenskaper beskriver vilken detalj hos elementet som ska ändras
    (t.ex. teckensnitt, textfärg eller textstorlek)
  • Värdet beskriver pÃ¥ vilket sätt eller hur mycket egenskapen ska ändras (t.ex att teckensnittet heter Verdana, att textfärgen ska vara blÃ¥ eller att textstorleken ska vara 80%)

I exemplet nedan ser du i vilken ordning de olika begreppen ska anges och vilka skiljetecken som används. Före varje ny egenskap sätter man ett semikolon [;] och ett mellanslag. Mellan egenskap och värde sitter ett vanligt kolon [:].

h1 {
   font-family:verdana,sans-serif;
   color:blue;
   font-size:80%
   }

Det finns ett antal egenskaper att välja bland och de kan delas in i kategorier beroende på vilken sorts formgivning de resulterar i. Det finns t.ex. egenskaper för texten i ett element, men även egenskaper för ett elements olika sidor, bakgrund och placering.

Värden kan vara fördefinierade, men också variabla för att man t.ex. ska kunna ändra en storlek eller en färg. En egenskap tillsammans med sitt värde kallas för en deklaration (declaration).