Uvod u CSS Do sad smo se upoznali sa HTML elementima pomoću kojih ubacujemo i raspoređujemo sadržaj na našoj stranici. Kada pogledate sad vašu stranicu koju smo do sad kreirali morate priznati da ne izgleda ni približno onom što želite. Iz tog razloga postoji CSS i on će nam pomoći da doteramo stranicu do željenog izgleda. CSS je kao šminka za HTML. :) Najnovija verzija je CSS3 koja podržava u potpunosti CSS, samo što su dodate nove opcije, tako da ćemo u ovom nivou preći mnoštvo opcija koje nam nudi CSS, a u narednom ćemo se upoznati i sa tim novim koje nam nudi CSS3, kao što su pozadine, animacije, transformacije i svašta još nešto interesantno.

Kucanje CSS koda CSS kod se može kucati na tri načina: 1.

U HTML dokumentu između tagova: <style> .

2.

U samom HTML elementu pomoću atributa style:

Tekst

.

3.

U odvojenom CSS fajlu i onda se preko link taga uveze u HTML fajl. Kao što smo na kraju prethodnog nivoa kreirali naš CSS fajl i uvezli ga u naše strane, mi ćemo, samim tim, koristiti treći način kucanja koda, odnosno u eksternom fajlu. Razlog toga je vrlo jednostavan - da razgraničimo šta nam je:



CSS,



HTML i kasnije



JS kad budemo dodavali, nije baš najbolja praksa stavljati CSS u HTML. Evo prostog primera: Na svim stranama imamo navigaciju (index.html, o-nama.html, galerija.html...) i sad mi u index.html fajlu stilizujemo našu navigaciju pomoću načina 1 i 2 prethodno navedenih. Šta se onda dešava? Oni ostaju u index.html fajlu i vi kada odete na neku drugu stranicu, stilova nema i morate tamo da ih unesete. Pa dobro, možda će neko hteti tako da radi. Međutim, posle će ga stići glavobolja. :) Imamo da dodamo još jednu stavku u navigaciju i ona nam poremeti responsive, izgubi izgled i još ponešto (dešavaće se). Jao, muke! Sad treba u svim fajlovima na istom mestu dodati / prepraviti kod. Zašto se mučiti, kad sve možete imati na jednom mestu, odnosno u jednom CSS fajlu zasebno. :) Nadamo se da Vam je sad jasnije zašto nećemo opisivati 1 i 2 način, jer je

jednostavno loša praksa. Ako baš bude neophodno da nešto odradite na taj način evo ukratko... U head elementu strane možete dodati stilove na sledeći način: <style> ...

Ukoliko želite direktno u element, onda se to radi na sledeći način:

Sada ćemo preći i držati se našeg kreiranog fajla stilovi.css

Sintaksa CSS za neki element (bilo da pišete klasu, ID ili element) se sastoji izdva glavna dela: 1. Selektor 2. Jedna/više deklaracija.

Deklaracija se sastoji takođe od dva dela, a to su: 1. Svojstvo 2. Vrednost.

Selektori služe da se odredi kom elementu dodeljujemo stilove. U gornjem primeru nam je selektor h1 tag, tako da smo automatski svim h1 elementima na stranicama dodelili veličinu fonta na 24px. Deklaracijom definišemo svojstvo i vrednost koje želimo da dodelimo selektoru odnosno određenom HTML elementu . Svojstva mogu biti: 

veličina fonta,



stil,



boja,



pozadina itd. Svako svojstvo ima svoju vrednost koja može biti: boja, veličina izražena u nekoj jedinici i slično. U narednim lekcijama ćemo se upoznati sa dosta svojstava i njihovih vrednosti, kako bismo Vam ukazali na opcije koje imate da stilizujete vašu stranicu što je bolje moguće.

Jedan selektor može imati jednu ili više deklaracija koje se nalaze unutar vitičastih zagrada {}. Anatomija pravila:

Selektori Selektori su jedan od najbitnijih aspekata u CSS -u i pomoću njih, kao što im ime kaže, selektujemo element koji želimo da stilizujemo. Selektore možete definisati na više različitih načina. Selektori mogu da identifikuju bilo koji HTML tag, ali mogu još mnogo toga da urade.

Univerzalni selektori se pišu kao * (zvezdica) i oni se odnose na sve elemente koje imate na strani. Vrednost univerzalnog selektora se može izmeniti ukoliko dodelite druge vrednosti ciljanom elementu. Ovaj selektor se često koristi za uklanjanje podrazumevanih margina i padinga sa svih elemenata. *{ margin: 0; padding: 0; }

Pomoću prethodnog koda smo uklonili svim elementima marginu i uvlačenja (to su one podrazumevane vrednosti, npr. za naslove za koje smo rekli da ćete kasnije moći pomoću CSS-a da ih promenite). Pa, ukoliko dodamo kod iznad u naš stilovi.css fajl možemo videti da su sve margine i uvlačenja nestala.

Element selektori Element selektori se koriste da neku deklaraciju dodelimo za sve elemente tog tipa. Na primer:ako imamo paragraf koji, kao što znamo, dodajemo pomoću

elementa, svim paragrafima možemo dodeliti, npr. boju slova da bude plava i veličina fonta na 14px: p{ color: blue; font-size: 14px; }

Umesto

taga, možete ubaciti bilo koji i dodeliti mu vrednosti koje želite. Na promer: 

,



,



<section>...

ID selektori ID selektori se koriste da se definišu stilovi za jedan unikatan element iz razloga što, kao što smo rekli, jedinstveni ID možemo dodeliti samo jednom elementu (da ne dođe do zabune svaki element može imati ID, ali ne sme imati isti).

Selektor za ID je # (taraba) i na tarabu se nadovezuje ID. Na primer, ako imamo element:

Cao

i želimo tom ID-ju da dodelimo stilove, to radimo na sledeći način: #jedinstveni_podnaslov{ font-size: 26px; margin-bottom: 10px; }

Klasa selektor Klasa selektor se koristi bukvalno isto kao i ID, imaju sličnu sintaksu, samo što se umesto # (tarabe) stavlja . (tačka) i ovaj selektor ćemo najviše koristiti, jer nam klase omogućavaju dodelu na više elemenata, što nije slučaj sa ID-jem. To je zapravo suštinska razlika između ova dva tipa selektora - što se class selektori primenjuju na jedan ili više elemenata na stranici, dok se ID selektor primenjuje isključivo na jedan element. Na primer, ovaj HTML kod:

Podnaslov 1

Podnaslov 2

CSS izgleda ovako: .podnaslov{ font-size: 26px; margin-bottom: 10px; }

i onda nam svi podnaslovi imaju veličinu fonta od 26px i donju marginu od 10px.

Selektori za ugnežđene elemente Selektori za ugneždene elemente se koriste da definišemo, npr. za linkove čiji je kontejner div sa određenom klasom želimo da dodelimo neki stil. Deluje malo konfuzno, ali da bismo najbolje pojasnili ovo, pogledajte HTML kod ispod:

O nama Galerija Kontakt

vidimo da ima tri linka u elementu