CSS, eller Cascading Style Sheets, används för att beskriva utseende på din hemsida. Fördelarna är många, men den kanske största är att det hjälper dig att skilja utseende och innehåll. Och jag lovar – detta är sexigare än det låter!

Vad innebär det då att separera utseende från innehåll? Framför allt innebär det att ditt dokument, dvs. din HTML-sida, endast innehåller HTML-element för att beskriva innehållet. HTML-koden beskriver vad som är rubriker, ingress, brödtext, punktlistor eller datatabeller. HTML-koden säger ingenting om hur innehållet ska presenteras; detta gör du bättre med CSS.

Att separera innehåll från utseende ger bland annat dessa fördelar:

• Lättare att underhålla innehållet dina webbsidor
• Lättare att ändra layout på en hel sajt på en gång
• Lättare att använda JavaScript för att lägga till funktionalitet till sidan
• Bättre tillgänglighet för funktionshindrade och blinda
• Lättare för sökmotor som Google att förstå ditt innehåll
• Enkelt att överföra till mobila enheter som telefoner och handdatorer
• Samt en rad andra fördelar

Några konkreta exempel

Sajten CSS Zen Garden (www.csszengarden.com) är skapad för att demonstrera styrkan med CSS. På CSS Zen Garden finns endast en enda HTML-fil, men du kan välja bland mängder av olika CSS-filer för att presentera innehållet på olika sätt.

Testa gärna att surfa till www.csszengarden.com och titta på olika designer för sidan. Det ger dig en god bild av hur flexibelt CSS är!

Strukturera din kod

Det är viktigt att du strukturerar ditt dokument så att det är semantiskt korrekt. Använd rätt element till rätt sak.

• Använd rubrikelementen H1, H2, H3, etc för rubriker i din kod. Detta ger innehållet en viktigare mening än att bara formge en text med större teckensnitt.
• Använd P-element för att beskriva vanlig brödtext.
• Använd tabeller endast för att beskriva data som ska presentera i tabellform, men undvik att använda tabeller för layout. När du skapar tabeller, så använd elementen THEAD, TBODY, TFOOT och TH för att beskriva vad som är rubriker och data. Undvik allt för många onödiga element. När du använder dessa element får du lätt att formge dina tabeller snyggt.
• Använd DIV-element klokt och sparsmakat för att gruppera information i logiska grupper. Dessa kommer till användning när du ska formge sidan.

När du lärt dig använda rätt HTML-element så kommer du bli enklare att formge din sida och att ändra utseende på den i efterhand.

En normal sajt

De flesta sajter på Internet består av ett sidhuvud med logotyp, navigation med länkar, rubrik och brödtext och en sidfot med kontaktuppgifter. Ett exempel på en sådan sida är www.ifokus.se/About.aspx. Strukturen på denna sida ser ut ungefär så här:

• DIV som omsluter hela sidan för att kunna bestämma till exempel bredd på sidan. I vårt fall använder vi den både för bredd och för att centrera sidan.
  • DIV för logotyp som innehåll en länk och en bild
  • DIV för länkar i toppnavigationen
    • Länk 1, 2, 3
  • DIV för sidans rubrik. I denna ligger ett H1-element
  • DIV för vänsternavigation som endast innehåller länkar
    • Länk 1, 2, 3
  • DIV för innehåll. All brödtext är indelad med P-element och H2-element för underrubriker. Det finns inga element för formatering här, som t ex FONT.
  • DIV för sidfot

Varje DIV-element i sidan motsvarar en logisk enhet av information. Tack vare att logotyp, navigation, innehåll och sidfot är separerat blir det lättare att formge dessa. Varje DIV-element har dessutom ett unikt ID angett så det blir lätt att referera till dessa i CSS-koden.

Listorna med länkar innehåller endast A-element. Det finns inga BR-taggar för radbrytningar. Med CSS formger vi länkarna så de hamnar på varsin rad i vänsternavigationen och bredvid varandra i toppnavigationen. Detta ger oss möjlighet att vid ett senare tillfälle ändra designen på samtliga sidor i sajten utan att behöva ändra något i innehållet. (Precis som på www.csszengarden.com)

Om din navigation har flera hierarkiska nivåer är listor (UL- och LI-element) mycket bra att använda. Med dessa listor kan du skapa flera nivåer för din navigation och med CSS kan detta presenteras på ett attraktivt sätt.

Grunderna i CSS

Nu när du lärt dig lite om hur din HTML-fil bör vara strukturerad är du redo att lära dig mer om hur du formger sidan.

Syntaxen – eller grammatiken – för CSS är:

Selektor {egenskap1: värde; egenskap2: värde; }

En ”selektor” kan vara namnet på ett HTML-element (BODY, P, DIV), namnet på en klass eller namnet på ett unikt ID. Alla HTML-element kan ange class=”minklass” och id=”uniktid” som sedan kan användas med CSS. Mer om klasser och id lite senare.

Om du t ex vill att all text på sidan ska vara teckensnittet Verdana i röd färg, så kan du skriva så här:

body

{

font-family: Verdana;

color: Red;

}

”BODY” beskriver att det är just elementet BODY. Klamrarna ”{” och ”}” anger start och slut för denna stildefinition. ”font-family” anger namnet på egenskapen för att bestämma teckensnitt och värdet för denna är satt till ”verdana”. Mellan egenskap och värde finns alltid ett kolon (:). Semikolon (;) används för att separera olika egenskaper åt. Om du skriver definitionen på en rad, eller uppdelat med radbrytningar och tabbtecken som exemplet ovan spelar ingen roll, men det blir ofta mer lättläst om det är lite luftigt.

När du bestämmer stil på ett element som i exemplet ovan gäller det för alla element i sidan.

Klasser

Med hjälp av klasser kan du skapa stildefinitioner som kan gälla för vissa element där man angett klassens namn. Detta är användbart för att definiera en viss stil på vissa utvalda element. Du kanske vill visa citat med kursiv stil och indrag.

Så här ser definitionen ut för klasser:

.Citat

{

font-family: Georgia;

font-size: 12pt;

color: #454545;

margin: 2em;

font-style: italic;

}

.Author

{

text-align: right;

font-weight: bold;

}

Och så här använder du klassen i din HTML-kod:

Här är resultatet:

Observera punkten i börjas av definitionen (.Citat). Denna visar att det är en klass du skapar. Namnet i CSS-definitionen och namnet du sättet på HTML-elementet måste vara identiska och skiljer på stora och små bokstäver. Det hade alltså inte fungerar att sätta class=”citat” med litet ”c”. Observera också att man inte skriver med punkten i class-attributet.

Det är viktigt att påpeka att ett HTML-element endast kan ha ett class-attribut, men du kan ändå definiera flera klasser för ett element.

Detta är giltigt:

Separera varje klass med mellanslag

Detta är ogiltigt:

Det här kommer inte fungera

ID

ID-attributet på HTML-element är mycket bra för att särskilja ett element från alla andra. ID-attributet måste vara unikt för hela sidan och ett ID får alltså endast förekomma en enda gång per sida.

ID-attributet kan med fördel användas för att namnge DIV-element.

Så här ser definitionen ut för ID:

#Sidhuvud

{

margin: 20px 0px 10px 0px;

border-bottom: 1px solid Black;

}

Och för att använda den gör du så här:

Även ID är skiftlägeskänsliga, dvs. gör skillnad på stora och små bokstäver.

Gruppering

Om man vill ha samma stil för flera element, klasser eller ID går det utmärkt att gruppera ihop stildefinitioner. Allt du behöver göra är att separera varje selektor med komma. Exempel:

body, td, input, select, textarea

{

font: 10pt/150% Verdana;

color: #333333;

}

Nu gäller denna definition för alla element av typen body, td, input, select och textarea.

Arv

Order ”Cascading” i CSS är viktigt. Det betyder att en stilmall alltid ärv ned till underliggande HTML-element. Dessutom innebär det att stildefinitionerna byggs på.

Om du t ex bestämmer att body-elementets teckensnitt ska vara verdana så kommer alla underliggande element också få verdana som teckensnitt.

Du kan även använda detta beteende till att definiera flera klasser, element eller id för en minsta gemensamma nämnare och därefter bygga vidare på det som är unikt för varje element.

Tänk t ex att jag vill att alla länkar ska vara röda, men inte understrukna, förutom i en sidospalt. Då kan jag först definiera detta för alla länkar:

a

{

color: red;

text-decoration: none;

}

Därefter kan jag ändra stilmallen för alla länkar som ligger under elementet med klassen Sidospalt, så här:

.Sidospalt a

{

text-decoration: underline;

}

Boxmodellen

Ett väldigt viktigt koncept i CSS är den s.k. boxmodellen. Den förklarar förhållandet mellan marginaler, kantlinjer, utfyllnad, bredd och höjd.

Nedanstående bild illustrerar detta:

Innerst ligger innehållet. Det är på denna yta du kan bestämma bredd och höjd. För att få luft mellan innehåll och eventuell kantlinje kan du använda padding. Utanför padding kommer kantlinjen. Kantlinjer kan ha olika tjocklekar, färger och stilar. För att få luft mellan kantlinjen och elementen runtomkring används margin.

Detta är viktigt då både margin, border och padding påverkar elementets bredd. Om du bestämt bredden till 200 pixlar, har 20px padding på vardera sidan, en 2px bred kantlinje och 10px bred marginal kommer elementets totala bredd bli 200 + (20*2) + (2*2) + (10*2) = 264px.

Block och inline

Det är inte alla element som det går att sätta marginaler, utfyllnad, bredd och höjd på. Förenklat kan man säga att de element som alltid ligger på en egen rad kan ha dessa stildefinitioner, men de som kan ligga mitt i en text kan det inte.

Den stora skillnaden på ett div-element och ett span-element är just att div-elementet alltid ligger på en egen rad, medan span-element kan ligga runt ett ord i en mening.

Andra vanliga block-element är t ex p, table, h1, h2, h3, pre, blockquote, form eller ul. Vanliga inline-element är t ex span, a, strong, em eller abbr.

Det går dock alltid att tvinga ett block-element att visas som inline eller tvärtom. Detta görs med stilattributet display.

Block gör att elementet visas på egen rad och kan ha marginaler och fast storlek:

.MyBlock

{

display: block;

}

Inline gör att elementet visas flödande i en text. Detta används ofta på li-element för att göra horisontella navigationer:

.MyBlock

{

display: inline;

}

None gör att elementet inte visas alls. Detta används ofta när man programmerar JavaScript:

.MyBlock

{

display: none;

}

De vanligaste attributen

Nu när du lärt dig grunderna för syntaxen ska vi titta på några av de vanligaste attributen i CSS.

Teckensnitt

Namn

Beskrivning

font-family

Bestämmer teckensnitt. Vill du ange alternativa teckensnitt separerar du varje med kommatecken. Om teckensnittet innehållet blanksteg så använder du citationstecken runt namnet, t ex ”Trebuchet MS”.

font-size

Anger teckenstorlek. Det finns flera varianter för storlekar, som px (pixlar), pt (punkter), % (procent), em (1 em motsvarar standardstorleken på text) eller relativa mått som ”large”, ”small”, ”smaller”.

Ur tillgänglighetssynpunkt är det bäst att undvika px eller pt för att användaren ska kunna öka och minska storleken själv, men detta ger dig lite mindre kontroll på designen.

color

Anger färg på texten. Kan vara i fasta värden som blue, red, black, white, hexadecimala färgkoder, som #FFFF00 eller i RGB med rgb(255, 255, 0).

font-weight

Använd ”normal” för normal stil och ”bold” för fet stil. För det mesta ”normal” förvalt.

text-decoration

Använd ”underline” för understruken stil och ”none” för normal stil. Väldigt vanligt att använda för att plocka bort understrykning på länkar. Exempel:

A {text-decoration: none;}

line-height

Bestämmer radavstånd. Kan vara i samma enheter som font-size, men vanligast är att använda procent eller ”em”. Detta ger 1.5 raders avstånd.

P {line-height: 150%}

text-align

Justering av texten, t ex vänsterställd (left), högerställd (right), centrerad (center) eller marginaljusterad (justify).

Marginaler, padding, kantlinjer och boxmodellen

Namn

Beskrivning

margin

Anger marginaler för ett block-element.

Marginalen visas utanför kantlinjen.

Marginalerna anges i ordningen topp, höger, botten, vänster. De kan anges i enheterna pixlar (px), procent (%) eller em.

Om man bara anger ett värde gäller det för alla sidor.

border

Anger kantlinje runt alla sidor om ett element. Du anger tjocklek, stil och färg, t ex:

border: 1px solid black;

Detta gör en heldragen svartlinje runt hela elementet.

Border visas mellan margin och padding.

border-bottom

Anger endast en kantlinje i underkant på elementet. I övrigt samma inställningar som för border.

border-top

Anger endast en kantlinje i överkant på elementet

border-left

Anger endast en kantlinje i vänsterkant på elementet

border-right

Anger endast en kantlinje i högerkant på elementet

padding

Anger utfyllnad mellan innehåll och kantlinje. Samma logik som för margin.

width

Anger bredd på elementet. Kan anges i pixlar (px), procent (%) eller em.

Tänk på att padding, border och margin läggs till elementets totala bredd.

height

Anger höjd på elementet. Kan anges i pixlar (px), procent (%) eller em.

Tänk på att padding, border och margin läggs till elementets totala höjd.

float

Bestämmer hur elementet ska figursättas. Används flitigt för att skapa kolumner med CSS. Värde kan vara left eller right.

clear

Bestämmer att ett element inte ska flöda runt ett element som har float satt. Kan ha värdet left, right eller both.

Bakgrunder

Namn

Beskrivning

background-color

Anger bakgrundsfärg för elementet. Använd namn (red), hex-kod (#ff0000) eller rgb (rgb(255, 0, 0)).

background-image

Anger bakgrundsbild för elementet. Ex:

background-image: url(’/images/bakgrund.gif’);

background-repeat

Bestämmer om hur bakgrunden ska upprepas. Välj mellan no-repeat, repeat-x och repeat-y.

background-position

Anger var bakgrunden ska placeras. Ange top, center, bottom, left eller right.

Tabeller

Namn

Beskrivning

border-collapse:

Bestämmer om tabellceller ska ligga kant-i-kant eller separeras. Oftast vill man ange värdet collapse, t ex:

border-collapse: collapse;

Då slipper man utrymme mellan tabellceller.

Listor

Namn

Beskrivning

list-style

Anger vilken typ av punkt listan ska ha. Värdet none döljer punkten. Detta är användbart när man använder punktlistor för att skapa navigationer.

Relaterade länkar

• Planera din hemsida
• HTML - Grundstenen i webbdesign
• Skriv texter som blir lästa

Av: johan

• [Personlig sida](javascript:void top.ShowProfile('johan'))
• [Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))

Datum för publicering

• 2007-03-23