Styr utseendet med stilmallar

HTML skapades ursprungligen enbart för uppmärkning av innehåll, med taggar för rubriker, stycken, tabeller mm. Utseendeformateringen var tänkt att tas om hand av webbläsaren. Med tiden skapades dock speciella taggar och attribut för formatering av utseendet, till exempel font-taggen och color-attributet, och det blev allt svårare att skapa webbsidor med utseende och innehåll klart åtskilda.

För att lösa det här problemet skapades Cascading Style Sheets (CSS) som ett tillägg till HTML 4.0 och det har därefter utvecklats och finns nu i 3 nivåer (CSS3 är ännu inte färdigutvecklad). CSS fungerar i stort sett på samma sätt som formatmallar i ett ordbehandlingsprogram (t ex Word). Man definierar hur rubriker, brödtext, tabeller, listor mm ska se ut i stilmallen och kan även referera i sina HTML-taggar till en speciell stil. Hur du vill bygga upp användandet av CSS är ganska valfritt. Du kan till exempel använda en enda extern css-fil för hela din webbplats (detta kan dock bli lite svårjobbat om du har många stilregler) eller kan du dela upp formateringen så att du har en speciell del av sajten i en fil, exempelvis menyn, och typsnitt, färger mm i en annan fil. Allt beror på hur ditt upplägg ser ut och vad som känns mest praktiskt. Du kan koppla flera stilmallar till samma webbsida.

Fördelar med CSS

  • Enklare att kontrollera typsnitt och layout – Med CSS har du större valfrihet.
  • Tidsbesparande – Du kan på väldigt kort tid ändra typsnitt och andra detaljer genom att bara ändra på ett ställe i en fil.
  • Snabbare webbplats – Genom mer strukturerade och mindre XHTML-dokument sparar du in på filstorlek och därmed nedladdningstid.
  • Tillgänglighet – Du kan med CSS enkelt anpassa din webbplats för olika sorters webbläsare och nå en större målgrupp.

Hur gör man?

  1. Skapa ett XHTML-dokument.
  2. Skriv regler för hur du vill att de olika elementen ska formateras (en stilmall).
  3. Länka dina regler till XHTML-dokumentet.

Skriv regler för olika element

En av de stora fördelarna med stilmallar är att de är ganska enkla att skriva. Du behöver inga speciella program utan kan använda en vanlig texteditor (t ex Anteckningar i Windows) eller den editor du använder för att skriva XHTML.

Typer av regler i CSS:

  • HTML-element (till exempel p, h1, em, img osv.)
  • Klass (.klassnamn)
  • ID (#uniktID)

HTML-element
När du vill bestämma hur ett visst HTML-element ska se ut på dina sidor skriver du din stil på följande sätt.

HTML-element { egenskap1: värde1; egenskap2: värde2; egenskapN: värdeN; }

-Observera att alla värden avslutas med ett semikolon.

Exempel:
I regeln nedan anger vi att rubriken h1 ska visas med typsnittet verdana i första hand (finns inte detta på användarens dator ska arial väljas och om inte detta heller finns går det bra med vilket typsnitt som helst utan seriffer), storleken ska vara 18 pixlar och färgen röd (anges här med en så kallad hexadecimal kod). 

h1{font-family: verdana, arial, sans-serif; font-size: 18px; color: #ff0000}

En förteckning över egenskaper som du kan ge dina olika element (properties) finner du på: http://www.w3schools.com/cssref/default.asp

Klasser
Om du exempelvis vill ge p-taggen olika utseende på olika ställen i din html-fil eller ge all text i sidfoten på din sida ett speciellt utseende, kan du definiera och använda det som kallas klasser. Tänk att klasser endast ska användas i undantagsfall så att man i html-filen inte hela tiden behöver ange en klass för varje p-element. Samma klass kan användas flera gånger i samma html-fil. Syntaxen för en klass ser ut på följande sätt (notera punkten framför klassnamnet):

.klassnamn { egenskap1: värde1; egenskap2: värde2; egenskapN: värdeN; }

Klassnamnet kan du själv hitta på, men tänk på att undvika reserverade ord och bokstäverna å, ä, ö eller andra specialtecken.

Exempel:
I stilmallen har följande klass skapats:
.minKlass{font-size: 12px; font-family: geneva, sans-serif;}

…som man anropar genom att i (X)HTML-filen lägga till ett attribut till ett av mina element:
<p class=”minKlass”>Ett textstycke</p>

I HTML-elementet skriver man enbart klassnamnet utan punkten som angetts i stilmallen.

ID
ID fungerar på i stort sett samma sätt som klasser på så vis att de kan användas i vilket html-element som helst. Skillnaden är att ID bara används en gång på webbsidan för att kunna utgöra ett unikt objekt som exempelvis används i en JavaScript-funktion. Syntaxen för Id:

#idnamn { egenskap1: värde1; egenskap2: värde2; egenskapN: värdeN; }

Se exempel på en sida med klasser och idn

Lägga till en stilmall till din webbsida

För att innehållet på din webbsida ska formateras med den stilmall du skapat, behöver du lägga till stilmallen eller en länk till denna i din XHTML-fil. För att riktigt utnyttja fördelarna med CSS använder man en eller flera externa stilmallar (till exempel filerna stilmall.css, meny.css, utskrift.css etc.) som man knyter till sina olika XHTML-filer. På så sätt är det enkelt att göra genomgripande förändringar i utseendet på webbplatsens alla sidor genom att bara ändra i en stilmall. En annan fördel med CSS är att man kan skapa olika stilmallar för olika media, t ex ett CSS som bestämmer hur sidor ska se ut när de skrivs ut eller visas på handdator. Vill du på en sida frångå den externa stilmallen på vissa punkter kan du lägga en intern stilmall eller göra en ”inline style”.

CSS kan användas på tre olika sätt och prioriteras i följande ordning då man använder flera stilmallar på samma sida (du kan alltså använda alla metoderna på samma webbsida). Det är detta som avses med ”cascading”:

  1. Inline style
    <h1 style=”color:#ff0000;”>Den här rubriken är röd</h1>
  2. Intern stilmall – Stilmallen läggs inuti head-elementet (omsluten av style-taggar).
    <head>
    <title>Webbsidans titel</title>
    <style type=”text/css”>h1{color:#ff0000}</style>
    </head>
  3. Extern stilmall – Stilmallen är en separat fil som man länkar till i HTML-filen.
    <head>
    <title>Webbsidans titel</title>
    <link rel=”stylesheet” type=”text/css” href=”minstilmall.css” />
    </head>

Foto på filmrutor.
Se film om hur du kan lägga till stilmallar på olika sätt
(nytt fönster)
I filmen användes följande exempel:

Tips! Besök CSS Zen Garden för inspiration – här kan du välja att vissa innehållet på sajten med olika stilmallar.

 

CSS3

CSS2 blev en officiell standard 1998 och alltsedan dess har webbläsarna vidareutvecklats för att stödja den här standarden. Nu kan vi konstatera att de senaste versionerna av de stora webbläsarna fullt ut stödjer CSS2.

CSS3 är den senaste versionen av CSS och är uppbyggd på ett lite annorlunda sätt än CSS1 och CSS2. Man har här valt att arbeta med moduler och standarden beskrivs därför i ett flertal separata dokument. CSS3 bygger på CSS2 men innebär både tillägg av nya möjligheter såväl som utökning av de funktioner som beskrivs i CSS2.

De olika modulerna befinner sig i lite olika utvecklingsstadier, allt från ”Working Draft” till ”Proposed recommendation”. Ta gärna en titt på följande översikt: http://www.w3.org/Style/CSS/current-work

Ska jag använda CSS3?

Prova gärna på att använda de nya funktioner som finns men säkerställ att sajten ändå fungerar i webbläsare som inte har stöd för CSS3. Det behöver inte se likadant ut överallt. De senaste versionerna av de stora webbläsarna stöder CSS3 till stor del. I Norman’s blogg kan du hitta en sammanställning i tabellform över webbläsarnas stöd för olika CSS3-funktioner: http://www.normansblog.de/demos/browser-support-checklist-css3/

Lär mer om CSS3 (om du vill) i W3Schools CSS3 tutorial

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

HTML-taggar är inte tillåtna.