CSS Referensbok

Denna metod är den mest intressanta, bekväma och kraftfulla av alla tre. Du listar alla CSS-regler (selektorer och korresponderande deklarationer) i en separat fil/mall som du senare länkar med dina HTML-dokument. En och samma stilmall kan länkas med ett obegränsat antal HTML-dokument och på så sätt få samma layout på hela sajten. Om du tröttnar på layouten ändrar du bara en enda fil (stilmallen) istället för varje HTML-dokument.

En annan fördel med denna metod är att den kan förminska nedladdningstid dels genom ett mindre antal eller inga alls formateringstaggar dels genom att mallfilen bara läses av en gång. Dokumenten formateras senare från egna datorns cachebibliotek. Tyvärr utnyttjar inte alla www-läsare den senaste möjligheten än.

Mallfilen kan ligga i ett valfritt bibliotek på servern men den måste avslutas med tillägget .css, t ex stil.css. Nedan finns det en färdig fil som redan nu kan länkas med HTML-dokumenten. I mallfilen finns det två CSS-regler, en som beskriver hur styckena ska formateras och en hur rubrikerna på nivå 1 ska formateras.

still.css
P {color: red; font: 12pt; margin-left: 2cm}
H1 {font: 14pt Arial bold}

För att länka filen stil.css med ditt HTML-dokument skriver du så här i dokumentets huvud, dvs. mellan <HEAD> och </HEAD>:

<HTML>
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<LINK REL=STYLESHEET HREF="stil.css" TYPE="text/css">
</HEAD>
<BODY>
......
</BODY>
</HTML>

LINK är det element som länkar två olika dokument, i det här fallet ett HTML-dokument med ett CSS-dokument.
REL talar om relation mellan dokumenten, också kallad länktyp - HTML-dokumentet ska länkas med en stilmall (eng.Style Sheet)
HREF hänvisar till adressen där stilmallen finns
TYPE talar om vilket stilspråk som används, i det här fallet är språket CASCADING STYLE SHEETS som förkortas till css.

Då alla element i HTML förutom TITLE är valfria kan du även skriva:

<TITLE>Dokumentets titel</TITLE>
<LINK REL=STYLESHEET HREF="stil.css" TYPE="text/css">

I exemplet ovan är typ av stilspråket specificerad som värde till attributet TYPE. Men du kan även uppge standard stilspråk som META information eller HTTP header.

<META http-equiv="Content-Style-Type" CONTENT="text/css">
är samma som
Content-Style-Type: text/css

Om fler än en META eller HTTP header uppges kommer den som specificeras sist att gälla.

* Metod 2 - en inbäddad stil

Med denna metod bäddar du in stilmallen i själva dokumentet istället för att ha den i en separat fil. En sådan stilinformation gäller bara det dokument som den är inbäddad. Själva informationen, som kan innehålla ett obegränsat antal regler, skriver du precis på samma sätt som i den externa filen men infogar den i elementet STYLE, dvs mellan <STYLE> och </STYLE>. Elementet STYLE är ett s.k HEAD-element, dvs ett element som tillhör dokumentets huvud. Alla element som tillhör dokumentets huvud skrivs mellan <HEAD> och </HEAD>.

<HTML>
<HEAD>
<TITLE>Dokumentets titel</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
.....
</BODY>
</HTML>

Du kan även skriva:

<TITLE>Dokumentets titel</TITLE>
<STYLE TYPE="text/css">

</STYLE>

Lägg märke till tecknen . På detta sätt markeras i ett HTML-dokument en kommentar som brukar användas till egna kommentarer. Sådana kommentarer är osynliga på skärmen. Stilinformationen skrivs som en kommentar inte därför att CSS regler kräver det utan för att gömma texten i de www-klienter som inte stödjer stilmallar.

Om en www-klient inte känner igen ett element, t ex STYLE kommer den att ignorera detta element men den eventuella informationen som elementet kan innehålla betraktas som vanlig text och visas på skärmen. Om en www-klient inte har Style Sheets support kommer stilinformationen att visas på skärmen och därför göms den i den osynliga kommentaren.

* Metod 3 - inline-stil

Med denna metod länkar du stilen till ett visst enstaka element eller ett antal element som ska formateras på samma sätt. Det gör du genom att tilldela elementet i fråga attributet STYLE och sedan lista de olika deklarationerna som ett värde till detta attribut. Elementet SPAN använder du för att formatera ett antal efterföljande element.

Observera skillnaden mellan attributet och elementet STYLE som används tillsammans med inbäddad stil. Ett element är en byggnadsdel av HTML-struktur (TABLE eller STYLE) medan ett attribut är en egenskap som detta element kan ta (TABLE WIDTH eller TABLE STYLE) och till vilket ett värde kan tilldelas (WIDTH=100%" eller STYLE="color: red"). Lägg även märke till citattecken. Sådana värden måste citeras. För att formatera ett element, t ex P, skriver du stilinformationen direkt in i starttaggen:

<P STYLE="color: red; font: 12pt; margin-left: 2cm">Text</P>
<TABLE STYLE="color: navy">...tabell...</TABLE>

Om ett antal efterföljande element ska formateras på samma sätt behöver du inte tilldela vart och ett stilen utan använda dig av behållaren <SPAN></SPAN> med vilken du omger de berörda elementen. Den stil du tilldelar elementet SPAN kommer att gälla tills det stängs med sluttaggen </SPAN>.

<SPAN STYLE="color: red; font: 12pt; text-align: center">
<P>Ett formaterat stycke</P>
<P>Ett annat formaterat stycke</P>
</SPAN>

Elementet SPAN är ett s.k. text level-element och kan som sådant enbart formatera den text som det innehåller med t ex färg. Om du vill formatera själva blocket, t ex dess placering, inklusive alla element som det innehåller använder du DIV (förkortning för division - en del/ett område av dokumentet). DIV kan innehålla alla s.k. block level-elementen, t ex tabeller, stycken och även andra divisioner. Även om du formaterar blocket kan du fortfarande formatera enskilda element som blocket innehåller, se H1 nedan.

<DIV STYLE="margin-left: 10%; color: black">
<P>Ett stycke med 10%-ig vänster marginal och svart text</P>
<TABLE> En tabell med 10%-ig vänster marginal och svart text</TABLE>
<H1 STYLE="color: red"> En rubrik med 10%-ig vänster marginal och röd text</H1>
<UL>En lista med 10%-ig vänster marginal och svart text</UL>
</DIV>

Uppkoppling av stilmallar

* Metod 1 - en extern fil

* Metod 2 - en inbäddad stil

* Metod 3 - inline-stil

* Blandade metoder