Da bi jednostavnije razumjeli kako cijela stvar funkcionira uzet ćemo samo dva dokumeta za analizirat index i site_css.
index stranica sastoji se od raznih elementa uglavnom teksta i ćelija, a site_css ili css dokument upravlja tim elementima.
Sadržaj je odvojen od dizajna, na taj način se možemo lakše upravljati stranicom ili jednostavnije i brže napraviti redizajn.
Ako pogledate HTML kod u index stranici pronaći ćete ovako nešto
<div class=“codeblock”>
<div class="codek"><div id="wrapper”></div>
<div id="header”></div>
ili
<div class=“codeblock”>
<div class="codek"><div class="entry”></div>
<div class="entry-title”> </div>
Sa id su označeni elementi koji se pojavljuju samo jednom na stranici, a sa class elementi koji se pojavljuju više puta. Svaki id i class ima priduženo neko ime wrapper, header, entry, entry-title…
Ako pogledate u site_css dokument pronaći ćete te iste nazive. id su označeni sa znakom # ispred
<div class=“codeblock”>
<div class="codek">#wrapper {</div>
width: 750px;
margin: auto;
padding: 0;
text-align: left;
}</div>
a class sa točkom ispred naziva
<div class=“codeblock”>
<div class="codek">.entry-title {</div>
margin: 0;
padding: 0;
}</div>
U css dokumentu svakom id ili class nazivu su dodana neka određena svojstva(širina, visina, boja, pozadina i slično…)
id ili id svojstva možete dodati samo jednom elementu, dok class svojstva ili odrednice možete dodati bilo kojem elementu.
Za vježbu probajte mjenjati samo odrednice u css dokumentu. Pronađite određeni id ili class koji određuje neki element, tada pronađite isti taj naziv u css dokumentu i promjenite neke elemente, kliknite osvježi pa otvorite stranicu i pogledajte što se dogodilo. Ako ne vidite promjene kliknite REFRESH u browseru.
Nemojte mjenjati nekoliko classova odjednom nego jedan po jedan tako ćete vidjeti što se događa.
Prije nego počmete mjenjati predloške kopirajte orginalni kod i zalijepite ga negdje(word), tako ukoliko napravite neku grešku a ne znate kako je popraviti, samo natrag zalijepite orginalni kod.
