På denna webbsida diskuteras var egenskaperna för stilmallar kan placeras och hur stilmallarna kan appliceras på (X)HTML-taggar.
Egenskaperna för de olika stilmallarna kan placeras på tre olika ställen i, eller utanför, ett (X)HTML-dokument:
I de två senare fallen använder man bl.a. taggars namn (t.ex. H1, P och OL) för att applicera stilmallar (se vidare namngivning av stilmallar), men vi kan även använda attribut i taggar för att applicera stilmallar. Allt taggar i (X)HTML har tre attribut (d.v.s. som alla taggar har gemensamt) som bl.a. kan användas för att applicera stilmallar:
Attributet CLASS används för att ange att taggar tillhör en viss grupp (eller klass) av taggar och kan används för att applicera stilmallar på alla element i gruppen. Observera att taggar av olika typer (t.ex. H1, P och IMG) kan tillhöra samma klass. Detta innebär även att visa egenskaper i en stilmall kanske inte gäller för några av taggarna i klassen. T.ex. så har inte bilder (IMG) en egenskap typsnitt som stycken och rubriker (P resp. Hx)
I motsats till attributet CLASS så används attributet ID för att skilja på taggar i ett (X)HTML-dokument, d.v.s. göra taggarna unika (ge dem identitet). Det får alltså inte finnas två taggar i samma dokument med samma värde på attributet id, men däremot i två olika dokument. Detta är praktiskt för att t.ex. identifiera ett sidhuvud eller en sidfot i respektive (X)HTML-dokument. Hur man använder attributen CLASS och ID, i samband med stilmallar, beskrivs längre ner på denna hemsida och på hemsidan om namngivning av stilmallar.
Utnyttjande av attributet STYLE beskrivs härnäst.
Till början på sida
Att använda attribut STYLE är vad man på engelska kallar inline. Detta sätt är mindre vanligt att man använder för ett helt dokument, men användbart om man endast vill ändra stil för ett enda element. (Stilmallar kan även appliceras på enstaka taggar med attributet ID - se ovan och namngivning av stilmallar med ID:n.) Stilen för en tagg placeras i taggens attribut STYLE (markerat med blå text i exempel nedan). Stilen påverkar endast det element vars attributet innehåller stilen, d.v.s. inte första och sista stycket.
<p>Text med standard typsnitt...</p>
<p style="font-family: Verdana"
>Text med typsnittet Verdana</p>
<p>Text med standard typsnitt igen...</p>
I exempel 2.1 så ändras typsnittet för första rubriken
(<h1>) genom att lägga till stilmallen i taggens attribut STYLE. Övrig
text i dokumentet är opåverkat (d.v.s. Times New Roman i Windows).
<h1 style="font-family: Verdana">
Till början på sida
Stilar kan samlas på ett ställe i ett HTML-dokument och är då, vad man kallar, inbäddade (eng. embedded). Stilmallarna placeras mellan öppnande och avslutande taggen <STYLE> i dokumentets tagg <HEAD> (markerat med blå text i exempel nedan). Man använder attributet TYPE i STYLE-taggen för att tala om vad taggen innehåller, i vårt fall "text/css" för att tala om att det är stilmallar (CSS). Stilmallarna gäller endast för det dokument som stilmallarna finns i men alla "berörda" element i dokumentet (se vidare namngivning av stilmallar).
<html>
<head>
<title>Titeln...</title>
<style type="text/css">
p { font-family: Verdana }
</style>
</head>
<body>
<!-- själva dokumentet... -->Eftersom webbläsare är konstruerade att bortse från taggar dom inte förstår (d.v.s. inte ingår i den HTML-standard som webbläsaren gjorts för) så kan äldre webbläsare tolka texten inom STYLE-taggen som "vanlig" text. Detta kommer innebära att dessa (äldre) webbläsare kommer att skriva ut stilarna som "vanlig" text. För att undvika detta brukar man "kommentera bort" stilmallarna (markerat med blå text i exempel nedan).
<style type="text/css">
<!--
p { font-family: Verdana }
-->
</ >I exempel 2.2 så har en stilmall gjorts för att påverka rubriker av nivå 1 (<H1>) som ges typsnittet Verdana. Följande stilmall har angivits i dokumentets <HEAD>.
<style type="text/css">
<!--
h1 { font-family: Verdana }
-->
</style>Till början på sida
Att länka in stilmallarna innebär att man skriver stilmallarna i en separat (extern) fil (med filändelsen .CSS) som man sen länkar in med taggen <LINK> i dokumentets <HEAD>. Genom att länka in filer med stilmallar så behöver stilmallarna endast defineras på ett ställe för t.ex. en hel webbplats. Stilmallarna kan alltså gälla för flera dokument och är det sätt man bör använda. Observera att CSS-filen endast ska innehålla stilmallarna och inga (X)HTML-taggar (se filen STIL.CSS i exempel nedan).
Givetvis kan man länka in flera filer i samma dokument - det behövs en <LINK>-tagg för varje fil. D.v.s. man kan använda sig av en uppsättning av filer med stilmallar och länka in just de filer som behövs i ett visst dokument.
Detta, att länka in externa dokument med LINK-taggen, är
inget som är unikt för CSS utan är en "funktion" i (X)HTML. Det
går alltså att knyta andra externa filer till ett (X)HTML-dokument eller andra
dokument med en speciell betydelse (t.ex. innehållsförteckning eller copyright).
(Man använder inte taggen STYLE i HEAD-taggen, d.v.s. det finns ingen analogi
med hur JavaScript-filer bäddas in resp. länkas in/importeras med SCRIPT-taggen.
Detta hade dock varit logiskt eller i.a.f. konsekvent. :-)
Stilmallsfilens (CSS-filens) namn, och eventuell sökväg (URI), anges i attributet HREF (d.v.s. på samma sätt som med länkar, A-taggen). (Detta dokument hämtar t.ex. sina stilmallar från filen css2.css i mappen stilar en nivå upp från mappen med denna webbsida, d.v.s. sökvägen/URI:n är "../stilar/css2.css".) Man använder attributet REL för att tala om vad det inlänkade dokumentets relation är till (X)HTML-dokumentet - stilmall (eng. stylesheet) i vårt fall. Sista attributet, TYPE, talar om vad den inlänkade filen innehåller (d.v.s. samma som för inbäddade stilmallar) - "text/css" i vårt fall då stilmallar (CSS).
I exemplet nedan länkas filen STIL.CSS (i samma mapp som HTML-dokumentet) in (markerat med blå text). Denna rad (mall) kan kopieras in alla dokument där vi vill använda stilmallar i en extern fil samt anpassa eventuell sökväg/URI till CSS-filen.
<head>
<title>Titeln...</title>
<link href="stil.css" rel="stylesheet">
</head>Precis, som de två tidigare exemplen, så påverkar även stilmallen i exempel 2.3 endast rubriker av nivå 1. I exemplet länkas filen STIL.CSS in (som kan ses genom att klicka på nedersta knappen).
Till början på sida
Nedan visas ett "komplett" exempel där alla tre sätt att applicera stilmallar används, d.v.s. inlänkat, inbäddat och i attributet STYLE. I exempel nedan länkas CSS-filen från förra exemplet in, d.v.s. rubrik av nivå 1 (H1) kommer att ges typsnittet Verdana. Sen skapas en inbäddad stilmall för dokumentets alla stycken (P) som gör texten blå. Sist av allt, i det tredje stycket (P), ändras färgen till röd med stilmall i styckets attribut STYLE. Exempel visar även hur en stil kan åsidosätta/överskugga (eng. override) en annan, d.v.s. att stilen i taggen gäller istället för den inbäddade. (Mer om detta i kommande sidor.)
<!DOCTYPE html>
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Exempel 2.4 - Ett "komplett" exempel</title>
<link rel="stylesheet" type="text/css" href="stilmall.css" />
<style type="text/css">
<!--
p { color: blue; background-color: white; }
//-->
</style>
</head>
<body>
<h1>Rubrik nivå 1 (inlänkad)</h1>
<p>Rubrik ovan hämtar sin stilmall från extern fil (samma som
förra exemplet). Alla stycken har blå text, som ges av
inbäddad stilmall i detta dokument, utom ett som är rött
p.g.a. stilmall i styckets attribut STYLE.</p>
<p>Ett stycke med meingslös text. Ett stycke med
meingslös text. Ett stycke med meingslös text. Ett stycke
med meingslös text. Ett stycke med meingslös text. Ett
stycke med meingslös text. Ett stycke med meingslös text.
Ett stycke med meingslös text. Ett stycke med meingslös
text. Ett stycke med meingslös text.</p>
<p style="color: red; background-color: white;">Ytterligare
ett stycke med meingslös text. Ytterligare ett stycke med
meingslös text. Ytterligare ett stycke med meingslös text.
Ytterligare ett stycke med meingslös text. Ytterligare ett
stycke med meingslös text. Ytterligare ett stycke med
meingslös text. Ytterligare ett stycke med meingslös text.
Ytterligare ett stycke med meingslös text.</p>
<h2>Rubrik nivå 2 (opåverkad)</h2>
<p>Ett tredje stycke med meingslös text. Ett tredje stycke med
meingslös text. Ett tredje stycke med meingslös text. Ett
tredje stycke med meingslös text. Ett tredje stycke med
meingslös text. Ett tredje stycke med meingslös text. Ett
tredje stycke med meingslös text. Ett tredje stycke med
meingslös text.</p>
</body>
</html>Till början på sida