novicen.dk - Stylesheet

Administreres af:

Stylesheet - hurtig-guide Tilbage til oversigtstabel
Tilbage

Opret HTML
Opret stylesheet
Indlænk stylesheet

Testkørsel: PC, Windows 98DK
Af: novicen.dk

Den grundlæggende kode
Tekstformatering og linier
Stylesheet

Opret HTML

Åbn Notesblok og skriv følgende kode:

<HTML>
<HEAD>
 <TITLE>Stylesheet - hurtig guide</TITLE>
</HEAD>
<BODY>

<H2>Overskrift for dokument</H2>

<H3>Overskrift for afsnit</H3>

<P>
Her er første afsnit, som er indkapslet i en &lt;P&gt;-TAG...

<P>
Her kommer efterfølgende afsnit også indkapslet i en &lt;P&gt;-TAG...

<H3>Ny overskrift for afsnit</H3>

<P>
Her er første afsnit, som er indkapslet i en &lt;P&gt;-TAG...

<P>
<HR>
<CENTER>&copy; Copyright 2001, KS Centret ApS - Jelling<BR>
All Right Reserved</CENTER>

</BODY>
</HTML>

Gem dokumentet som "web-side.htm" (husk anførselstegn for ikke at gemme dokumentet som et .txt dokument). Test dit dokument i din browser.

Eksempel - Se kildekode for web-side.htm

Til top

Opret stylesheet

I et nyt dokument i Notesblok skriver du nu følgende:

BODY, P, TD {
 font-family:'Verdana','Arial',sans-serif;
 font-size:12px;
 color:#004000;
}
BODY {
 background-color:#E1FFE1;
}
.copy {
 font-family:'Verdana','Arial',sans-serif;
 font-size:11px;
 color:#004000;
}
H2 {
 font-family:'Verdana','Arial',sans-serif;
 font-size:18px;
 color:#004000;
}
H3 {
 font-family:'Verdana','Arial',sans-serif;
 font-size:14px;
 color:#004000;
}

Gem dokumentet som "stylesheet.css" i samme mappe, som du gemte web-side.htm.

Se kildekode for stylesheet.css

Til top

Indlænk stylesheet

Åbn nu web-side.htm i Notesblok og indsæt de ændringer, som herunder er markeret med fed (du skal altså kun indføje det, som ikke allerede er indskrevet):

<HEAD>
 <TITLE>Stylesheet - hurtig guide</TITLE>
 <LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">
</HEAD>

samt:

<CENTER class="copy">&copy; Copyright 2001, KS Centret ApS - Jelling<BR>
All Right Reserved</CENTER>

Gem den tilrettede side og test den igen. Du kan vælge at give den et nyt navn (f.eks. "styles-side.htm") for at holde dine eksempler adskilte.

Eksempel - Se kildekode for styles-side.htm

Til top