Upotreba CSS stilova
Evo primera korišćenja CSS-a na različite načine:
Inline CSS
Inline CSS se koristi za primenu stilova na određeni HTML element korišćenjem atributa 'style'. Ovaj metod je koristan za primenu jednokratnih stilova na određene elemente, ali može postati glomazan ako treba da primenite iste stilove na više elemenata.
<p style="color: blue; font-size: 16px;">This is some text</p>
U ovom primeru, boja elementa teksta <p> je postavljena na plavu, veličina fonta od 16 piksela, koristeći inline CSS.
Interni CSS
Interni CSS se koristi za definisanje stilova u odeljku <head>
HTML dokumenta, koristeći element <stile>
. Ovaj metod je koristan za primenu stilova na više elemenata na jednoj veb stranici.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some more text</p>
</body>
Eksterni CSS
Eksterni CSS se koristi za definisanje stilova u zasebnoj CSS datoteci, koja se može povezati sa više HTML dokumenata. Ovaj metod je koristan za doslednu primenu stilova na više veb stranica i omogućava vam da odvojite prezentaciju (CSS) od sadržaja (HTML).
Evo primera kako možete da koristite eksternu CSS datoteku:
Napravite novu datoteku pod nazivom "stiles.css" i definišite svoje stilove u ovoj datoteci kako sledi:
p {
color: blue;
font-size: 16px;
}
U odeljku <head> vašeg HTML dokumenta povežite se sa spoljnom CSS datotekom pomoću elementa <link>:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Koristite iste selektore i svojstva u HTML dokumentu koje ste definisali u CSS datoteci:
<body>
<p>This is some text</p>
<p>This is some more text</p>
</body>
U ovom primeru, boja teksta svih <p> elemenata je postavljena na plavu, a veličina fonta na 16 piksela, koristeći spoljnu CSS datoteku.
Prednost korišćenja eksternog CSS-a je u tome što možete da menjate stilove u jednoj datoteci i ona će se automatski primeniti na sve stranice povezane sa tom datotekom. Ovo olakšava održavanje i ažuriranje dizajna veb stranice.
Takođe je vredno napomenuti da možete koristiti više spoljnih CSS datoteka i povezati ih u HTML dokumentu, ovo je korisno kada želite da odvojite različite tipove stilova ili kada radite sa velikim projektom i želite da podelite stilove na različite fajlovi.