< Style sheets >

  Stilmallar – Style sheets – CSS (Cascading StyleSheets)

Den största fördelen med style sheets, är att du kan bestämma typsnitt, storlek med mera i flera hundra olika dokument genom att bara skriva i en enda fil. En annan stor fördel är att det finns bra mycket fler formateringsmöjligheter, än vad det finns i vanlig HTML kod. Den enda egentliga stora nackdelen är att det inte fungerar tillfredsställande i de äldre webläsarna, men det är allt färre personer som använder de äldre webläsarna.

  Så fungerar CSS

HTML innehåller en rad olika element som bestämmer hur innehållet skall presenteras. Som t ex <B> eller <I> som betyder att texten skall vara fet respektive kursiv. Problemet är bara att du kanske vill att den text som du gör fet skall ha en annan färg eller kanske ha lite mellanrum mellan bokstäverna, bara för att den feta stilen skall vara lättare att läsa. Detta kan du då inte åstadkomma med vanlig HTML, visst skulle du kunna byta färg på texten, men då skulle du vara tvungen att använda ytterligare ett element i din kod. Du kan då med hjälp av CSS göra om B-elementets funktion helt och hållet med CSS, vilket betyder att på alla ställen som <B> infogas kommer de inställningar som du gjort med hjälp av CSS att gälla ända tills du stänger av elementet, så här; </B>. Låt oss nu säga att du vill göra följande ändringar på elementet B, ändra färgen till orange och ha lite mellanrum mellan bokstäverna. Då skriver du så här: B { color: orange; letter-spacing: 1cm } Det du nu har gjort är att ange två olika formateringar för B-elementet, nämligen att färgen på all fet text skall vara orange och att mellanrummet mellan bokstäverna skall vara en hel centimeter. Som du ser innehåller den blå raden ovanför lite konstiga tecken. Vi skall se vad de betyder. Det första vi skrev var ett B, i det här fallet representerar detta elementet <B> i vanlig HTML. Det första du skall göra när du skall bestämma hur ett element skall formateras är alltså att skriva det, dock utan taggar (<>). Efter det har vi gjort ett mellanslag och sedan skrivit en klammer ({). Denna indikerar att här börjar innehållet som skall formatera B-elementet. Nästa ord är "color", detta är en erkänd formatering som bestämmer färg. Alla sådana formateringar kallas för egenskaper. Så fort du skrivit en egenskap skall du också skriva ett kolon, så här: "color:". Efter det gör man ett mellanslag och skriver värdet, i det här fallet "orange". Om man sen skall ha fler än en egenskap inom samma klammer, skriver du efter värdet ett semikolon, så här: "orange;" och upprepar sedan proceduren "egenskap: värde; egenskap: värde. När detta är gjort avslutar du med en bakvänd klammer, (}). Som du ser i exemplet ovan är värdet 1 angivit i centimeter (cm), nästan alla värden kan anges i olika mått, dessa är de vanligaste; punkter (pt), pixlar (px), centimeter (cm), tum (in), picas (pc), procent (%) och millimeter (mm). På denna sajt (Webkokboken) använder vi stilmallar både för menyn och för texten i sidorna, vilket gör det enkelt att justera text formatet i efterhand.

  En riktig stilmall

Det bästa och mest effektiva sättet att jobba med CSS, är att ha en separat fil där du skriver alla formateringar, på så vis kan du enkelt ändra hur utseendet på all fet text skall se ut i flera hundra olika dokument samtidigt, alltså genom att bara ändra i en enda fil, dvs i din stilmall. För att skapa denna mall, startar du enklast Anteckningar i Windows och väljer spara som, se till att du sparar filen i samma mapp som de övriga dokumenten som skall formateras efter mallen ligger i. Döp nu filen till vad du vill, max åtta bokstäver och inga å, ä eller ö. Se till att filen slutar på .css, om den inte slutar på .css kommer den inte att fungera. Du har ni gjort en stilmall, dessvärre är den tom och behöver fyllas med lite formateringar. Återgå till Anteckningar och skriv in några formateringar. Exempelvis så här: B { color: orange; letter-spacing: 1cm } I { color: blue; text-decoration: overline } Just nu innehåller din stilmall två formaterade element, dvs <B> och <I>. Vilket betyder att all text som du skriver inom <B> och </B> i dina dokument kommer att ha orange färg och 1 centimeters mellanrum mellan varje bokstav. Likaså kommer all kursiv text som du skriver mellan <I> och </I> att vara blå och ha en överstruken linje. Se till att spara din stilmall. Tyvärr är det inte riktigt klart ännu, för att sammanknyta din stilmall med de dokument som du vill skall formateras efter de värden du angett i din mall, måste du infoga en rad i ditt HTML-dokument som ser ut så här: <LINK REL=STYLESHEET HREF="minmall.css" TYPE="text/css"> <LINK> infogar du mellan <HEAD> och </HEAD> i ditt dokument. Så här: <HTML> <HEAD> <TITLE>Min första stilmall</TITLE> <LINK REL=STYLESHEET HREF="minmall.css" TYPE="text/css"> </HEAD> <BODY> </BODY> </HTML> När du gjort detta måste du också använda dig av <B> och <I> för att se om dina nyss gjorda formateringar fungerar. Lägg därför till följande text mellan <BODY> och </BODY> i ditt dokument. Texten framför använder <B>kommer att vara orange</B>, likaså kommer nästa text att vara <I>blå och ha en linje över sig</I> samtidigt som denna texten kommer att vara helt normal. Spara nu ditt dokument, öppna det i din webläsare, som bör vara Internet Explorer 4.0, och skåda resultatet.

  Stilmall för bara ett dokument

Det här är förmodligen det mest kända och vanligaste sättet att använda CSS på, dessvärre är det inte alls lika effektivt som det ovan. Detta sätt använder du dock när du vill att formateringar endast skall gälla för endast ett dokument. Istället för att länka till en stilmall med hjälp av <LINK> där alla formateringar finns, skriver du dem istället direkt i dokumentet. För att skriva dem direkt i dokumentet måste du först skriva stilelementet, <STYLE>. Efter det skriver du dina formateringar precis som om du skrev dem i en separat mall. När du är klar avslutar du med </STYLE>. För att detta inte skall bugga med äldre versioner av webläsare, lägger du in kommentarer för att dölja koden, precis på samma sätt som du döljer java-script som man infogar direkt i dokumentet. Så här: <STYLE> <!-- Här skriver du formateringarna --> </STYLE>. Ex: <HTML> <HEAD> <TITLE>Mina första stilmallsexperiment</TITLE> <STYLE> <!-- B { color: orange; letter-spacing: 1cm } I { color: blue; text-decoration: overline } --> </STYLE> </HEAD> <BODY> Texten framför använder <B>kommer att vara orange</B>, likaså kommer nästa text att vara <I>blå och ha en linje över sig</I> samtidigt som denna texten kommer att vara helt normal. </BODY> </HTML> Skapa ett helt nytt dokument och klistra in ovanstående kod, spara och titta på det i din webläsare, du kommer då att märka att resultatet blir exakt detsamma som när du använde formateringar från din separata stilmall. Skillnaden är dock att om du skulle ha haft flera dokument som skulle haft samma formateringar, hade det varit mycket enklare och mer effektivt att använda en separat stilmall, eftersom du då skulle kunna ändra utseendet på all text i flera dokument genom att bara behöva ändra i en fil.