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.

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.

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">
    <!-- Bootstrap CSS (za utility‑klase in ikone) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1Hc2XKp4U8K/6MZ9Z9W3R5V5v5X4F5y5V5y5V5y5V5y" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        /* Osnovni slog strani */
        body{
            font-family: system-ui,sans-serif;
            background-color: #f8fafc;
            color: #212529;
            line-height: 1.6;
            padding: 2rem;
        }

        /* Kartica – osnovni slog + pseudo‑elementi */
        .kartica {
            background-color: #ffffff;
            border: 2px solid #dee2e6;
            border-radius: .5rem;
            padding: 1.5rem;
            margin: 1rem auto;
            max-width: 540px;
            position: relative;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
            transition: background .3s ease, border-color .3s ease;
        }
        .kartica::before {
            content: "\f5fd"; /* info‑circle iz Bootstrap Icons */
            font-family: "bootstrap-icons", sans-serif;
            font-size: 2rem;
            color: #0d6efd;
            position: absolute;
            top: -1rem; 
            left: -1rem;
            background-color: #ffffff;
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            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: -0.75rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
        }
        .kartica-naslov {
            font-size: 1.5rem;
            margin-bottom: .75rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .kartica-naslov i { 
            color: #198754;
        }

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

        /* Slog nalepke, ki jo uporabnik vidi */
        .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;
        }
        .gumb-preklop:hover {
            background: #e0a800;
        }

        /* Ko je checkbox označen → spremenimo barvo gumba */
        #preklop:checked + label.gumb-preklop {
            background: #28a745; /* zelena */
            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"><i class="bi bi-palette"></i>Osnovni CSS primer</h2>

    <p>Ta kartica prikazuje nekaj pogostih CSS‑lastnosti: barve, padding, margin, robove, senco, pseudo‑elemente 
    <code>::before</code> in <code>::after</code>, ter ikone iz <strong>Bootstrap Icons</strong>.</p>

    <!-- Skriti checkbox -->
    <input type="checkbox" id="preklop">

    <!-- Label, ki deluje kot gumb -->
    <label for="preklop" class="gumb-preklop">
        <i class="bi bi-hand-index-thumb"></i>Klikni me
    </label>

    <!-- Besedilo, ki se prikaže po kliku -->
    <div class="pozdravni-sms">
        Dobrodošli v moji CSS Vadnici!
    </div>
</div>
</body>
</html>

REZULTAT

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.

Beležnica	Pisanje sloga v beležnici.	Glej primer
PHP Storm	Če želimo ustvariti slog v PHPStorm, nam ni potrebno nameščati ničesar. PHPStorm seveda vključuje intelliSense, kar pomeni, da nam vnaprej ponuja možnosti, kaj želimo izbrati.	Glej primer
VS Code	Odpravljanje napak s prekinitvenimi točkami, skladi klicev in interaktivna konzola.	Glej primer

Oblikovanje spletne strani s CSS

Kadarkoli brskalnik prebere vstavek CSS, bo formatiral HTML dokument glede na podatke, zapisane v njem format. Poznamo tri oblike oblikovanja, ki so zapisane v spodnji tabeli. Celoten videz spletne strani lahko spremenimo z zunanjo datoteko CSS tako, da delamo/posodabljamo samo ena datoteka. Vsaka spletna stran mora vsebovati sklic na zunanjo slogovno datoteko, ki se nahaja znotraj elementa <link>. Če delamo samo na enem spletnem mestu, lahko uporabimo notranji CSS, ki je podan znotraj atributa style. Za slog v vrstici se uporablja notranji slog in če želimo uporabiti slog v vrstici, ustreznemu elementu dodamo atribut style.

Ko gre za zunanji CSS, lahko datoteko zapišemo, kar v Beležnico. Ni potrebno dodajati oznake [<style>] preprosto napišemo celoten CSS, pri shranjevanju pa izberemo možnost All Files in datoteko shranimo z imenom, ki se konča na .css (npr. slog.css). Nato samo povežemo to datoteko s spletno stranjo z oznako [<link>], kjer navedemo pot do datoteke na strežniku. Poglejmo si še primer. V tem primeru sem uporabil zunanje datoteke, kot tudi CSS znotraj same strani. Slog v zunanji datoteki je enak slogu, definiranemu na strani, vendar ima zunanja datoteka določeno prednost: če spremenimo slog v zunanji datoteki, se te spremembe samodejno upoštevajo na vseh straneh, kjer smo povezali to datoteko z oznako [<link>]. To pomeni, da lahko slog celotne spletne strani enostavno spremenimo na enem mestu, namesto da bi morali urejati slog v vsakem dokumentu posebej.

Zunanja CSS datoteka	Ustvarimo zunanjo CSS datoteko in jo uvozimo v HTML dokument z <link> elementom.	Glej primer

Notranji CSS postavimo znotraj elementa <style>, ki se nahaja v <head>. V bistvu smo ga že spoznali v primeru zunanje datoteke, ampak tokrat si ga bomo ogledali natančneje. V nekaterih okoliščinah so lahko interne/notranje tabele slogov koristne. Na primer, če morda delamo s sistemom za upravljanje vsebine, kjer nam je onemogočeno spreminjanje zunanjih CSS datotek. Toda za spletna mesta z več kot eno stranjo postane notranja tabela slogov manj učinkovit način dela. Če želimo uporabiti enoten slog za več strani z uporabo notranjih slogov, moramo imeti notranjo tabelo na vsaki spletni strani, ki bo slog uporabljala. Delo postane počasnejše, prihaja do veliko napak, ker pozabimo spremeniti na vseh mestih, v glavnem veliko težav, ampak si poglejmo primer.

Notranji CSS	V notranji slogovni tabeli preprosto zapišemo CSS znotraj elementa <style>, ki se nahaja v glavi HTML dokumenta.	Glej primer

Po vgrajenih slogih bomo posegali manj pogosto, vendar še vedno pomembno, da jih spoznamo. Obstaja namreč veliko priložnosti, ko pridejo prav. Z vgrajenimi slogi bomo HTML oznaki dodali atribut <style>, ki mu bo sledil naš slog za oblikovanje elementa.

Vgrajeni CSS	Slog elementa se vnese v samo HTML oznako.	Glej primer

Vgrajene sloge uporabljamo zelo malo, vendar še vedno, ko vpišemo slog v element se zunanji ali notranji slog izniči (vgrajeni slog velja kot privzeti).

Izbirnik barv

Pri oblikovanju spletnih strani je pravilna izbira barv ključna za dober izgled. Spodaj lahko s klikom na barvno polje odprete paleto in izberete poljubno nianso. Orodje vam bo takoj izpisalo HEX in RGB kodo, ki jo preprosto kopirate v svojo CSS datoteko. To vam prihrani čas, saj vam ni treba ugibati vrednosti ali uporabljati zunanjih programov.

Naslov

Izberi svojo barvo

Klikni na kvadrat levo

HEX: #FF0000

RGB: rgb(255, 0, 0)

HSL: hsl(0, 100%, 50%)