CSS (Cascading Style Sheets) je jezik za stilizaciju koji se koristi za definisanje izgleda i dizajna web stranica. On omogućava odvajanje stila (dizajna) od strukture (HTML) web stranica, što olakšava promene u izgledu bez uticaja na sadržaj.
Inline CSS
Inline CSS je tehnika stilizacije HTML elemenata gde se stilovi definišu direktno unutar HTML elemenata koristeći style atribut. Ovo omogućava primenu specifičnih stilova samo na odabrane elemente. Evo objašnjenja i primera inline CSS-a:
Objašnjenje:
Da biste koristili inline CSS, dodajte style atribut u HTML otvarajući tag elementa i definišite stilove unutar ovog atributa. Inline CSS ima prioritet nad eksternim i internim CSS stilovima, što znači da će stilovi definisani inline biti primenjeni čak i ako postoje konflikti sa drugim stilovima.
Primeri:
Promena boje teksta i pozadine za <p> element:
<p style="color: red; background-color: yellow;">Ovo je crveni tekst na žutoj pozadini.</p>
Promena font veličine i poravnavanje za <h1> element:
<h1 style="font-size: 24px; text-align: center;">Naslov</h1>
Dodavanje granice i margine za <div> element:
<div style="border: 1px solid blue; margin: 10px;">Ovo je div sa plavom granicom i margina od 10px.</div>
Inline CSS je korisno kada želite brzo primeniti specifične stilove na određene elemente bez potrebe za definisanjem eksternih ili internih CSS fajlova. Međutim, treba ga koristiti sa oprezom, posebno za globalnu stilizaciju, jer može dovesti do nepreglednog koda ako se često ponavlja. Za opštu stilizaciju celog web sajta preporučuje se upotreba eksternih CSS fajlova.
Interni CSS
Interni CSS, takođe poznat kao ugnežđeni CSS, je tehnika stilizacije HTML elemenata gde se stilovi definišu unutar samog HTML dokumenta, obično unutar <style> oznake u <head> delu HTML dokumenta. Ovo omogućava definisanje stilova koji se primenjuju na celu stranicu ili na određene delove stranice. Evo objašnjenja i primera internog CSS-a:
Objašnjenje:
Da biste koristili interni CSS, koristite <style> oznaku unutar <head> dela HTML dokumenta. Unutar <style> oznake možete definisati CSS pravila za različite HTML elemente koristeći selektore.
Primeri:
Unutarnji stil za celu stranicu:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je primer internog stila.</p>
</body>
</html>
Unutarnji stil za određeni HTML element:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h1>Naslov 1</h1>
<h2>Naslov 2</h2>
</body>
</html>
Unutarnji stil za klasu:
<!DOCTYPE html>
<html>
<head>
<style>
.naslov {
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="naslov">Boldovan naslov</h1>
<p>Ovo nije boldovan tekst.</p>
</body>
</html>
Unutarnji CSS je koristan za primenu stilova na određene HTML stranice ili delove stranica. Međutim, treba imati na umu da će se stilovi primeniti samo na stranicu na kojoj su definisani. Za deljenje stilova između više stranica, često se koriste eksterni CSS fajlovi.
Eksterni CSS
Eksterni CSS (External CSS) je tehnika stilizacije HTML elemenata gde se stilovi definišu u posebnom CSS fajlu koji se zatim povezuje sa HTML dokumentom. Ovo omogućava centralizovanje stilova i njihovo ponovno korišćenje na više stranica. Evo objašnjenja i primera eksternog CSS-a:
Objašnjenje:
Da biste koristili eksterni CSS, potrebno je da kreirate zaseban CSS fajl sa ekstenzijom .css koji sadrži definicije stilova. Zatim, u HTML dokumentu koristite <link> oznaku unutar <head> dela kako biste povezali CSS fajl sa HTML dokumentom.
Primeri:
Eksterni CSS fajl (style.css):
/* style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
HTML dokument sa povezanim eksternim stilom:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je primer eksternog stila.</p>
</body>
</html>
Korišćenje istog eksternog CSS fajla na više HTML stranica:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Naslov na prvoj stranici</h1>
</body>
</html>
-------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Naslov na drugoj stranici</h1>
</body>
</html>
Eksterni CSS omogućava efikasno upravljanje stilovima na više stranica. Promene u stilu se primenjuju na sve stranice koje koriste isti eksterni CSS fajl, što olakšava održavanje i konsistentnost izgleda na celom sajtu.