Korišćenje CSS-a u HTML dokumentu
Već smo imali prilike da se upoznamo sa jednim načinom uvođenja CSS deklaracija u same HTML oznake pomoću parametra style. Ovakav način primene CSS-a, nazivamo Inline CSS.
Inline CSS
Da se podsetimo, u bilo kojoj HTML oznaci možemo navesti parametar style, a kao njegovu vrednost navodimo CSS deklaracije.
<oznaka style="[lista deklaracija]"> ... </oznaka>
Međutim, sada znamo za selektore i potreban nam je način da stilove koji su "imenovani" pod nekim selektorom iskoristimo u našem HTML dokumentu. Ovo je moguće izvesti na dva načina.
Interni (embeded) CSS
Unutar samog HTML dokumenta možemo ubaciti odeljak unutar koga ćemo definisati CSS stilove. Ovaj odeljak se definiše oznakom <style> i nalazi unutar odeljka head.
<head>
<style>
selektor {
[lista deklaracija]
}
selektor {
[lista deklaracija]
}
...
</style>
<head>
Eksterni (external) CSS
Eksterni CSS je u većini slučajeva najpoželjnije rešenje. Potrebno je kreirati zaseban CSS fajl koji će sadržati samo selektore i njihove definicije i eventualno CSS direktive. Ovakav fajl se onda povezuje sa HTML dokumentom.
Ako u HTML-u imamo style odeljak, možemo koristiti CSS direktivu @import, koja na mestu gde je navedena vrši "uvoz" CSS stilova iz zadatog fajla. Fajl se zadaje pod navodnicima, tako što se navede tačna putanja do njega.
<head>
<style>
...
@import "[putanja do CSS fajla]";
...
</style>
</head>
Ipak, bolji način je da se CSS fajl poveže putem HTML oznake <link>. U pitanju je jednostruka oznaka koja se navodi unutar head odeljka.
Parametar rel u ovom slučaju ima vrednost stylesheet, a putanja do samog CSS fajla, navodi se kao vrednost parametra href.
<head>
...
<link rel="stylesheet" href="[putanja do CSS fajla]" />
...
</head>
Ne zaboravite - uvek možemo povezati i više CSS fajlova. U tom slučaju bismo naveli više @import direktiva, odnosno više link oznaka.
Uvođenje eksternog CSS-a nam pruža mogućnost da kreiramo isti stil koji će se koristiti za više HTML stranica. Na taj način je promena stila jako olakšana.
Pogledajte primere u kojima su prikazani načini korišćenja CSS-a.
Korišćenje CSS-a u HTML-u
Inline CSS nam je već poznat:
<h1 style="color:red;">Naslov</h1>
<p style="font-size:10pt;">
Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse.
</p>
<img src="slika.jpg" width="100" height="50"
alt="Čak i slika može imati stil" style="border-width:3px;" />
Interni CSS
Ovde imamo jedan kompletan HTML dokument, sa internim stilom.
<!doctype html>
<html>
<head>
<title>Primer HTML stranice</title>
<meta charset="utf-8" />
<style>
h1 {
color: red;
}
p {
font-size: 10pt;
}
img {
border-width: 3px;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je neki tekst u pasusu...</p>
<img src="slika.jpg" width="100" height="50" alt="Čak i slika može imati stil" />
</body>
</html>
Eksterni CSS
CSS smo definisali u fajlovima stil.css (koji se nalazi u direktorijumu stilovi) i dodatno.css (koji se nalazi u istom direktorijumu kao i HTML dokument).
U sledećem primeru smo iskoristili @import CSS direktivu:
<!doctype html>
<html>
<head>
<title>Primer HTML stranice</title>
<meta charset="utf-8" />
<style>
@import "stilovi/stil.css";
@import "dodatno.css";
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je neki tekst u pasusu...</p>
</body>
</html>
To isto smo mogli da postignemo i na sledeći način, pomoću oznake link:
<!doctype html>
<html>
<head>
<title>Primer HTML stranice</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stilovi/stil.css" />
<link rel="stylesheet" href="dodatno.css" />
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je neki tekst u pasusu...</p>
</body>
</html>
Evo i jedne kombinacije, gde smo upotrebili sve opisane metode:
<!doctype html>
<html>
<head>
<title>Primer HTML stranice</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="stilovi/stil.css" />
<style>
@import "dodatno.css";
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p style="font-size:12pt;">Ovo je neki tekst u pasusu...</p>
</body>
</html>