CSS terminologija:
CSS: Cascading Style Sheets služe za PREZENTACIJU i STIL web strane.
RULE (pravilo) se sastoji od:
selector {
property: value;
}
Selector: HTML element (p, h1, ul, ...)
Property (osobina koju želimo da menjamo): background-color, border, color (za boju fonta. da da, NIJE "font-color" ili "text-color"), font-family, border-bottom, text-decoration, ...
Value (vrednost te osobine): red, 1px solid gray, sans-serif, underline, ...
Osnove:
Da bismo promenili boju pozadine svih elemenata <p> u crveno, napisaćemo:
p {
background-color: red;
}
Napomena: selektor p uticaće na SVAKI paragraf na strani! Ponavljam, selektor utiče na SVAKI element tog tipa na strani (naravno da je moguće menjati samo jedan <p> ili samo jedan <h2>, ali o tome kasnije).
CSS kao i HTML, ignoriše razmake u kodu, tako da može da se piše i p {background-color: red;}, ali je bolje kao gore zbog preglednosti (može da postoji gomila osobina jednog elementa, tako da bi bilo nepregledno da sve to stoji u jednom redu).
Može da se piše i za više elemenata istovremeno (više selektora) ako je stil za sve isti:
h1, h2 {
font-family: sans-serif;
color: gray;
}
Može postojati koliko god hoćete pravila (RULES) za jedan element. Svako novo pravilo dodaje informaciju stila na pravilo pre (iznad) njega. Npr. ispod gornjeg pravila koje utiče i na <h1> i na <h2>, možemo da dodamo pravilo koje utice SAMO na <h1> elemente.
h1, h2 {
font-family: sans-serif;
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
Gornje pravilo će se i dalje primenjivati na <h1> OSIM ako nije u direktnom sukobu sa donjim, u tom slučaju donje ima prednost (naravno, odnosi se samo na <h1>)
Napomena: najviši red elementa u HTML-u na koji možemo da primenjujemo stil je <body> (što je i logično, s obzirom da je u njemu sve ono što se VIDI na stranici).
Za komentare ili napomene u okviru CSS koda koristite /* komentar */. Browser ignoriše sve što je napisano između.
<link /> povezuje:
<link /> element u HTML-u vodi ka eksternom CSS fajlu. Uvek stoji u <head>-u, iza <title>-a. Samozatvarajući (empty) element.
<link type="text/css" rel="stylesheet" href="URL/NAZIV.css" />
type atribut (tip stila) uvek isti, za sada ne postoji druga vrednost za tip stila osim "text/css".
rel atribut, relationship (odnos) između HTML fajla i onoga ka čemu se linkuje. Linkujemo ga ka Style Sheet-u, pa je vrednost "stylesheet".
href atribut, hypertext reference ka lokaciji Style Sheet-a. Može da bude relativni link sa kompa ili apsolutni link sa neta. U slučaju da je relativni, ne zaboravite na (dot dot) iz Poglavlja 2 ako treba da se "krećete" kroz foldere do CSS fajla.
Nasleđivanje:
Elementi nasleđuju neke osobine (npr. font-family) od svojih roditelja (elemenata u kojima se nalaze). Dakle, ako promenimo font <body>-u, promenićemo font SVIM elementima na strani (koji sadrže text, <img /> se sigurno neće promeniti). Da biste "nadjačali" pravilo, npr. <body> ima jedan font a hoćete da <p> ima drugi, samo stavite novo pravilo ispod i ono će imati prioritet (za taj element).
body {
font-family: sans-serif;
}
p {
font-family: serif;
}
class & id:
class atribut. U Poglavlju 4 smo govorili o id atributu. Podsetite se, jer je class atribut njegov pandan. Element se dodeljuje određenoj klasi, ali za razliku od id-a, može da postoji VIŠE klasa sa istom vrednošću na stranici. Selektor za class je .VREDNOST (tačka pa ime koje smo dali klasi, bez razmaka). Elementi mogu da budu pripadnici VIŠE RAZLIČITIH klasa (redosled imena u HTML-u je nebitan):
<p class="treća prva druga">bla bla</p>
id atribut selektor je #VREDNOST (samo da podsetim). Element može da ima SAMO jedan id. Element sa id može istovremeno da bude dodeljen klasama.
<h2 id="pahulja" class="prva treća">bla bla</h2>
Klase i id koristimo kako bi CSS stilizovao elemente kojima su dodeljeni. Redosled imena class atributa u HTML-u je nebitan (ponavljam), važan je samo red u CSS-u. Prioritet se određuje tako što se gleda POSLEDNJA klasa ispisana u CSS fajlu (ona je najbitnija). Ako postoji konflikt u pravilima, poslednje ispisano od konfliktnih pravila u CSS fajlu će biti primenjeno.
Na primer, ako hoćemo da stilizujemo <blockquote> i <p> sa klasom "proba" u CSS-u to izgleda ovako:
blockquote.proba {
color: green;
}
p.proba {
color: maroon;
}
Ako hoćemo da SVI elementi te klase imaju određen stil, onda selektor može da bude samo .proba:
.proba {
color: gray;
}
Overa:
Ako postoje greške u CSS fajlu, SVA pravila (rules) ispod greške se ignorišu. Zvanični sajt za proveravanje pravilnosti CSS koda je W3C CSS Validation Service.