Style Sheets

Med style sheets kan man i detalj kontrollera sina webbsidors utseende. Man kan styra textstorlek, radavstånd, marginaler, indrag, typsnitt, text- och bakgrundsfärger, ramar runt texten etc. Stilanvisningarna kan placeras i en separat fil som då gäller för alla eller vissa av ens webbsidor, eller inkluderas i själva HTML-filen så att de gäller enbart för den sidan hela sidan eller en viss del av sidan.

Observera att det fortfarande är så att man inte kan veta exakt hur det ser ut i varje webbläsare, eftersom alla datorsystem ser olika ut, med olika skärmstorlekar, färgmöjligheter, installerade typsnitt etc. Style sheets är en rekommendation som användaren, och användarens datorsystem, kan välja att följa helt, delvis eller inte alls.

Med style sheets kan man ange olika stilanvisningar för olika situationer. Till exempel kan en sida gjord med ett typsnitt och ett färgval som passar för visning på skärmen ha ett alternativt style sheet som gäller vid utskrift. Detta style sheet kan innehålla helt andra stilanvisningar, speciellt anpassade för att utskriften ska bli så bra som möjligt.

På samma sätt kan man ange olika style sheets för om webbsidan ska visas av en grafisk webbläsare på en stor skärm, av en textbaserad webbläsare med en liten, handhållen skärm, av en WebTV eller om den ska läsas upp av en talsyntesbaserad webbläsare.

Varje enskild användare kan också specifiera ett eller flera egna style sheets som passar just hennes datorsystem, synskärpa och smak. Stilanvisningarna i detta kan antingen alltid ges företräde framför dokumentets stilanvisningar, eller användas när en webbsida saknar egna stilanvisningar

Cascading style sheets

CSS eller CSS1 (Cascading Style Sheets, level 1) är ett enkelt men kraftfullt "språk" för att ange stilanvisningar för webbsidor. Det finns flera olika andra style sheet-språk som har delvis olika användningsområden, och HTML-specifikationen medger att man använder vilket som helst, men alla webbläsare stöder inte alla språk.

CSS passar för de flesta allmänna och många specialiserade tillämpningar, och det stöds av flera webbläsare. Netscape Communicator stöder CSS från och med version 4 (inte fullt ut dock) och Microsoft Internet Explorer stöder CSS i begränsad omfattning i version 3 och nästan fullt ut från och med version 4. Andra webbläsare som stöder CSS är Arena, Emacs och Tamaya.

Det heter cascading style sheets eftersom flera style sheets kan påverka sidans slutgiltiga utseende. Man kan t.ex. ha ett länkat style sheet som gäller för hela sin webbplats och ett style sheet som gäller just den aktuella sidan. Sidan "ärver" då anvisningarna från det länkade style sheetet, som sedan kan modifieras eller specifieras ytterligare för den aktuella sidan.

Stilanvisningar för en viss webbsida

För att ange ett style sheet för ett visst dokument använder man styrkoden <STYLE> som sätts i HTML-filens "head"-del. Här kan man ange stilanvisningar för alla förekomster av en speciell HTML-kod, till exempel alla <H1>-koder, alla stycken definierade med <P> eller alla <LI>-listor.

Detta exempel gör att alla <H1>-rubriker på sidan får centrerad, röd text:

<HEAD>
<STYLE TYPE="text/css">
H1 { color: red; text-align: center; }
</STYLE>
</HEAD>

Notera attributet TYPE="text/css" som anger att det är just CSS som används. Mellan <STYLE> och slutkoden </STYLE> listar man stilanvisningar för alla HTML-koder som man vill påverka. Stilanvisningarna sätts inom klamrar ("krullparenteser") och har formen av namn: värde. Flera stilanvisningar i samma klammer separeras med semikolon.

Vissa äldre webbläsare som inte stöder style sheets kommer att hoppa över <STYLE>-koden och därmed visa stilanvisningarna på själva webbsidan. För att undvika detta kan man dölja stilanvisningrna med kommentarskoder:

<STYLE TYPE="text/css">  </STYLE>

Behovet av att gömma stilanvisningarna på detta sätt är dock inte så stort eftersom även många webbläsare som inte stöder style sheets (t.ex. Netscape 2.0 och 3.0) själva klarar att dölja koderna trots att de i övrigt inte stöder style sheets.

Om man vill ha kommentarer i ett style sheet så avgränsas de med /* och */:

<STYLE TYPE="text/css">  </STYLE>

Stilanvisningar för grupper

Man kan också ange stilanvisningar för vissa förekomster av en HTML-kod, grupperade med attributet CLASS.

Detta exempel gör att de <H1>-rubriker som hör till klassen "allan" får centrerad, röd text:

<HEAD>
<STYLE TYPE="text/css">
H1.allan { color: red; text-align: center; }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="allan">Denna rubrik påverkas av stilanvisningen
<H1>Denna rubrik påverkas inte av stilanvisningen
</BODY>

Kodens namn och klassens namn separeras med punkt: H1.allan i exemplet ovan. Om man låter flera olika typer av HTML-koder ingå i samma klass, så kan man adressera dem med bara klassnamnet, med en punkt framför:

<HEAD>
<STYLE TYPE="text/css">
.allan { color: red; }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="allan">Denna rubrik är röd
<B CLASS="allan">Dessa tre ord</B> är röda och feta.
</BODY>

Gruppering och ärftlighet

Om man skriver flera HTML-koder med komma emellan så gäller stilanvisningarna för alla dessa element:

H1, H2, B, UL.kaka { color: red; }

All text som antingen är markerad med <H1>, <H2>, <B> eller <UL CLASS="kaka"> kommer att bli röd.

Om man inte skriver komma emellan så påverkas bara den text som är markerad med alla de angivna koderna i den ordningen.

H1, B { color: blue; }
H1 B { color: red; }

Alla <H1>-rubriker och all <B>-markerad text blir blå, utom då en del av en <H1>-rubrik dessutom är markerad med <B>. Då blir den röd:

<H1>Blå blå blå</H1>
Text text <B>blå blå</B> text text
<H1>Blå blå <B>röd</B> blå blå</H1>
<B><H1>Blå blå blå</H1></B>

Notera att text som markerats i omvänd ordning (först <B> och sedan <H1>) inte blir röd.

Text markerad med flera olika koder ärver de egenskaper som inte motsäger varandra.

B { text-size: 120%; }
SPAN.viktig { text-size: 120%; }

Text som är markerad med <B> blir 20 procent större, och om texten dessutom markeras med <SPAN CLASS="viktig"> blir den ytterligare 20 procent större.

Stilanvisningar för enstaka element

Vill man ange stilanvisningar för ett enstaka HTML-element kan man identifiera det med attributet ID.

Detta exempel gör att den <H1>-rubrik som har ID="kaka" får centrerad, röd text:

<HEAD>
<STYLE TYPE="text/css">
H1#kaka { color: red; text-align: center; }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="allan">Denna rubrik påverkas inte av stilanvisningen
<H1 ID="kaka">Denna rubrik påverkas av stilanvisningen
<H1>Denna rubrik påverkas inte av stilanvisningen
</BODY>

Kodens namn och id-namnet separeras med nummertecken: H1#kaka i exemplet ovan. Bara ett enda element på varje sida får ha samma ID. Samma minnesutrymme används för ID och NAME, vilket gör att det på en sida inte får finnas ett ID och ett NAME med samma namn tilldelat.

Det går att ange stilanvisningar för ett enstaka element direkt i elementets styrkod. För att ange att en viss rubrik ska få röd, centrerad text kan man skriva <H1 TYPE="text/css" STYLE="color: red; text-align: center;">. Här anges alltså STYLE som ett attribut med ett värde av samma typ som sätts inom klamrar ovan. Att göra så kan vara motiverat i vissa fall, men observera att man då förlorar en del av styrkan och poängen med style sheets.

Stilanvisningar för pseudoklasser

Objekt som inte existerar som egna HTML-element, till exempel alla icke följda länkar på sidan eller första raden i varje stycke, kallas för pseudoklasser, och man kan även ange stilanvisningar för dessa. Kodens namn och namnet på pseudoklassen separeras med kolon:

A:link { color: blue; }
A:visited { color: red; }
A:active { color: green; }

I detta exempel blir alla oföljda länkar blå, följda länkar blir röda och länkarna blir gröna i det ögonblick man klickar på dem.

Andra pseudoklasser, som bara stöds av vissa webbläsare, är first-line och first-letter:

P:first-letter { font-size. 200%; }: Första tecknet i alla stycken blir dubbelt så stort.
P.allan:first-letter { color: purple; }: Första tecknet i stycken som hör till klassen "allan" blir lila.
P:first-line { text-transform: upper-case; }: Första raden i varje stycke blir satt med stora bokstäver.

Utnyttja <DIV> och <SPAN>

Visserligen kan i stort sett varje styrkod i HTML ingå i en klass eller ges ett id-namn, men det finns två HTML-koder som är speciellt användbara eftersom de i sig själva inte anger något speciellt utseende, nämligen block-grupperingskoderna <DIV> och <SPAN>.

Kombinerar man dem med style sheets kan man åstadkomma vilka effekter som helst. Till exempel kan man med <SPAN> få de första orden i varje stycke med blå kapitäler:

<HEAD>
<STYLE TYPE="text/css">
SPAN.kap { color: blue; font-variant: small-caps; }
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS="kap">De första</SPAN> orden i stycket är i blå kapitäler.
</BODY>

Stilanvisningar för olika medier

Om man vill att olika stilanvisningar ska gälla för olika medier, till exempel för visning på skärm och för utskrift, anger man attributet MEDIA i <STYLE>-koden.

I detta exempel blir alla <H1>-rubriker centrerade både på skärmen och vid utskrift. På skärmen blir de dessutom blå. Om sidan läses upp av en talsyntesbaserad webbläsare är stilen helt annorlunda.

<HEAD>
<STYLE TYPE="text/css" MEDIA="screen, print">
H1 { text-align: center; }
</STYLE>
<STYLE TYPE="text/css" MEDIA="screen">
H1 { color: blue; }
</STYLE>
<STYLE TYPE="text/acss" MEDIA="speech">
H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav); }
</STYLE>
</HEAD>

Möjliga värden för MEDIA-attributet är screen (texten visas på en icke sid-indelad skärm), print (texten skrivs ut på icke genomskinligt material), projection (texten visas med en projektor), braille (texten visas på en punktskriftsvisare), speech (texten läses upp med talsyntes) och all (gäller alla medier). Flera värden kan anges med komma emellan. Anges attributet inte så antas screen.

Det är också möjligt att tillverkare av webbläsare för speciella förutsättningar, till exempel för små handhållna datorer, definierar egna värden för MEDIA-attributet.

Stilanvisningar för en grupp webbsidor

Stilanvisningarna kan sparas i en separat fil som anropas från den aktuella webbsidan. På detta sätt kan man använda samma stilanvisningar för en stor eller liten grupp webbsidor, till exempel alla sidor på ett företags hela webb.

Vill man i ett senare skede förändra stilen på sidorna så gör man det snabbt och enkelt genom att man bara ändrar i den separata filen där stilanvisningarna finns. Alla sidor som länkar till stilanvisningsfilen kommer då att ändras på en gång, utan att man behöver redigera dem alls.

För att länka till ett externt style sheet använder man styrkoden <LINK> som sätts i HTML-filens "head"-del. Exempel:

<LINK HREF="min-stil.css" TYPE="text/css" REL="stylesheet">

HREF pekar på en style sheet-fil som enbart innehåller stilanvisningar (som i exemplen ovan, men utan <STYLE>-koder runt).

Man kan ange en eller flera style sheet-filer med <LINK> samtidigt som man anger stilanvisningar med <STYLE>. Sidan kommer att följa stilanvisningarna både i de angivna yttre filerna och i HTML-filen. Detta är speciellt användbart om man har en style sheet-fil med företagets övergripande stilregler, och sedan vill komplettera dem med några specialregler för en eller flera webbsidor.

Om man anger olika anvisningar för samma objekt kommer den som anges eller anropas sist i HTML-filen att gälla. Exempel:

<LINK HREF="firmaprofil.css" TYPE="text/css" REL="stylesheet">
<LINK HREF="min-egen-stil.css" TYPE="text/css" REL="stylesheet">
<STYLE TYPE="text/css" MEDIA="screen, print">
H1 { color: black; }
</STYLE>

Om H1-rubriker är röda och vänsterställda i "firmaprofil.css" och blå och centrerade i "min-egen-stil.css" kommer de bli svarta och centrerade på just denna sida, eftersom svart färg angavs i det sista av de tre style sheets som påverkar sidan, och centrering angavs efter vänsterställning.

<<< Förra avsnittet Innehåll Nästa avsnitt >>>