Opća pravila
Na početku CSS datoteke uvijek pišemo @charset “utf-8”; zbog naše kodne stranice. Nakon toga nabrajamo selektore (to su nazivi elemenata stranice, npr. #main). Svojstva selektora nabrajamo unutar vitičastih zagrada { }, a njihove vrijednosti iza znaka dvotočke : i točku-zarez ; pišemo na kraju reda.
Što su zapravo selektori? Možemo ih zamisliti kao površine unutar kojih smještamo svoj sadržaj na stranicu (tekst, slike itd). Svakom tom sadržaju treba odrediti lokaciju, dimnezije, boju, okvir, udaljenost od ostalog sadržaja i mnogo drugih svojstava. Korištenje pojedinih svojstava ovisi o nama samima i o želji klijenta za kojeg radimo web stranicu.
Pravila korištenja selektora:
1. Upisati selektor u HTML datoteku:
<div id=”main”>
…
</div>
2. Upisati taj isti selektor i njegova svojstva u CSS datoteku:
#main {
width: 770px;
height: 100%;
margin: 2px;
background-color: #000;
}
3. Upisati u zaglavlje (HEAD) HTML datoteke putanju do CSS datoteke:
<link href=”style.css” rel=”stylesheet” type=”text/css” />
Grupiranje selektora
Ako više selektora ima neke zajednička svojstva, onda ih možemo grupirati. Na taj način ne moramo istu stvar više puta pisati. Kasnije možemo za svaki posebno navesti svojstva po kojima se razlikuju. U donjem primjeru svi selektori imaju isti razmak između sadržaja i ruba elementa i margine. Sve ostale razlike mogu se posebno naknadno navesti u svakom selektoru posebno.
#container, #header, #main, #sidebar, #footer {
padding: 10px;
margin: 10px;
}
Uređivanje teksta
Kod uređivanja teksta možemo koristiti sljedeće naredbe:
color: boja slova;
font-size: veličina slova;
font-style: stil slova;
font-family: oblik slova;
Uređivanje elemenata
Elementi CSS-a su najčešće nevidljvi okviri (boxovi) u koje stavljamo pojedine dijelove stranice. To su zapravo ti naši selektori.
Nekad je zgodno prije samog početka izrade stranice, skicirati stranicu na papiru tako da otprilike vidimo kakav razmještaj želimo. Na slici ispod ovog odlomka nalazi se jedan primjer takve stranice.
Ispod se nalaze najčešće korišteni nazivi elemenata stranice:
Container – prikazan je svijetlo zelenom bojom i on prikazuje element u koji smještamo ostale bitne dijelove.
Header (zaglavlje) – prikazan je plavom bojom. Tu obično ide neki logo (slika ili flash).
Sidebar – može stajati bilo gdje (na ovoj slici je nalazi se lijevo) i obično sadrži linkove ili popis zadnjih ili načitanijih vijesti.
Main – to je obično glavni ili srednišnji dio (na ovoj slici nalazi se desno) gdje stavljamo tekstove i slike.
Footer (podnožje) – nalazi se u podnožju.
Ovo su samo neki elementi koje možemo koristiti.
Što se sve može definirati elementima?
width: širina;
height: visina;
background-color: boja pozadine;
background-image: pozadinska slika;
background-repeat: slika i dio slike koji se ponavlja ili ne ponavlja;
margin: debljina margine;
padding: udaljenost sadržaja od ruba elementa;
border: obrub;
HTML kod za gornji primjer:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Ovo je samo kostur stranice</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”header”>Zaglavlje</div>
<div id=”sidebar”>Lijevi dio </div>
<div id=”main”>Desni dio</div>
<div id=”footer”>Podnožje</div>
</div>
</body>
</html>
CSS za gornji primjer:
body {
color:white;
}
#container, #header, #main, #sidebar, #footer {
padding: 10px;
margin: 10px;
}
#container {
background-color: lightgreen;
width: 800px;
height: 710px;
margin: 10px auto;
}
#header {
background-color: blue;
width: 760px;
height: 200px;
}
#sidebar {
background-color: green;
float: left;
width: 30%;
height: 300px;
}
#main {
background-color: green;
float: left;
width: 60%;
height: 300px;
}
#footer {
background-color: red;
clear: both;
width:760px;
height: 100px;
}