Om du gjort exempelsidan under punkt 1 så har du nu en hemsida som ser ut ungefär så här:

din_sidas_titel

rubrik

text text text text text text text text text text text

HTML-koden till hemsidan ser ut så här:

----------------------------------------------
<HTML>

<HEAD>

<TITLE>din_sidas_titel </TITLE>

</HEAD>

<BODY BGCOLOR=" red ">

<H1>rubrik</H1>

<P>text text text text text text text text text text text </P>

<P>text text text text text text text text text text text </P>

<UL>
<LI><A HREF=" test1.html ">länk till första sidan </A></LI>
<LI><A HREF=" http://www.flowsim.se ">till flowsim</A></LI>
</UL>

<HR NOSHADE>

<A HREF="mailto:ilj@flowsim.se">synlig text </A>
</BODY>

</HTML>
----------------------------------------------

Lägg till en stilmall

Ta bort BGCOLOR="red" så att bara <BODY> blir kvar på kodrad nr 5.

Lägg till en stilmall där du bestämmer bakgrundsfärgen på BODY-delen i stället för att använda BGCOLOR.

En tom stilmall ser ut så här:

<STYLE TYPE="text/css">

</STYLE>

Placera stilmallen i <HEAD>-delen, efter TITLE-taggen.

För att bestämma vilken bakgrundsfärg sidan ska ha behöver du en rad som ser ut så här:

BODY{ background-color:red }

Tecknet mellan background-color och red är ett kolon :

Parenteserna är "krullparenteser".

Om du bestämmer bakgrundsfärg är det bäst att också bestämma textfärg.
Textfärg bestäms med hjälp av color. Nu ska det se ut så här:

BODY{ background-color:red;color:black }

Tecknet mellan background-color:red och color:black är ett semikolon ;

Placera raden i stilmallen som nu ska se ut så här:

<STYLE TYPE="text/css">

</STYLE>

Föreslå typsnitt efter font-family. Välj i första hand verdana, i andra hand arial och i tredje hand sans-serif. Placera ett kommatecken mellan alternativen och skriv så här:

font-family:verdana,arial,sans-serif

Bestäm textstorlek efter font-size, till exempel

font-size:12px

Du kan bestämma BODY:s marginaler efter margin

margin:40px

Lägg till typsnitt, textstorlek och marginal i stilmallen - glöm inte semikolonen!

Hela HTML-koden ska nu se ut så här:

----------------------------------------------
<HTML>

<HEAD>

<TITLE>din_sidas_titel </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR=" red ">

<H1>rubrik</H1>

<P>text text text text text text text text text text text </P>

<P>text text text text text text text text text text text </P>

<UL>
<LI><A HREF=" test1.html ">länk till första sidan</A></LI>
<LI><A HREF=" http://www.flowsim.se ">till flowsim</A></LI>
</UL>

<HR NOSHADE>

<A HREF="mailto:ilj@flowsim.se">synlig text </A>
</BODY>

</HTML>
----------------------------------------------

Hemsidan ska nu se ut ungefär så här:

rubrik

text text text text text text text text text text text

synlig text

För att bestämma att bakgrundsfärgen på BODY ska vara röd så skriver du alltså:

BODY{ background-color:red }

Så hur skriver du om du vill bestämma att rubriken H1 ska ha svart bakgrundsfärg?

H1{ background-color:black }

En rad som ser till att alla rubriker H1skrivs med vit text på svart botten och förses med ett 6 pixlar brett tomrum mellan texten och rubrikrektangelns ytterkant ser ut så här:

H1{ background-color:black;color:white;margin:6px}

Om man vill att text ska skrivas i fetstil kan man använda:

font-weight:bold

Skriv in en rad som gör så att alla länkar A skrivs med fet stil!

Skriv samtidigt in en rad som ser till att alla textstycken P blir max 420 pixlar breda! (engelskans ord för bredd är width)

rubrik

text text text text text text text text text text text

ilj@flowsim.se

<STYLE TYPE="text/css">

</STYLE>

Allt om stilmallar finns under rubriken STYLESHEETS/STiLMALLAR. Om du t.ex. vill att länkarna ska ändra färg när muspekaren förs över dem kan du se hur man gör på den här sidan.
Alla HTML-taggar hittar du i menyn till vänster.

Sidan gjordes av

ilj@flowsim.se

Senast ändrad 4 augusti 1998.

Den här sidan hör hemma i ett ramsystem hos
www.flowsim.se