Osnove CSS za popolne začetnike: Kako oblikovati spletno stran

Če HTML predstavlja skelet spletne strani, je CSS (Cascading Style Sheets) tisti, ki ji doda barve, lep izgled, privlačne pisave ter poskrbi, da se stran popolnoma prilagodi zaslonom mobilnih telefonov, tablic in računalnikov. Brez CSS-ja bi bil celoten internet videti kot dolgočasen črno-bel dokument. V tem članku si bomo ogledali osnove delovanja slogovnih predlog in pravila za privlačno oblikovanje.

Kako deluje CSS pravilo?

Vsako CSS pravilo je sestavljeno iz dveh glavnih delov: izbirnika (selector), ki določa, kateri HTML element želimo oblikovati, ter deklaracijskega bloka z lastnostmi in vrednostmi.

Trije načini vključevanja CSS-ja v spletno stran

Slogovne predloge lahko v HTML vključimo na tri različne načine, pri čemer je zunanja datoteka najbolj priporočljiva praksa.

1. Zunanji CSS (External): Sloge shranimo v ločeno datoteko style.css in jo povežemo z oznako <link rel="stylesheet" href="style.css"> v glavi strani.
2. Notranji CSS (Internal): Sloge vpišemo neposredno v HTML glavo znotraj značke <style>.
3. Vrstični CSS (Inline): Slog določimo posameznemu elementu z atributom style="...".

Primer osnovnega oblikovanja s CSS-jem

Spodnji primer prikazuje, kako z nekaj preprostimi pravili polepšati naslove, odstavke ter ustvariti moderen gumb.

/* Oblikovanje celotnega telesa strani */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f6f9;
    color: #333333;
    padding: 20px;
}

/* Oblikovanje glavnega naslova */
h1 {
    color: #0056b3;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 8px;
}

/* Moderen izgled gumba */
.moj-gumb {
    background-color: #28a745;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

Želite izvedeti več o CSS-ju?

Če želite obvladati postavitev elementov z orodjema Flexbox in Grid, animacije ter odzivno oblikovanje za mobilne naprave, obiščite našo celovito CSS vadnico za začetnike.