Slogovno predlogo lahko v spletni dokument vključimo na tri načine:
- kot zunanjo slogovno predlogo
- kot notranjo slogovno predlogo
- kot slog znotraj oznake
Seveda lahko te tri možnosti opisov slogov tudi kombiniramo. Nekaj slogov opišemo ločeno na datotekah CSS, nekaj opisov vključimo kar v glavo dokumenta, preostanek pa definiramo sproti. Glavni namen slogov je ločiti vsebino in obliko.
A v praksi se izkaže, da je tak kombiniran način uporabe CSS slogov nepraktičen. Zato stremimo k temu, da uporabljamo le zunanje prekrivne sloge.
Zunanja slogovna predloga
Slogovno predlogo povežemo z HTML dokumentom tako, da v glavi head
HTML dokumenta uporabimo element link
in lastnosti:
rel="stylesheet"
- določa odvisnost na slogovno predlogotype="text/css"
- vrsta dokumenta je besedilna datoteka, ki vsebuje CSS-pravilahref="slog.css"
- referenca na dokument, ki vsebuje slogovno predlogo
<link rel="stylesheet" type="text/css" href="slog.css" />
Če je potrebno spremeniti obliko, potem spremenimo le vsebino slogovne datoteke (v zgornjem primeru slog.css
). Tako enostavno dobimo nov izgled vseh dokumentov, ki so povezani na to datoteko. V tem primeru se lahko iz dokumenta HTML sklicujemo na dokument CSS. Brskalnik dobi lastnosti iz datoteke s slogom in jih priredi pripadajočim oznakam v dokumentu.
Zunanjo slogovno predlogo lahko napišemo v kateremkoli urejevalniku besedil, obstajajo pa tudi programi za pisanje in preverjanje slogovnih predlog (tekstovni in grafični), ki nam le-te pomagajo napisati v krajšem času. Slogovno datoteko shranimo v datoteko s končnico *.css
.
Notranja slogovna predloga
Notranja slogovna predloga pripada le tistemu dokumentu, v katerem je zapisana. Določimo jo v glavi dokumenta z uporabo elementa style
:
<head>
<style type="text/css">
p {padding-left: 20px; border-bottom: solid green 2px}
body {background-image: url("slike/ozadje.gif")}
</style>
</head>
Notranja slogovna predloga pripada le tistemu dokumentu, v katerem je zapisana. Določimo jo v glavi dokumenta z uporabo elementa style.
Slog znotraj oznake
Slog lahko določimo tudi vsakemu elementu znotraj oznake. V praksi ta način ne uporabljamo, saj ni ekonomičen in praktičen. Izjemoma ga uporabimo le takrat, kadar moramo določiti neko specifično lastnost nekemu elementu:
<p style="..."> ... </p>
Če hočemo spremeniti barvo eni besedi v odstavku, potem zapišemo:
<p>Tole pa je <span style="color: red;">pomembna</span> novica!</p>
Tole pa je pomembna novica!