CSS za početnike

Poznavanje osnova CSS web jezika

CSS, ili Cascading Style Sheets, je temeljni kamen modernog web razvoja, rame uz rame s HTML-om i JavaScriptom. Dok HTML daje strukturu i sadržaj vašoj web stranici, CSS je zadužen za njezin izgled – boje, fontove, raspored elemenata i općenito vizualni identitet. Zamislite HTML kao kostur kuće, a CSS kao dizajn interijera i eksterijera: boju zidova, vrstu namještaja, raspored prostorija. Bez CSS-a, web stranice bi bile dosadne, neugledne i teško čitljive. Ako ste tek zakoračili u svijet web razvoja, poznavanje osnova CSS-a je apsolutno ključno za kreiranje privlačnih i funkcionalnih stranica.

Što je CSS i zašto je neophodan?

Kao što smo spomenuli, CSS je stilski jezik koji kontrolira izgled HTML dokumenata. Njegova primarna uloga je razdvojiti sadržaj (HTML) od prezentacije (CSS). Ova separacija donosi brojne prednosti:

  • Lakše održavanje: Promjena stila jedne CSS datoteke može odmah utjecati na izgled cijele web stranice, umjesto da mijenjate stil svakog pojedinog HTML elementa.
  • Veća kontrola: Omogućava preciznu kontrolu nad svakim aspektom vizualnog prikaza, od tipografije do animacija.
  • Brže učitavanje: Korištenjem eksternih CSS datoteka, preglednik može keširati stilove, što ubrzava učitavanje stranica pri ponovnom posjetu.
  • Bolje korisničko iskustvo: Estetski ugodna i dobro strukturirana stranica privlači i zadržava korisnike.
  • Responzivni dizajn: CSS je osnova za kreiranje web stranica koje izgledaju dobro na svim uređajima (desktop, tablet, mobilni telefoni).

Kako povezati CSS s HTML-om?

Postoje tri glavna načina za primjenu CSS-a na HTML dokument. Kao početnik, važno je razumjeti sve tri metode, ali jedna od njih se smatra najboljom praksom.

Inline stilovi

Inline stilovi se primjenjuju izravno na pojedini HTML element pomoću style atributa.

  • Primjer: 
    <p style="color: blue; font-size: 16px;">Ovo je paragraf s inline stilom.</p>
  • Prednosti: Brza i jednostavna primjena za manje promjene.
  • Nedostaci: Loša praksa za veće projekte jer miješa sadržaj i stil, otežava održavanje i ponovnu upotrebu stilova. Izbjegavajte ih koliko god možete.

Interni stilovi (internal CSS)

Interni stilovi se definiraju unutar <style> taga smještenog u <head> dijelu HTML dokumenta. Ovi stilovi se primjenjuju samo na taj specifični HTML dokument.

  • Primjer: 
    <!DOCTYPE html>
<html>
<head>
    <title>Moja stranica</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        p {
            font-family: Arial, sans-serif;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Dobrodošli!</h1>
    <p>Ovo je paragraf s internim stilom.</p>
</body>
</html>
  • Prednosti: Svi stilovi za jednu stranicu su na jednom mjestu.
  • Nedostaci: Stilovi se ne mogu ponovno koristiti na drugim stranicama. I dalje miješaju stil i sadržaj ako imate puno stilova.

Eksterni stilovi (external CSS)

Eksterni stilovi su daleko najčešći i najbolji način za primjenu CSS-a. Stilovi se pišu u zasebnoj .css datoteci (npr. style.css), koja se zatim povezuje s HTML dokumentom pomoću <link> taga unutar <head> dijela.

  • Primjer (HTML datoteka – index.html): 
    <!DOCTYPE html>
<html>
<head>
    <title>Moja stranica</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Dobrodošli!</h1>
    <p>Ovo je paragraf s eksternim stilom.</p>
</body>
</html>
  • Primjer (CSS datoteka – style.css): 
    h1 {
    color: purple;
    text-align: right;
}
p {
    font-family: Georgia, serif;
    font-size: 20px;
}
  • Prednosti: Potpuno razdvajanje sadržaja i stila. Stilovi se mogu ponovno koristiti na neograničenom broju stranica. Lakše održavanje i brže učitavanje. Ovo je preporučena metoda!

Osnovni CSS selektori – Kako odabrati elemente?

CSS selektori su pravila koja govore pregledniku na koje HTML elemente se određeni stil treba primijeniti. Bez selektora, CSS ne bi znao što točno treba stilizirati.

Selektor elementa (type selector)

Najjednostavniji selektor. Odabire sve instance određenog HTML elementa.

  • Sintaksa: element { svojstvo: vrijednost; }
  • Primjer: 
    p {
    color: #333; /* Tamno siva boja teksta */
}
h1 {
    font-size: 32px; /* Veličina naslova */
}
    Ovo će primijeniti navedene stilove na sve <p> i <h1> elemente na stranici.

Klasni selektor (class selector)

Omogućuje odabir jednog ili više elemenata koji dijele isti class atribut. Klase su vrlo fleksibilne i koriste se za primjenu istog stila na različite elemente, ili različitih stilova na isti tip elementa.

  • Sintaksa: .ime-klase { svojstvo: vrijednost; }
  • Primjer (HTML): 
    <p class="uvod">Ovo je uvodni paragraf.</p>
<div class="uvod">Ovo je uvodni div.</div>
<button class="gumb">Klikni me!</button>
<a href="#" class="gumb">Link kao gumb</a>
  • Primjer (CSS): 
    .uvod {
    background-color: lightyellow;
    border: 1px solid orange;
    padding: 10px;
}
.gumb {
    display: inline-block;
    padding: 8px 15px;
    background-color: dodgerblue;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

ID selektor (ID selector)

Odabire jedinstveni HTML element s određenim id atributom. id atribut bi trebao biti jedinstven za cijelu stranicu (svaki ID može postojati samo jednom).

  • Sintaksa: #ime-id-a { svojstvo: vrijednost; }
  • Primjer (HTML): 
    <div id="glavni-zaglavlje">
    <h1>Moja Super Stranica</h1>
</div>
  • Primjer (CSS): 
    #glavni-zaglavlje {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}
  • Napomena: ID selektori imaju visoku specifičnost i trebali bi se koristiti štedljivo, obično za elemente s jedinstvenom ulogom na stranici. Za ponavljajuće stilove, uvijek koristite klase.

Najčešće korištena CSS svojstva za početnike

Sada kada znate kako odabrati elemente, vrijeme je da naučite neka od najčešćih svojstava koja ćete koristiti za stiliziranje.

Tekst i fontovi

  • color: Postavlja boju teksta.
    • color: red;
    • color: #FF0000; (heksadecimalni kod)
    • color: rgb(255, 0, 0); (RGB vrijednost)
  • font-size: Postavlja veličinu fonta.
    • font-size: 16px; (pikseli)
    • font-size: 1.2em; (relativna jedinica, 1.2 puta veća od roditeljskog elementa)
  • font-family: Definira vrstu fonta. Uvijek navedite fallback fontove.
    • font-family: Arial, sans-serif;
  • font-weight: Postavlja debljinu fonta (npr. bold).
    • font-weight: bold;
    • font-weight: 700; (numeričke vrijednosti od 100 do 900)
  • text-align: Poravnava tekst unutar elementa.
    • text-align: left;
    • text-align: center;
    • text-align: right;
    • text-align: justify;

Pozadine

  • background-color: Postavlja boju pozadine elementa.
    • background-color: lightblue;
  • background-image: Postavlja sliku kao pozadinu.
    • background-image: url('slike/pozadina.jpg');
  • background-repeat: Kontrolira kako se pozadinska slika ponavlja.
    • background-repeat: no-repeat; (ne ponavlja se)
    • background-repeat: repeat-x; (ponavlja se horizontalno)
    • background-repeat: repeat-y; (ponavlja se vertikalno)
  • background-position: Postavlja početnu poziciju pozadinske slike.
    • background-position: center center;

Dimenzije i razmak

  • width i height: Postavljaju širinu i visinu elementa.
    • width: 200px;
    • height: 100%; (100% visine roditeljskog elementa)
  • margin: Vanjski razmak oko elementa (gura elemente dalje od sebe).
    • margin: 20px; (svuda okolo 20px)
    • margin: 10px 20px; (gore/dolje 10px, lijevo/desno 20px)
    • margin-top: 15px;
  • padding: Unutarnji razmak unutar elementa, između sadržaja i obruba (gura sadržaj dalje od obruba).
    • padding: 15px;
    • padding-left: 20px;
  • border: Postavlja obrub oko elementa.
    • border: 1px solid black; (širina, stil, boja)
    • border-radius: 5px; (zaobljeni rubovi)

Prikaz elemenata (display property)

display svojstvo je ključno za kontrolu rasporeda elemenata na stranici.

  • display: block;: Element zauzima cijelu raspoloživu širinu i stvara novi red. (div, p, h1 su block po defaultu).
  • display: inline;: Element zauzima samo onoliko širine koliko mu je potrebno i ne stvara novi red. Ne možete mu postaviti width i height. (span, a su inline po defaultu).
  • display: inline-block;: Kombinira svojstva inline i block. Elementi se poredaju jedan do drugog, ali im možete postaviti width i height. Vrlo korisno za navigacijske stavke ili gumbe.
  • display: none;: Potpuno skriva element sa stranice, kao da nikada nije ni postojao u DOM-u.

Razumijevanje CSS Box Modela – Temelj dizajna

Box Model je možda najvažniji koncept koji trebate razumjeti u CSS-u. Svaki HTML element se u pregledniku tretira kao pravokutna kutija, koja se sastoji od četiri sloja:

  1. Content (Sadržaj): Stvarni sadržaj elementa (tekst, slike, video). Njegova veličina se definira width i height svojstvima.
  2. Padding (Unutarnji razmak): Prozirni prostor između sadržaja i obruba. Povećava ukupnu veličinu elementa. Postavlja se s padding svojstvom.
  3. Border (Obrub): Linija koja okružuje padding i sadržaj. Može imati debljinu, stil i boju. Postavlja se s border svojstvom.
  4. Margin (Vanjski razmak): Prozirni prostor izvan obruba, koji gura elemente dalje jedan od drugog. Postavlja se s margin svojstvom.
+------------------------------------+
|               Margin               |
|  +------------------------------+  |
|  |            Border            |  |
|  |  +------------------------+  |  |
|  |  |         Padding        |  |  |
|  |  |  +------------------+  |  |  |
|  |  |  |     Content      |  |  |  |
|  |  |  +------------------+  |  |  |
|  |  |                      |  |  |
|  |  +------------------------+  |  |
|  |                            |  |
|  +------------------------------+  |
|                                    |
+------------------------------------+

Standardno, kada postavite width i height elementu, ta svojstva se odnose samo na sadržaj elementa. Padding i border se dodaju na tu širinu i visinu, što može dovesti do neočekivanih rezultata u rasporedu.

Zato je važno znati za box-sizing svojstvo. Postavka box-sizing: border-box; mijenja ovo ponašanje: width i height sada uključuju padding i border, čineći izračune dimenzija mnogo intuitivnijim. Većina modernih CSS frameworka koristi border-box po defaultu, a preporučuje se da ga i vi koristite.

/* Primjena border-box na sve elemente */
* {
    box-sizing: border-box;
}

Savjeti za početnike i idući koraci

  1. Vježbajte, vježbajte, vježbajte! Najbolji način za učenje CSS-a je praktična primjena. Počnite s malim projektima: stilizirajte blog post, kreirajte navigacijski izbornik, dizajnirajte jednostavnu karticu proizvoda.
  2. Koristite developerske alate u pregledniku. Svaki moderni web preglednik (Chrome, Firefox, Edge) ima ugrađene alate za developere (F12 ili desni klik -> “Inspect”). Oni vam omogućuju da vidite i mijenjate CSS stilove u stvarnom vremenu, što je neprocjenjivo za učenje i debugiranje.
  3. Čitajte dokumentaciju. MDN Web Docs (Mozilla Developer Network) je zlatni standard za web dokumentaciju. Kad god naiđete na neko CSS svojstvo koje ne razumijete, MDN je vaše prvo odredište.
  4. Učite responzivni dizajn. Nakon što savladate osnove, istražite media queries kako biste svoje stranice prilagodili različitim veličinama ekrana.
  5. Ne bojte se eksperimentirati. Nema boljeg načina za učenje od isprobavanja različitih vrijednosti i svojstava te promatranja kako se stvari mijenjaju.

Poznavanje osnova CSS-a otvara vam vrata u svijet kreiranja vizualno privlačnih i profesionalnih web stranica. S ovim znanjem, spremni ste za daljnje istraživanje naprednijih tehnika poput Flexboxa, CSS Grida, tranzicija i animacija. Sretno kodiranje!