Style sheets är något som man kan ha på sin sida så att man kan ändra t.ex. textstorlek, textfärg, understrykningar på länkar etc.

Man kan använda style sheets på tre olika sätt på sin hemsida:

  1. Mallen ligger som en extern fil
  2. Mallen ligger i koden på hemsidan
  3. Man skriver style sheet i sina taggar på hemsidan

Första sättet är kanske det svåraste i början, eftersom man inte ser sina sina style sheets. Här använder man en ".css-fil" (= Cascading Style Sheets-fil). Det man sedan kan göra är att man i sina vanliga sidor länkar till denna sida så att alla ens sidor kan få använda .css-filen som en mall för hur de ska se ut.
Det gör du på följande sätt:

Skapa en sida med dina style sheets.
T.ex. kan filens innehåll se ut så här:

BODY {background-color: yellow; margin: 20px -10px -10px}
H1 {font: bold 30pt "Courier New"; color: red; text-align: left}
H2 {font: bold 15pt Arial; color: blue; text-align: right}
P {font: 15pt Arial; color: blue}

Den här sidan som du tittar på nu, har en extern css-mall, som heter mall2.css. Innehållet ser ut så här:

body { background-color: #bbff77; margin-left: 2cm }
h1 { font: 30pt "courier new", geneva, verdana; color: green; text-align: left }
li { font-size: 14pt; color: #800000 }
A:hover { color: red }
A { text-decoration: none; color: blue }
p { font: 10pt "Comic Sans MS", verdana; color: black }
.stor { font: 11pt Verdana, helvetica; color: #00486d } 
.anfang { font: 15pt "Comic Sans MS", helvetica; } 
hr { color:blue }

Spara filen med (exempelvis) namnet mall.css. Filen ska ligga i samma mapp som dina hemsidor.

Skriv detta mellan <HEAD> och </HEAD> på de sidor som ska använda sig av de style sheets kommandon som du skrivit i filen:

<LINK REL=STYLESHEET HREF="mall.css" TYPE="TEXT/CSS">

Ett annat sätt är att man har style sheets i sin HEAD-tagg. Detta gör man genom att skriva:

<STYLE TYPE="TEXT/CSS">
<!--

Här skriver man det som ska ändras (själva mallen)

//-->
</STYLE>

Anledningen till att man har <!-- och //--> är att alla webbläsare som inte klarar av style sheets annars kommer att tro att det man skrivit är vanlig text som besökaren ska läsa. Därför skrivs det ut på hemsidan med dessa webbläsare. Man lurar då webbläsaren genom att sätta dessa kommentarstaggar (<!-- och //-->) runt kommandona som man skriver så att webbläsaren tror att det ska vara dold text (och inte skrivas ut). De nya webbläsarna som klarar av style sheets ignorerar <!-- och //-->, eftersom de vet att man skrivit det för att gamla webbläsare inte ska skriva ut kommandona.

Här är exempel på vad man kan skriva:

<STYLE TYPE="TEXT/CSS">
<!--

P {text-align: center; font-weight: light}
A {line-height: 50pt}
FONT {font-weight: bold}

//-->
</STYLE>

Detta sätt är att man skriver in style sheets i taggar. Tre exempel:

<FONT STYLE="font-size: 25pt">TEXT</FONT>
<B STYLE="color: gold">TEXT</B>
<A STYLE="font-family: 'Comic Sans MS'" HREF="hemsida.shtml">TEXT</A>

Här är alltså STYLE ett attribut.
Detta sätt kan (om man vill) kombineras med de två ovanstående sätten. Om du då t.ex. har skrivit...

<STYLE TYPE="TEXT/CSS">
<!--
A {line-height: 50pt}
//-->
</STYLE>

...i HEAD men du har skrivit...

<A STYLE="A {line-height: 30pt}" HREF="hemsida.shtml">TEXT</A>

...på sidan så gäller 30pt, eftersom style-attributen (när man skriver värdet inom en tagg) har högre prioritet än de andra två sätten.

Texten är hämtad på webbplatsen: http://www.javascript.nu

Titta på Annica Tigers sida hur du kan uttrycka dig i en CSS-mall.

Sida för utskrift!


© Rolf Malmquist