Pomenuli smo da je CSS odvojen od HTML koda, ali to znači da ga postavljamo… Gde? Postoje tri varijante, od kojih se dve aktivno koriste:
Eksterni CSS[1]
Kao što mu i samo ime kaže, eksterni CSS se nalazi kompletno van HTML dokumenta u posebnom fajlu.
Najprostija varijanta je kada imamo jedan HTML fajl i pored njega jedan CSS fajl. Dovoljno je da u head delu HTML fajla unesemo određeni tag, koji će povezati eksterni CSS fajl. Sa druge strane, u samom CSS fajlu pišemo samo opise. Ne sme se pojaviti nikakav deo HTML jezika u CSS fajlovima. CSS fajlovi, za razliku od HTML-a, sastoje se samo od CSS opisa.
Sam tag za povezivanje CSS opisa u head delu strane je <link>. Poput nekih drugih tagova (kao što je meta, npr.), nema sadržaj i samozatvarajući je, a sve vrednosti nosi u svojim atributima nad tagom. Ti atributi u slučaju <link> taga su:
- href – definiše putanju do eksternog CSS fajla. Može biti relativna ili apsolutna. Preporuka je postavljati relativne putanje i voditi računa da svi fajlovi sajta uvek budu zajedno i u istim odnosima. Ovaj isti atribut smo susretali kod img taga, u sličnoj funkciji (putanja do slike).
- type – definiše tip dokumenta ka kome se linkuje pošto se tag <link> može koristiti i za neke druge svrhe, mada se u poslednje vreme koristi samo za CSS. Postavljamo: “text/css”
- rel – definiše odnos HTML fajla i linkovanog, eksternog fajla. Postavljamo: „stylesheet“
Evo primera za eksterno povezani CSS fajl, tačnije, početak HTML strane može izgledati ovako:
<!DOCTYPE html>
<html>
<head>
<title>Eksterni CSS</title>
<link href=”css/stilizacija.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
…
Podsećamo, ovaj tag se uvek postavlja u okviru head dela HTML fajla i praktično je uvek isti, samo se razlikuje putanja do fajla.
HTML stranice i eksterni CSS fajlovi
U jednom HTML dokumentu može postojati više povezanih CSS fajlova. U tom slučaju postavićemo po jedan <link> tag za svaki eksterni CSS fajl. Podsećam, jedan CSS fajl može skladištiti neograničen broj opisa, ali većina autora razdvaja grupe CSS opisa u različitim fajlovima radi lakše organizacije.
Sa druge strane, jedan CSS fajl može biti pozvan, učitan od strane više različitih HTML fajlova. Tako možemo stilizovati iste elemente na različitim stranama istim fajlom.
Interni CSS[2]
Nasuprot eksternom, interni CSS se nalazi direktno u HTML dokumentu, tačnije u head delu. Umesto da postavljamo <link> tag kao malopre, možemo postaviti <style> tag i u okviru njega direktno upisati CSS opise. Pogledajmo primer:
<!DOCTYPE html>
<html>
<head>
<title>Interni CSS</title>
<style type=”text/css”>
p {
font-family:Tahoma;
font-size:12px;
}
</style>
</head>
<body>
…
Na ovaj način praktično smo ugradili ceo CSS fajl u strukturu HTML stranice. Van <style>taga nalazi se HTML strana i važe njena pravila. Sa druge strane, unutar njega se nalaze CSS opisi i važe pravila CSS jezika.
Interni CSS je ugrađen u HTML stranicu
Eksterni vs interni CSS
Pitanje je da li koristiti eksterni ili interni CSS. Skoro uvek je praktičnije koristiti eksterni CSS. Evo samo nekih od razloga:
- Možemo koristiti iste CSS opise za više različitih stranica, umesto da ih bespotrebno ponavljamo.
- Pošto nema ponavljanja kôda, stranice su „lakše“ i brže se učitavaju (CSS se učitava samo na prvoj).
- Razdvajamo sadržaj od stilizacije.
- Možemo menjati CSS opise na jednom mestu, što će odmah uticati na sve povezane stranice.
- Lakše je snalaženje u CSS kôdu koji je odvojen od HTML-a.
Inline CSS[3]
Pomenuli smo da postoje tri varijante pisanja CSS kôda. Pored eksternog i internog CSS-a, postoji i inline način pisanja. Inline se razlikuje po tome što je selektor izostavljen i sam CSS postavlja se direktno u HTML tagu, poput atributa.
Ovaj način pisanja je dozvoljen samo u xHTML transitional i HTML4 dokumentima i predstavlja zaostatak iz nekih ranijih vremena.
Kod inline CSS-a postavljamo (na HTML tagu koji želimo da stilizujemo) atribut styleu kome pod znacima navoda pišemo svojstva i vrednosti, kao i ranije.
Zbog specifičnosti ove varijante, opis koji unesemo se odnosi samo na taj jedan element. Zato je pisanje inline stilova veoma nepraktično, a još je teža kasnija izmena.
Pogledajmo primer:
…
<p>Prvi paragraf</p>
<p style=”font-family:Tahoma; font-size:12px;”>Moj paragraf</p>
<p>Treći paragraf</p>
…
Ovako smo dobili stilizaciju nad samo jednim (drugim) paragrafom teksta. Ako bismo želeli da svi budu stilizovani, morali bismo i njima da dodamo atribut style i ova svojstva i vrednosti. Lakše je postaviti eksterni/interni CSS i jednim opisom stilizovati paragrafe.
Možda se u ovom trenutku pitate kako ću stilizovati samo jedan od paragrafa, ako je to ono što želim, tj. želim da se jedan razlikuje. U takvom i sličnim slučajevima ipak nećemo koristiti inline silizaciju, već nešto složenije selektore od jednostavnog p, kao što ćemo videti u nastavku.
[1] CSS opis postavljen u eksternom (posebnom) CSS fajlu ili se može odnositi na ceo CSS fajl (pogledati i pod CSS fajl
[2] CSS opis ili više opisa koji se nalaze u HTML dokuemntu pod style tagom.
[3] CSS postavljen direktno u samom HTML tagu. Zabranjen u strict varijanti HTML / xHTML jezika