.:Kako vstavimo stilno predlogo

Ko brskljalnik prebere stilno predlogo, takoj stil priredi spletni strani. Obstajajo trije načini, kako vstaviti stilno predlogo v dokument:

.:Zunanja stilna predloga

Zunanja stilna predloga je najbolj uporbna, kadar mislimo ta stil uporabiti na večih straneh. Tako lahko spreminjamo pravzaprav samo vsebino besedila, stil pa imamo shranjen posebej. Kako povežemo stilno predlogo HTML dokumentom, pa je prikazano tu:

<head>
<link rel="stylesheet" type="text/css" href="mojstil.css" />
</head>

Brskljalnik bo prebral lastnosti iz stila "mojstil.css" in jih priredil pripadajočemu dokumentu.

Zunanjo stilno predlogo lahko napišemo v kateremkoli urejevalniku besedil, najbolj priporočam beležnico, saj je najbolj pregledna, obstajajo pantudi programi za pisanje stilnih predlog, ki nam le-te pomagajo napisati v krajšem času. Stilna predloga naj ne bi vsebovala ukazov HTML-ja saj lahko pride do napak in naj bi bila shranjena v datoteki s končnico *.css. To je primer zunanje stilne predloge:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

.:Notranja stilna predloga

Ta stilna predloga pripada le tistemu dokumentu v katerem je napisana. Definiramo jo tako, da v glavi dokuneta napišemo ukaz <style> in potem normalno določamo lastnosti:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("slike/ozadje.gif")}
</style>
</head>

Opomba: Brskljalnik ponavadi ignorira neznane ukaze. To pomeni, da če brskljanik določanje stila ne podpira, ga ne bo upošteval. Ampak pojavlja se problem, da se potem ta stil pokaže v dokumentu kot del vsebina. Da bi rešili ta problem, napišemo na začetku stila , da v tem primeru to izločimo:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("slike/ozadje.gif")}
-->
</style>
</head>

.:Stili znotraj ukaza

Ponavadi se izogibamo pisanja stila na tak način, saj ni ekonomičen. Uporabimo ga le takrat, kadar moramo določiti neko specifično lastnost nekemu elementu.

Če hočemo spremeniti pisavo nekega določene odstavka, to naredimo tako:

<p style="color: sienna">
Besedilo.
</p>

.:Uporaba večih stilov

Če naprimer uporabimo zunanjo stilno predlogo in notranjo, se lastnosti dopolnjujejo, ampak vemo, da ima notranja stilna predloga prednost!

Tu je primer zunanje stilne predloge za naslov <h3>:

h3 
{
color: red;
text-align: left;
font-size: 8pt
}

Notranja stilna predloga za ta naslov:

h3 
{
text-align: right; 
font-size: 20pt
}

Ko oba stila združimo, dobimo naslednje lastnosti:

color: red; 
text-align: right; 
font-size: 20pt