Introduktion till stylesheets (stilmallar)

Obs!
Alla exempel öppnas i ett nytt fönster!

1. Vad är stylesheets?

Stylesheets kallas ibland även för stilmallar och är en teknik som används för att få större kontroll över en webbsidas layout. För när du använder de vanliga HTML-kommandona, som H1, P, och EM, talar du bara om att där skall finnas en rubrik, ett nytt stycke eller en förstärkning. Men med stylesheets-kommandona kan du även bestämma sådant som vilket typsnitt som skall användas och hur stort mellanrum det skall vara mellan bokstäverna och orden.

Stylesheets är en utökning av vanlig HTML och ersätter eller kompletterar många av de kommandon som finns i HTML. På de här sidorna kommer du att få lära dig i stort sett allt som finns att veta!

Hur bra stilmallar än är på papperet, fungerar de fortfarande dåligt. När det här skrivs (januari 2001) är det bara Explorer 4.5 och högre, samt Netscape 6 som har bra stöd för stilmallar. De klarar uppskattningsvis 75% av alla stilmallskommandon.

Dessvärre finns det inte samma stöd i de olika versionerna och äldre versioner gillar inte alls vissa kommandon. Att använda stylesheets är därför lite av ett vågspel!

Det kan också vara bra att veta att den stylesheet-version man just nu använder kallas CSS2, eller 'Stylesheets nivå 2', som blev standard den 12 maj 1998. Den tidigare versionen, CSS1, antogs den 17 december 1996.

Båda standarderna utarbetades och bestämdes av The World Wide Web Consortium, även kallade W3C. Någon ytterligare version är dock inte att vänta, i och med att man i framtiden kommer att använda stilmallar anpassade för XML. Läs mer om det på mina sidor om just XML. Läs mer >

2. Några användningsområden

Man använder stylesheets när man vill ha större kontroll över hur sidan presenteras. Från början var det tänkt att stylesheets skulle användas för att möjliggöra en typografisk utformning av hur dokumenten skall presenteras, oavsett webbläsare, bildskärmstyp eller dator.

I teorin fungerar det också mycket bra, i klass med program som QuarkXPress och InDesign. I praktiken finns dock mycket mer att önska, med tanke på webbläsarnas svårigheter att förstå många kommandon.

Stylesheets var också tänkta att skapa en anpassning till andra medier, som t.ex skrivare, när man vill att dokumentet skall gå att skriva ut utan att layouten förändras. Det finns även möjligheter att styra sidan för dem med handdatorer eller blindskriftsläsare. Det kommer jag dock inte att säga så mycket om här.

Idag används stilmallar främst av dem som vill ha en bekväm kontroll över sidornas på en sajt layout. Jag själv använder en extern stilmall, som styr utseendet på alla sidor, när det gäller länkfärger, fonter, textstorlek, rubriker, osv.

Många använder också stilmallar för att skapa lite roliga effekter på sidorna, t.ex som jag gjort här:

HEJ!

Du kommer att få lära dig mer om sådana trix så småningom. Först måste vi dock förstå hur det fungerar.

3. Lite om hur det fungerar

Stylesheets kan användas på några olika sätt. Det enklaste är att skriva dem direkt i HTML-dokumentet, för att formatera en enskild rubrik eller stycke. Men det fungerar egentligen bara i Explorer 4 och 5 (om alls).

Man kan också omforma hela dokumentet med en eller flera stilmallar, som placeras i HEAD. Detta kallas för en inbäddad stilmall (embedded stylesheet).

Det går även att lägga in en extern stilmall, för att kunna omforma flera dokument samtidigt. Detta kallas för extern stilmall (external stylesheet).

Stilmallar är också cascading. Någon bra svensk översättning finns inte, men man skulle kanske kunna säga att det betyder "svallande", "flödande" eller "strömmande". Att stilmallar kan "svalla" betyder helt enkelt att de går att kombinera. En extern stilmall försöker alltid jämka samman sina värden med en inbäddad, osv. Detta beskriver jag närmare längre ner på sidan.

De olika varianterna av stilmallar ser i princip likadan ut. Det som skiljer är hur de läggs in i HTML-dokumentet:

Hur man utformar enskilda element

Stilmallar för enskilda element bör användas med viss försiktighet. Anledningen är alltså att webbläsarna är dåliga på att förstå vad man menar. De ser ut så här:

<DIV style="font-size: 18pt; font-family: Impact; color: lime"> Här är ett exempel </DIV>

vilket blir

Man använder dels ett nytt element, DIV, vilket jag tycker fungerar bättre än P. DIV är inte något annat än en enkel behållare, som skapar ett textblock. Det fungerar i princip som P. Jag berättar mer om DIV i nästa avsnitt.

Det finns ett motsvarande element för inbäddad text, SPAN, som alltså inte skapar separata textblock utan mer liknar B, S och U till sin karaktär. Du kommer se både DIV och SPAN ganska ofta på de här sidorna och förstår snart hur de fungerar.

I exemplet använde vi även ett nytt attribut: style. Det kommer du däremot inte se något mer, eftersom jag inte gillar stilmallar inne i HTML-element.

Den del i koden som utgör själva stilmallen är den som står efter style=". Här hittar du uttrycken font-size, font-family och color, som deklarerar olika egenskaper, som webbläsaren skall skapa. När kommandot är skrivet visas texten med 18 punkters Impact (förutsatt att Impact finns i typsnittsmappen på datorn) och med grön färg.

Hur man utformar hela dokumentet

Ofta vill man omforma all text i dokumentet och då skriver man STYLE-kommandot i HEAD i stället. Detta kallas då för en inbäddad stilmall (embedded stylesheet). Man skriver så här:

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
<!--
BODY { font-size: 10pt; font-family: Times, serif }
-->
</STYLE>
</HEAD>

META-kommandot och <STYLE type="text/css"> behövs för att webbläsaren skall förstå att du använder en stilmall.

<!-- och --> tillhör egentligen inte stylesheets-funktionen, utan man använder dem för att dölja texten för gamla webbläsare. Det finns nämligen fortfarande webbläsare som inte förstår STYLE-kommandot och visar koden som vanlig text. För att undvika det måste man åtminstone förhindra att texten visas på skärmen eller i en utskrift, och därför använder man <!-- och -->. Skrivs lämpligen på separata rader, som jag gjort ovan.

Sedan kommer vi till själva stilmallskoden och då fungerar det så här. BODY kallas för selektor eftersom det är den som talar om vad det är för element som skall styras. Det finns en lång rad selektorer, som jag beskriver närmare på nästa sida.

Efter BODY kommer en deklaration, som står innanför krullparenteser. Deklarationen består i sin tur av ett antal egenskaper och värden. I exemplet är font-size den enda egenskapen och värdet till den är 10pt.

Egenskaperna skiljs åt med ett semikolon. Efter en egenskap följer ett kolon. Värdena skiljs åt med kommatecken. Jag berättar mer om hur man skriver koden i avsnitt 5.

Hur man anropar externa stilmallar

Med "extern stilmall" menar jag ett dokument som bara är stilmall och alltså inte innehåller någon annan text. En sådan fil har extensionen .css. En extern stilmall använder du om du vill att alla dina dokument skall ha samma layout. Fördelen är att du då bara behöver redigera i css-filen, när du vill påverka layouten i samtliga dokument. Jag har arbetat så på min resurs och tycker att det fungerar ypperligt.

Det finns två sätt att importera stilmallar på. Man kan använda kommandot @import, som beskrivs närmare i kapitel 6.3 i CSS2-specifikationen. Du kan också läsa mer om det på sidan om mediatyper. Gå dit >

Det andra sättet fungerar bättre. Man skriver så här:

<HEAD>
<LINK rel="stylesheet" type="text/css" href="Stilmall.css">
</HEAD>

LINK betyder här "Öppna en extern fil" och med attributen "rel" och "type" anger man vad det är för typ av fil. Själva sökvägen skriver man som vanligt i efter "href".

Stilmallsfilen skall vara en vanlig textfil, med extensionen .css. Den skall innehålla selektorer och deklarationer, men inget mer. Eftersom stilmallar lätt blir omfattande och svåröverskådliga, finns ett bra sätt att skriva dolda kommentarer inne i koden. Här är ett exempel:

BODY { font-size: 12pt }
P { line-height: 120% }    /* alltså beräknat på 12 punkter */

/* kallas ofta för escape-tecken och innebär alltså att webbläsaren inte försöker få med det i koden. Den tolkar alltså inte det som står där. (Det kan den däremot försöka göra om man använder <!-- och -->. De används bara för att dölja texten på skärmen.)

Om man vill använda citationstecken innanför citationstecken är det viktigt att man skriver rätt. Detta blir t.ex fel:

"textsträng som har ett "värde""

eftersom webbläsaren försöker para ihop citationstecknen. Den kommer följaktligen att tolka det hela som:

"textsträng som har ett "    + värde    + ""

Därför bör man skriva så här i stället:

"textsträng som har ett \"värde\""

\ används alltså för att dölja enskilda tecken. Det är ytterst sällan man behöver använda det, men man bör känna till att möjligheten finns.

4. DIV och SPAN

DIV kan enklast förklaras som ett element för "diverse" olika saker. Det är en slags behållare som är särskilt användbar när man arbetar med stilmallar. DIV skapar ett textblock, men gör inget annat. Det fungerar ungefär som P, men används framförallt för att slippa styra P-elementet.

SPAN skapar inbäddade textboxar, på samma sätt som elementen B, U och I. Även SPAN är en behållare, som i sig inte gör något med texten. Därför passar det bra att använda för stilmallar. Man kan t.ex med fördel lägga in ett antal styrningar av SPAN och sedan använda det på samma sätt som B (bold) och I (italics).

Skillnaden mellan de båda elementen går att visualisera så här:

<P>aaaaaa<DIV>bbbbbb</DIV><DIV>cccccc<P>dddddd</DIV>

kommer att tolkas på följande vis:

aaaaaa

Blev det rätt? Här är så som det borde se ut:

aaaaaa
bbbbbb
cccccc

dddddd

Skriver du däremot så här:

<P>aaaaaa<SPAN>bbbbbb</SPAN><SPAN>cccccc<P>dddddd</SPAN>

visas texten så här:

aaaaaabbbbbb

Blev det rätt? Här är så som det borde se ut:

aaaaaabbbbbbcccccc

dddddd

5. Stilmallens prioritet

Eftersom stilmallar är "svallande" (cascading) kan man lägga in och kombindera flera olika stilmallar i samma dokument.

• En stilmall i HEAD kan kombineras med specifika omformningar i BODY.
• En stilmall i HEAD och/eller en i BODY kan kombineras med en extern stilmall.
• Två externa stilmallar kan importeras och kombineras.

Ibland uppstår emellertid konflikter mellan olika stylesheets. Därför skall man alltid undvika att använda fler än en stilmall. I vilket fall måste man testa, testa och åter testa sina sidor, innan man kan vara säker på att det fungerar. I övrigt gäller följande (generella) regler:

Webbläsarens inställningar väger alltid tyngst och man måste ibland manuellt ta bort denna styrning. Leta bland menyerna i din webbläsare tills du hittar något i stil med: "Använd dokumentets stilmall". Dokumentets egna stilmallar har sedan större vikt än webbläsarens. Saknas stilmallar använder webbläsaren sina egna inställningar för färger och teckensnitt.

Direkt utformning i dokumentet (i BODY) väger tyngre än utformningen i HEAD, som väger tyngre än importerade (externa) stilmallar.

Den första importerade stilmallen har större vikt än alla efterföljande.

Mer specifika utformningsregler väger tyngre än mindre specifika. Hur specifik deklarationen är bestäms av:

• antalet element i selektorn
• antalet klassattribut i selektorn
• antalet ID-attribut i selektorn

Om två regler har samma vikt så får den som skrevs först i dokumentet företräde. Exempel: om ett kommando i HEAD har samma vikt som ett i dokumenttexten (i BODY) så gäller det i HEAD.

Självklart finns det också undantag! Man kan ge en deklaration extra vikt för att ställa reglerna ovan åt sidan. Man kan dels säga att den är väldigt viktig och dels ge den en viss prioritet.

Inställning av viktighet går till så att man använder värdet ! important:

EM { color: red ! important }

Vi får därför ytterligare en regel, som säger att:

• En förstärkt, important-märkt deklaration väger tyngre än en normal.

Inställning av prioritet innebär att man ger de olika stilmallarna olika vikt i förhållande till varandra. Prioriteten bestäms av att du i stilmallselementet, dvs i DIV, STYLE eller LINK, anger olika attribut:

• tvingande (persistent), skriv: rel="stylesheet" för att tvinga webbläsaren att använda denna mall.
• önskad (preferred), skriv: rel="stylesheet" title="din_stilmalls_namn.css". Denna rekommenderas att du använder eftersom den ger webbläsaren en större valfrihet.
• alternativ (alternte), skriv: rel="alternate stylesheet" title="din_stilmalls_namn.css"

Så här har jag själv skrivit på mina sidor:

<LINK rel="stylesheet" type="text/css" href="screen.css" title="Stilmall f&ouml;r Jonas Webresurs">

Man bör dock ha klart för sig att sådana här önskemål om vikt och prioritet sällan fungerar. Dels använder webbläsaren en egen inställning, som fungerar som en slags stilmall. Den går inte alltid ihop med den du har skrivit. Dels blir det oftast pannkaka när man försöker kombinera två separata stilmallar. Dels klarar inte webbläsaren av att förstå vilket som är viktigast. Och om den klarar det gör inte dess kusin det.

Därför rekommenderar jag dig att bara använda en enda stilmall per HTML-dokument och att göra den "önskad" och utan några vidare krusiduller!

6. Hur man skriver koden rätt

Man måste skriva alla kommandon rätt för att webbläsaren skall kunna förstå dem. Följande (generella) regler gäller:

selektor_{_egenskap:_ värde;_egenskap:_ värde;_}

Understrykningstecknet visar var det skall finnas ett mellanslag. Deklarationerna skiljs åt med semikolon. Man behöver inte ha semikolon efter sista värdet, men glömmer man det mellan de olika egenskaperna, kommer stilmallen inte att fungera som den skall.

Man kan göra stilmallen mer överskådlig genom att använda fler mellanslag, tabbar och radbrytningar:

P {
font-size: 12pt;
font-weight: bold;
color: green;
}

Ett längre namn, som "Times New Roman" måste bindas ihop med citationstecken:

P { font-family: "Times New Roman", Times }

Citationstecken får däremot inte användas omkring nyckelord (keywords), eftersom nyckelorden inte skiljs åt. I specifikationen står dock ingen närmare förklaring vilka dessa är. Är man osäker bör man alltså använda den längre formen.

Man skriver hur som helst nyckelorden så här:

P { border: solid thick red }

Här står border som kortform för border-color, border-width, etc. Jag berättar mer om detta så småningom.

Det finns också olika sätt att förenkla hanteringen av kommandona. Du behöver t.ex inte skriva:

P { font: 10pt Times }
H1 { font: 10pt Times }

utan kan i stället skriva

P, H1 { font: 10pt Times }

Du skiljer bara selektorerna åt med kommatecken och mellanslag. Du behöver inte heller skriva:

P { font: 10pt Times }
P { color: red }

utan kan i stället skriva:

P { font: 10pt Times; color: red }

Du skiljer deklarationerna åt med semikolon och mellanslag.

En viktig sak att känna till är att en selektor kan användas som en sökväg: man pratar om kontextuella selektorer (contextual selectors). Sökvägen skapas genom att kommatecknet mellan selektionerna inte tas med. Ett exempel:

UL OL { font-size: small }
UL, OL { font-size: small }

Den översta raden anger då en sökväg och säger att bara de OL-listor som finns i UL-listor skall omformas. Den andra raden säger att både UL- och OL-listor skall omformas. De båda sätten kan även kombineras:

UL OL, DL { font-size: small }

som är samma sak som att skriva:

UL OL { font-size: small }
DL { font-size: small }

Jag berättar mer om detta på nästa sida.

7. class och id

När man använder selektorer vill man ofta göra varianter av redan befintliga HTML-element. Här är ett exempel:

H1 { font-size: x-large; font-weight: bold }
H1.special { font-size: x-large; font-weight: bold; font-style: italic }

Här har jag skapat en klass av H1-objekt, som när de anropas gör rubriken kursiv i stället för normal. Nu skall vi titta närmare på hur detta fungerar.

class

En klass är en slags selektor, som både kan användas till ett bestämt element, som i exemplet ovan, eller till alla element. I det senare fallet skriver man inget elementnamn före, dvs:

.special { font-size: x-large; font-weight: bold; font-style: italic }

Då kommer inställningen att gälla alla element som anropar klassen. Class används alltså för att utforma flera olika stiltyper i ett och samma dokument, som olika textstycken, citat, tabeller, listor, osv. Poängen är att man slipper utforma varje textstycke, tabell, lista, etc, för sig.

För att anropa en klass i HTML-dokumentet, skriver vi:

<H1 class="special">Rubrikens text</H1>

Skulle det visa sig att ett element behöver anropa två olika klasser går det också bra. Skriv då t.ex:

<H1 class="special, green">Rubrikens text</H1>

id

Ett element kan även ges en unik identitet. Förfarandet skiljer sig från att skapa en klass på så vis att det pekar ut ett unikt element (t.ex ett visst stycke eller citat), snarare än en viss elementtyp. Man använder och skriver det dock på ungefär samma sätt:

H1 { font-size: x-large; font-weight: bold }
H1#special { font-size: x-large; font-weight: bold; font-style: italic }

Här skriver man # i stället för en punkt. Man anropar i dokumenttexten med:

<H1 id="special">Rubrikens text</H1>

Du kommer att få lära dig mer om klasser och identifikatorer på kommande sidor!

8. Fungerar det inte?

Ibland fungerar det inte som man vill. Det kan bero på några olika saker:

Du använder inte en tillräckligt ny webbläsare. Version 4.5 av Netscape eller Explorer krävs normalt, men det finns gott om kommandon som inte heller de klarar.

Du har stängt av visningen av scripts i webbläsaren. Stilmallar tolkas av någon anledning som en slags scripts och visas därmed inte. Gå in under Inställningar (Preferences) och leta reda på den lilla ruta du måste kryssa i för att tillåta scripts.

Du har inte stavat kommandona rätt

Du använder inte den korrekta syntaxen.

Du använder kommandon som browsern av någon anledning inte kan förstå. Netscape och Explorer har t.ex vissa egenheter, som gör att sidan inte laddas som den skall, trots att man skrivit rätt stylesheet-kommandon. Buggar och annat kan du kolla på de olika resurssidor jag angett på länksidan. Läs mer >

Du försöker styra tabeller, listor och BLOCKQUOTE. Det brukar inte fungera särskilt väl. Ett tips är att du skapar en stilmall i olika steg, där du testar sidan efter varje ny, inlagd funktion. När det kraschar vet du då varför!