CSS

Bakgrundsfärg och font

Vi börjar med att skapa en stilmall som skrivs i en vanlig textfil med filändelsen css. Alltså öppnar vi en texteditor och ett nytt dokument som vi direkt sparar som stilmall.css. Stilmallen lägger vi i samma katalog som övriga HTML-filer.

Sparar css-filen

Till att börja med ska vi sätta bakgrundsfärgen till ljusblå på samtliga sidor. Genom att skapa en regel som beskriver hur BODY ska se ut kan vi sätta färgen på alla sidorna utan att behöva skriva in det på var och en. Vi lägger alltså till följande regel i vår stilmall:

 BODY 	{	background: lightblue	}

Vi tittade lite på vilka sätt man kan ange vilken färg man vill ha i HTML-delen. Samma regler gäller även för CSS. Fast CSS är dessutom rätt sätt att göra det på eftersom det hör till presentationen av sidan, inte dess struktur. Det går alltså att välja mellan att använda namn (ex blue), hexadecimalt skrivsätt (ex #AABB45) eller decimalt skrivsätt. Ett exempel på detta är rgb(170, 189, 69).

Nästa sak att göra är att tala om för HTML-sidorna vilken stilmall de ska använda. (Som det är nu använder de ingen stilmall alls.) Elementet LINK används för detta ändamål och hela elementet kommer att se ut såhär:

<LINK HREF="stilmall.css" TYPE="text/css" REL="stylesheet">

Här anger HREF adressen till stilmallen som ska användas, TYPE anger vilket stilspråk som används och REL satt till stylesheet betyder att den stilmall vi har angett ska användas som förstaval. Det finns många olika kombinationer av dessa attribut att använda men det här räcker för vårt exempel.

Vidare för att det ska fungera måste LINK-elementet ligga inom HTML-dokumentets huvud, alltså i HEAD. Ett tomt dokument med en stilmall inlänkad ska se ut såhär:

<HTML>	<HEAD>		<TITLE></TITLE>		<LINK HREF="stilmall.css" TYPE="text/css" REL="stylesheet">	</HEAD><BODY></BODY></HTML>

Titta på resultatet här nedanför.

Resultat

På samma sätt lägger vi in en länk (LINK) till stilmallen i alla sidor som ska ingå på vår webbplats. Detta är dokumenten

När vi sparar och testar ser vi att alla sidor har samma bakgrundsfärg. Det räcker nu att ändra i stilmallen för att ändra bakgrundfärg för samtliga sidor. Prova lite själv genom att ändra font, bakgrundsfärg och storlek på rubriker!

Resultat

Vi ska sätta en till egenskap för BODY, nämligen vilken font som ska användas som förval. Detta gör vi med egenskapen font-family och värdet Arial, Verdana, Trebuchet, sans-serif. Regeln kommer nu att få följande utseende:

BODY 	{	background : lightblue;	font-family : Arial, Verdana, Trebuchet, sans-serif	} 

All text blir nu i fonten Arial i första hand utseende.

Resultat

Eftersom vi nu har tillgång till css behöver vi inte använda BR för att snygga till texten om Nike. Vi delar istället upp det hela på två paragrafer och formaterar paragraferna m h a stilmallen.

<P>Nike är en trevlig och busig hund och av rasen <I><A HREF="http://www.hovawartklubben.com">Hovawart</A></I>.Detta är en mycket pigg och arbetsvillig bruksras och namnet betyder ungefär gårdsvakt.Hon kommer från Lillhärdal (nära Sveg)och är uppfödd på kenneln <B><A HREF="http://www.elliegarden.se">Elliegården</A></B>.</P><P>Nike tränas i vanlig lydnad, tävlingslydnad och spårning. Hon tävlar i både lydnad och spår och tycker att det är mycket roligt. Hon vill arbeta hela tiden!. </P>

En ny regel skapas i stilmallen som bestämmer att en paragraf ska stäcka sig 80% av sidans bredd. Vi slipper då ha text ända ut i högra ytterkanten.

P 	{	width : 80%;	text-align : left	}

Resultat

Vill du titta på hur stilmallen ser ut just nu finns den här :

Kod