CSS Vadnica

Vgrajeni CSS (Inline CSS) je najpreprostejši, a hkrati tudi najmanj priporočljiv način za oblikovanje posameznih elementov na spletni strani. Pri tej metodi dodamo stilsko definicijo neposredno v HTML oznako elementa, ki ga želimo oblikovati, s pomočjo atributa style.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vgrajeni CSS</title>
</head>
<body>
    <h1 style="color: lightskyblue; font-size: 24px;">To je naslov</h1>
    <p style="color: red;">To je odstavek.</p>
</body>
</html>

REZULTAT

V zgornjem primeru je prvi naslov moder in velik, odstavek pa rdeč. Te barve so zapisane neposredno v oznakah <h1> in <p>.

Kako deluje?

Predstavljajte si, da imate na steni sliko. Če želite, da je okvir rdeč, namesto da bi barvo določili na celotni sobi (zunanji CSS) ali na celotni steni (notranji CSS), samo tisto sliko pobarvate z rdečo barvo. Vgrajeni CSS deluje natanko tako: vsak element ima svojo "barvno nalogo" zapisano neposredno v sebi.

Kdaj uporabiti?

Vgrajeni CSS je primeren samo za:

Hitre popravke med razvojem (npr. "Sedaj naj bo to rdeče, da vidim, kako izgleda").
Enkratne elemente, ki se nikoli ne ponovijo in ne potrebujejo ponovne uporabe.
Elektronska sporočila (Email), kjer mnogi strežniki ne podpirajo zunanjih ali notranjih CSS datotek.

Zakaj ga ne uporabljati za celotno stran?

Za večje spletne strani je vgrajeni CSS neučinkovit in težaven za vzdrževanje:

Ponavljanje: Če želite spremeniti barvo vseh naslovov na strani, morate iti skozi vsak element posebej in spremeniti atribut style. To je zamudno in nagnjeno k napakam.
Velikost kode: HTML datoteka postane ogromna, ker je vsak element poln stilske kode.
Brez ponovne uporabe: Ne morete enostavno uporabiti istega stila za več elementov, kot to omogočajo zunanje ali notranje datoteke.

Zaključek: Vgrajeni CSS je kot "popravilo s trakom" – reši situacijo takoj, a ni trajna rešitev. Za profesionalne in urejene spletne strani vedno uporabite Zunanji CSS.