CSS je programski jezik koji koristimo za dizajn web stranica. To je kratki odgovor na pitanje, što je CSS. U nastavku ćemo detaljnije opisati i pojasniti CSS.
CSS je akronim za Cascading Style Sheets, i osmišljen je za jednostavno korištenje prilikom dizajniranja internetskih stranica. Uz pomoć CSS-a uređujemo vizualni dio web stranice, kao i doživljaj koji će korisnik osjetiti kada pregledava određenu stranicu i sadržaj na njoj.
Korištenjem CSS-a web dizajner uređuje boje elemenata web stranice, stil fonta, razmake između svakog elementa, razmake između paragrafa, i još mnogo drugih stvari. Raspored kolumna, njihove dimenzije i rubove, sve to dizajner može definirati unutar CSS datoteke. CSS je odlično rješenje kada se web stranice trebaju prilagoditi za prikaz na zaslonima različitih veličina. Danas smo toga najviše svjesni, kada internet pregledavamo i sa računala, ali i sa mobilnih uređaja.
CSS je jednostavan za naučiti, i lako se razumije. Ipak, CSS pruža mnoštvo opcija za kontrolu prikaza web stranice i sadržaja na njoj. Pisali smo prije o HTML jeziku, koji zajedno sa CSS elementima daje korisniku kompletan prikaz web stranice kako to želi dizajner. Prije nego nastavimo sa temom, što je CSS, trebate znati da je taj jezik usko vezan za HTML ili XHTML.
Prednosti CSS koda
Do sada smo već objasnili što je CSS, pa ćemo spomenuti prednosti koje CSS donosi sa sobom. Danas je CSS neizostavan dio svake web stranice, a to nije bez razloga.
1. CSS štedi vrijeme
Jednom napisani CSS može se koristiti na više stranica nekog weba. Na primjer, ako ste glavnu stranicu uredili uz pomoć CSS koda, svojstva tih elemenata lako možete prenijeti i na druge stranice (O nama, Kontakt i sl…) bez potrebe pisanja novog koda za svaku stranicu (HTML) koju ćete napraviti.
2. Stranica se brže učitava
Ako koristite CSS, nema potrebe za pisanjem HTML atributa svaki put za svaki element na stranici. Jednom napisani CSS kod primjenjuje se na elemente HTML stranice kako ste ih vi definirali. To znači da imate manje koda, i u konačnici da se stranice lakše i brže učitavaju.
3. Lakše održavanje stranica
Za promjene na internet stranicama, što se dizajna tiče, jednostavno se urade potrebne izmjene u CSS datoteci. promjene se događaju automatski i biti će vidljive već prilikom ponovnog učitavanja stranice koju posjetitelj otvara.
4. Veće mogućnosti CSS-a u usporedbi sa HTML standardom
CSS ima veći raspon i broj atributa nego što ima HTML. To znači da uz pomoć CSS koda možete uraditi naprednije izmjene, dok uz pomoć HTML atributa to nije slučaj.
5. Kompatibilnost
HTML stranice koje su definirane CSS kodom biti će kompatibilne sa svim značajnim internet preglednicima koje danas koristimo. Bez obzira dali koristite desktop računalo, pametni telefon ili tablet, internet stranica će sadržavati elemente koji su određeni i definirani unutar CSS koda.
Razlika između CSS i HTML standarda
CSS i HTML nisu jedno te isto, ali su usko povezani i gotovo je nezamislivo uraditi web stranicu bez jednog od spomenutih standarda. Pored ova dva spomenuta, za razvoj internet stranica koriste se mnoge druge tehnologije, ali krajnji rezultat (sadržaj koji korisnik vidi) rezultat je CSS i HTML elemenata.
HTML je strukturalni dio, koji će posložiti elemente na web stranici. Za razliku od njega, CSS će definirati značajke pojedinih elemenata na web stranici, boju fonta, paragraf, pozicioniranje elemenata (lijevo, desno, gore, dolje), i druge značajke na stranici.
Zamislite HTML kao kući ili stan, koji je izgrađen po nekom projektu. Znamo gdje se nalaze elementi (prozori, vrata, stubište…). CSS će dati estetske elemente, koji daju konačni izgled svačijem domu, odnosno web stranici.
Postoji više metoda dodavanja CSS-a u neki web projekt. Napisat ćemo koje su to, i kako se koristi pojedina metoda.
Interno (unutarnje pozicioniranje CSS koda) je možda i najčešće korišteni pristup. Osim unutarnjeg dodavanja koda, CSS se može dodati u zasebnu datoteku, iz koje će se CSS kod kasnije pozivati.
Ako se CSS kod upisuje unutar HTML (.html) datoteke, u Header dijelu, to zovemo unutarnje pozicioniranje koda i često se koristi kada se radi jedna stranica. Na taj način pojednostavili smo izradu stranice i sve kontrole nalaze se u jednoj datoteci.
U slučaju da se radi projekt sa više internet stranica, unutarnje upisivanje CSS koda nije praktično. U tom slučaju kreira se posebna datoteka (.css) u koju se upisuju sve značajke stranice. Kasnije, uz pomoć kod za pozivanje, prilikom učitavanja internet stranice, poziva se CSS kod, i stranica se oblikuje po tom upisu.
Zašto učiti CSS?
Sada ste naučili što je CSS. Možda je vrijeme da krenete sa učenjem ovog programskog jezika? Zapravo, CSS se može relativno lako savladati, ali se pored CSS-a svakako treba naučiti i HTML.
Kako smo već napisali, ova dva jezika idu jedan s drugim, i poznavanje samo jednog i nema nekog smisla. Na sreću, i CSS i HTML se lako mogu savladati.
Ako vas zanima wb dizajn i izrada web stranica općenito, svakako predlažemo da krenete sa učenjem CSS i HTML jezika. Ako ih savladate, možemo kazati da imate potrebno znanje za izradu jednostavnih, ali opet efikasnih, internet stranica. Tek nakon što savladate CSS i HTML, za napredne web projekte, možete nastaviti sa učenjem drugih tehnologija. To su: MySQL, PHP, json, javascript, i druge…
Zaključak za kraj
Trebamo spomenuti da je CSS standardiziran i kako tehnologija napreduje, CSS obuhvaća sve veći broj atributa, potiskujući potrebu za kodiranjem unutar HTML standarda. HTML je i dalje osnova, ali što se tiče dizajna i pozicioniranja elemenata na stranici, CSS tu ima glavnu ulogu.
CSS verzije nisu se često mijenjale, ali se sami kod i njegove mogućnosti redovno nadograđuju. Cascading Style Sheet level 1 CSS1 se pojavio 1996.g. da bi već 1998.godine izašla CSS2 verzija. Danas koristimo mogućnosti CSS2 verzije, sa svim poboljšanjima koja su se pojavila godinama.
Najveću snagu CSS koda vidimo prilikom korištenja mobilnih uređaja, odnosno otvaranjem internet stranica na pametnim telefonima. Takozvane mobile-friendly stranice su danas obvezne za svaku ozbiljnu internet stranicu, a sav se efekt postiže upisivanjem koda u CSS datoteku.
