Stilmallar

En stilmall - även kallad stilblad, formatmall eller på engelska Cascading Style Sheet, CSS - använder man för att ge HTML-sidan ett enhetligt utseende, utan att behöva ange till exempel teckensnitt, teckenstorlek, färger och mycket annat på varje plats där dessa förekommer.

Stilmallen förenklar i hög grad arbetet med att ge sidan ett enhetligt utseende och att förändra detta. Ändringarna behöver ofta bara göras på ett ställe - i själva stilmallen.

Man kan koppla ihop sidans innehåll med stilmallen på flera olika sätt. Den metod vi skall använda här, är att länka ihop sidan med en helt fristående stilmall.

Nog pratat - allt det här blir lättare att förstå när du ser det, så vi ger oss direkt på den första stilmallen. 

Hittills har vi använt oss av tre rubrikstorlekar - <H1>, <H2> och <H3> - samt stycketext - <P>. Vi börjar med att bestämma utseendet på dessa. Öppna din textredigerare med ett nytt dokument och skriv in följande (jag använder en färgkodande textredigerare - din textredigerare ger troligen inte samma färger som här):

När detta är gjort sparar du det nya dokumentet med namnet hemsida.css. Se till att du sparar det i mappen där du har filen index.html (eller om du har kallat den home.html).

Filändelsen *.css står för Cascading Style Sheets.

Här finns en del uttryck som behöver förklaras

• /* ... */
  Det som skrivs mellan de båda snedstrecken med tillhörande asterisker är en kommentar. Den påverkar inte stilmallens uppförande, men gör det mycket lättare senare när du vill gå tillbaka och ändra i stilmallen. Var frikostig med kommentarer så att du förstår vad du har gjort - även om fyra veckor.
• { ... }
  Mellan de båda klamrarna lägger du allt som hör ihop med texten i en bestämd HTML-tagg. Mest lättläst blir mallen om du lägger klamrarna som jag har gjort det här.
• # följt av sex siffror
  I stilmallen anger du textfärg med det hexadecimala RGB-värdet, föregånget av "hustecknet" #. De färgvärden jag har angett i exemplet ovan är 008000 = grön och 000000 = svart - det vill säga de färger jag använder för text på den här sidan. Några andra färgvärden är 0000FF = blå, FF0000 = röd, FFFFFF = vit och FFFF00 = gul. 
     Det går att ange färgen på flera sätt, men jag rekommenderar att du använder den här metoden. Mer om färger kommer senare, i avsnittet Bakgrund och färger.
• ;
  Varje egenskap för HTML-taggen står på en egen rad och varje sådan rad skall avslutas med semikolon.
• text-align:
  Anger var texten skall placeras horisontellt. Här har du fyra val: left (vänster), center (i mitten), right (höger) eller justify (marginaljusterat med båda marginalerna raka)
• color:
  Talar om vilken färg innehållet i HTML-taggen skall ha.
• font-size:
  Anger vilken storlek texten skall ha. Detta kan anges på flera sätt, men jag har valt att använda pt eller punkter. En pt är i CSS definierat som 1/72-dels amerikansk tum (0,353 mm). Det är detta värde som används i de flesta ordbehandlare.
• font-family:
  Anger vilket teckensnitt som skall användas eller ur vilken grupp av teckensnitt fonten skall väljas. I den första gruppen ovan har jag angett "times new roman", serif; - det betyder ungefär: Använd i första hand Times New Roman, om detta inte finns använd i stället ett annat teckensnitt med serifer. Det är viktigt att du anger fontens riktiga namn. Om namnet består av flera ord skriver du det som här inom citationstecken.
• font-weight:
  Anger utseendet på texten. Här har jag valt bold (fet text).
• margin:
  Anger hur stort indraget från vänsterkanten skall vara. Det kan anges på flera sätt. Jag har valt em, som är detsamma som Åp-höjden (se Text och textformat).
• em
  1 em ger det som inom typografin kallas en fyrkant. Em-höjden (eller på svenska Åp-höjden) är ett relativt mått, eftersom det är beroende av vilken textstorlek som används. Du kan ange em-indraget på flera sätt - 1em, 2em, +1em till exempel - men observera att det inte skall finnas något mellanslag mellan 1 och em. 

Den fil du sparade tidigare - hemsida.css - är grunden till din stilmall. Senare kommer vi att bygga ut den med fler egenskaper, men den fungerar redan nu. För att den skall påverka utseendet på din hemsida, måste du emellertid koppla ihop hemsidan med stilmallen. Det skall vi göra nu.

Öppna din hemsida i textredigeraren. I avsnittet <HEAD> ... </HEAD>, lämpligen direkt under <TITLE>-taggarna, lägger du till följande rad:

<LINK REL="stylesheet" href="hemsida.css" type="text/css">

Den här raden säger helt enkelt: Sidan skall använda egenskaperna som anges i hemsida.css.

Spara din hemsida igen och öppna den i webbläsaren. 

Här kan du se hur Haj i Hjälmaren ser ut med en stilmall inkopplad.

• Hur du bestämmer egenskaper för texten utan att ändra i HTML-dokumentet
• Hur du skriver och sparar en stilmall
• Hur du kopplar ihop stilmallen med hemsidan

I Stilmallsskolan kan du lära dig betydligt mer om stilmallar. I Tips om stilmallar finns en mängd bra tips som du kan tillämpa på dina stilmallar. I HTML för hemsidesbyggare hittar du litet mer avancerade tips bland annat om hur du kan använda stilmallar för att ändra utseende på dina länkar.

Gör nu Övningsuppgifterna och Kunskapstestet

Sedan skall du lägga ut din hemsida på Internet

Övningsuppgifter
Kunskapstest

© SupportData.Net