Hur man använder stilmallar – CSS

Stilmallar eller CSS (Cascading Style Sheet) kan utnyttjas för att bestämma layouten på webbsidor. Idén med stilmallar är helt enkelt den att då man bestämmer hela layouten på ett och samma ställe kan man senare redigera layouten på hundra- eller t.o.m. tusentals webbsidor samtidigt, genom att redigera en enda stilmall.

Länka stilmallar till en webbsida

För att kunna utnyttja en stilmall på en webbsida måste man skapa en länk från head-elementet på varje sida till stilmallen. Följande bild illustrerar hur man gör länken:

Namn på stilmallen
raggestil.css
  | | |
Länk från webbsida till stilmall: index.html kontaktinfo.html hobbyer.html

Man länkar till CSS-mallen genom att skriva in elementet link i elementet head på varje webbsida som i följande exempel (se texten med fet stil):

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"
>

<title>Portfolio</title>

<link href="raggestil.css" rel="stylesheet" type="text/css">

</head>

I exemplet ovan refereras från webbsidan till silmallen som heter raggestil.css. Man kan själv välja namn på stilmallen: det kan t.ex. vara photogallery.css m.m. Efter att man har skapat en fungerande länk från webbsidan till stilmallen ska man kopiera referenskoden också till övriga webbsidor. Sedan kan man redigera stilmallen för att bestämma layouten på alla webbsidorna.

Redigera stilmallar

När en webbläsare laddar ner en webbsida kontrollerar den samtidigt css-filen som länkats till webbsidan för att se om något element på webbsidan har omredigerats i CSS-mallen. Man kan alltså bestämma att t.ex. någon viss rubrik (h1 eller dylikt) består av ett visst teckensnitt, att länkar har en viss storlek, eller andra förändringar till sidans layout.

I exemplet nedan ser vi innehållet i en mycket enkel CSS-stilmall. Den definierar hur h1- och h2-rubriker ska se ut.

h1 {
font-size: 18px;
    font-weight : normal;
    font-family: arial, georgia, serif;
    color : #666;
    margin: 0px;
}
h2 {
font-size: 14px;
    font-weight : bold;
    font-family: arial, georgia, serif;
    color : #666;
    margin-top: 4px;
    margin-bottom: 1px;
}

Du kanske observerade att varje element i en stilmall skrivs in i en klammerparentes { }. Observera också att varje definitionsrad slutar med ett semikolon ; 

Class-referenser till innehållet i stilmallar

Då man använder vanliga element, som h1 eller p, behöver man inte hänvisa till stilmallar varje gång de förekommer på en webbsida. Det räcker alltså om man har skapat en länk till stilmallen från webbsidans head-element. Om man däremot vill använda olika stilmallar t.ex. i olika delar av webbsidan, kan man göra särskilda referenser till stilmallen med class-attributet som vi lärde oss tidigare. Då måste man också skriva in nya definitioner i stilmallen. Exemplet nedan visar hur man kan göra en class-referens från webbsidan till en stil som heter "ingress" och finns definierad i stilmallen:

<div class="ingressi">
<p>
Ragnar Keskivarsen, bekant från bl.a.
programmet Järnkocken, berättar
sitt livs historia åt Irene Torsion.
</p>
</div>

Nedan ser vi hur man kan definiera den ovannämnda stilmallen class="ingress" i css-mallen.

.ingress {
font-family: arial, georgia, serif;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #333333;
}

Observera att man vid behov kan skapa många stilmallar för bruk i olika webbsajter.