CSS Vadnica

CSS je pripomoček, s katerim urejamo HTML dokument in poskrbimo za predstavitev spletnih strani. Uporablja se za določanje sloga HTML strani. Določimo lahko barve, velikosti, rob, oblazinjenje, obrobe, položaje in na tone drugih stvari. Pravila so sestavljena iz zbirnikov in deklaracijskega bloka. Zbirnik kaže na element HTML, ki ga želimo formatirati, blok formata pa vsebuje deklaracije, ločene s podpičje. Vsaka deklaracija vključuje lastnosti in vrednosti CSS, ločene s podpičji, bloki se končajo z zavitimi oklepaji. Zbirniki se uporabljajo za iskanje elementov HTML, ki jih želimo transformirati, razdelimo pa jih v pet kategorij. CSS se uporablja za določanje videza našega spletnega mesta, vključno s spremembami dizajna, postavitve in zaslona na različnih napravah. To so mobilne naprave, tablice, prenosniki. CSS je rešil velik problem pri oblikovanju in izdelovanju spletnih strani.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Vadnica</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        /* Reset in osnovni slog strani */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: sans-serif;
            background-color: #f8fafc;
            color: #212529;
            line-height: 1.6;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* Kartica – čist CSS brez zunanjih odvisnosti */
        .kartica {
            background-color: #ffffff;
            border: 2px solid #dee2e6;
            border-radius: .5rem;
            padding: 2rem 1.5rem 1.5rem 1.5rem;
            margin: 1rem auto;
            max-width: 540px;
            position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
        }

        /* Uporabimo emoji ℹ️ namesto Bootstrap ikone */
        .kartica::before {
            content: "ℹ️"; 
            font-size: 1.8rem;
            position: absolute;
            top: -1.2rem; 
            left: 1rem;
            background-color: #ffffff;
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        }

        .kartica::after {
            content: "NOVO";
            font-size: .75rem; 
            font-weight: 600;
            color: #fff; 
            background-color: #dc3545;
            padding: .25rem .5rem;
            border-radius: .25rem;
            position: absolute;
            bottom: -0.75rem; 
            right: 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
        }

        .kartica-naslov {
            font-size: 1.5rem;
            margin-bottom: .75rem;
            color: #198754;
        }

        /* Gumb – label, ki deluje kot “button” */
        #preklop {
            position: absolute;
            left: -9999px;
        }

        .gumb-preklop {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: #ffc107;
            color: #212529;
            padding: .5rem 1rem;
            border-radius: .25rem;
            cursor: pointer;
            user-select: none;
            transition: background .2s ease;
            font-weight: 600;
            margin-top: 1rem;
        }

        .gumb-preklop:hover {
            background: #e0a800;
        }

        /* Ko je checkbox označen → spremenimo barvo gumba */
        #preklop:checked + label.gumb-preklop {
            background: #28a745;
            color: #fff;
        }

        /* Skrita vsebina – prikaže se le, ko je checkbox kliknjen */
        .pozdravni-sms {
            display: none;
            margin-top: 1rem;
            padding: 1rem;
            background: #e8f5e9;
            border-left: 4px solid #28a745;
            border-radius: .25rem;
            font-weight: 600;
        }

        #preklop:checked ~ .pozdravni-sms {
            display: block;
        }
    </style>
</head>
<body>
 
<div class="kartica">
    <h2 class="kartica-naslov">🎨 Osnovni CSS primer</h2>

    <p>Ta kartica prikazuje nekaj pogostih CSS‑lastnosti: barve, notranje odmike (padding), zunanje odmike (margin), 
    robove, senco ter pseudo‑elemente <code>::before</code> in <code>::after</code> brez uporabe zunanjih knjižnic.</p>

    <input type="checkbox" id="preklop">

    <label for="preklop" class="gumb-preklop">
        👆 Klikni me
    </label>

    <div class="pozdravni-sms">
        Dobrodošli v moji CSS Vadnici!
    </div>
</div>

</body>
</html>

REZULTAT

CSS je kratica za Cascading Style Sheets (slo. Kaskadni slogovni listi).
CSS opisuje, kako naj bodo elementi HTML prikazani v brskalniku.
Zunanji CSS se lahko uporablja za nadzor postavitve več spletnih strani hkrati.
Zunanje tabele so shranjene v datotekah CSS na naših strežnikih.

Orodje za delo s CSS

Orodje za delo s CSS je mogoče uporabiti, kar beležko v vsakem operacijskem sistemu. Profesionalna orodja, kjer lahko delamo s slogom je ogromno, vendar jih bom naštel samo nekaj. Kot prvi IDE je to PHPStorm, drugi se pojavi pod imenom VS Code, tretjemu je ime Notepad++ in še bi jih lahko našteval. Dodal sem tudi krajši opis (vsaj s PHPStorm in VSCode orodji), kako s tema dvema orodjema začeti. Poglejmo si najprej, kako v beležnici dodamo slog HTML dokumentu z uporabo notranjega sloga.

Orodje	Za koga?	Kako začeti s CSS?	Cena
Beležnica (Notepad)	Za popolne začetnike, ki želijo razumeti osnove brez odvečnih funkcij.	Ustvarite datoteko `style.css` in jo povežite s HTML. Pišite ročno, brez pomoči.	Brezplačno
Notepad++	Za začetnike, ki želijo barvno kodiranje in hitrost.	Namestite vtičnik "CSS Syntax Highlighting" za barvno poudarjanje.	Brezplačno
Visual Studio Code (VS Code)	Za tiste, ki želijo moderno orodje z odličnimi dodatki.	Uporabite vgrajeno "Live Server" razširitev za takojšen pregled sprememb v brskalniku.	Brezplačno
PhpStorm	Za profesionalce, ki želijo vse v enem (CSS, HTML, JS, PHP).	Ničesar ne nameščati! Vgrajen "IntelliSense" samodejno ponuja CSS lastnosti in vrednosti.	30 dni brezplačno

Moj nasvet: Začnite z Beležnico, da razumete sintakso. Ko boste začeli pisati več kode, preidite na VS Code ali PhpStorm za avtomatsko dopolnjevanje in hitrejše delo.

Oblikovanje spletne strani s CSS

CSS (Cascading Style Sheets) je jezik, s katerim oblikujemo videz HTML dokumentov. Kadarkoli brskalnik prebere CSS kodo, bo oblikoval stran glede na pravila, zapisana v njej. Poznamo tri načine vključevanja CSS-ja v HTML dokument:

Način	Kje se zapiše?	Kdaj uporabiti?	Primer (Povezava)
Vgrajeni CSS (Inline)	V atributu `style` neposredno na HTML elementu. `<p style="color: red;">`	Za hitre, enkratne popravke posameznega elementa. (Ne priporočeno za večjo uporabo)	▶ Primer kode
Notranji CSS (Internal)	V oznaki `<style>` znotraj `<head>`. `<style> p { color: red; } </style>`	Za oblikovanje samo ene same strani, ko ne želite ločene datoteke.	▶ Primer kode
Zunanji CSS (External)	V ločeni datoteki `.css`, povezani z `<link>`. `<link rel="stylesheet" href="style.css">`	Za oblikovanje več strani. (Standardna in priporočena metoda)	▶ Primer kode

Zunanji CSS je najbolj priporočljiv način, saj omogoča, da celoten videz spletne strani spremenimo z urejanjem samo ene datoteke. Vsaka spletna stran mora vsebovati sklic na zunanjo slogovno datoteko z oznako <link> znotraj <head>. Če spremenimo slog v zunanjem CSS-ju, se sprememba samodejno uveljavi na vseh straneh, ki so povezane s to datoteko – namesto da bi morali urejati vsako stran posebej.

Zunanjo CSS datoteko lahko zapišete celo v Beležnico (Notepad). Ni potrebno dodajati oznake <style> – preprosto napišete CSS kodo, pri shranjevanju izberete možnost All Files in datoteko shranite z imenom, ki se konča na .css (npr. slog.css). Nato to datoteko povežete s spletno stranjo z oznako <link>, kjer navedete pot do datoteke na strežniku.

Notranji CSS uporabimo, ko oblikujemo samo eno stran – stile zapišemo znotraj oznake <style> v <head>. Vgrajeni CSS pa uporabimo, ko želimo oblikovati le posamezen element – mu dodamo atribut style neposredno v HTML oznako.

CSS Vadnica

Orodje za delo s CSS

Oblikovanje spletne strani s CSS

Vadnica.org

Povezave

Podpora