Porodica fontova:
font-family property (osobina) definiše vrstu fonta kojim je text ispisan. Ako font ima više reči u imenu sa razmakom, onda se piše sa navodnicima "Courier New". Postoji 5 velikih font porodica. Vrednost (value) može da sadrži više fontova - uvek staviti glavni kao poslednju vrednost, iza "manjih" koji pripadaju istoj familiji (stavlja se više fontova kao mogući izbor browseru da prikaže drugi ako nema podršku za prvi, itd.):
- sans-serif (Verdana, Arial Black, Trebuchet MS, Arial, Geneva, Helvetica) Nemaju serife (kukice), dobri su za čitanje na PC monitoru. Sans-serif znači "without (bez) serifs".
- serif (Times, Times New Roman, Georgia) Imaju serife (kukice), liče na fontove u štampanim novinama.
- monospace (Courier, Courier New, Andale Mono) Širina svakog karaktera je jednaka. Uglavnom se koriste za prikazivanje softverskog koda.
- cursive (Comic Sans, Apple Chancery) Izgledaju kao da su pisani rukom. Ponekad se koriste za headinge (h1, h2, ...).
- fantasy (Last Ninja, Impact) Stilizovani dekorativni fontovi. Retko se koriste za ozbiljan Web dizajn jer nisu široko rasprostranjeni i dostupni.
body {
font-family: verdana, geneva, arial, sans-serif;
}
h2 {
font-family: "comic sans", "apple chancery", cursive;
}
Veličina texta:
font-size property (osobina) definiše veličinu fonta texta
- u pixelima (14px) Uvek se piše bez razmaka, broj pa odmah px. Pixeli određuju visinu, od najniže tačke slova do najviše. Izbegavati definisanje u pixelima.
- u procentima (150%) Procenat se odnosi na veličinu zadatu za parent element. Kao sto smo već rekli, najviši element u hijerarhiji (sto se CSS-a tiče) je <body>.
- razmerom (1.2em) Em (nema nikakve veze sa <em>) je takođe relativna veličina koja se tretira u odnosu na parent element. Ako je parent 10px, 1.2em će biti 10*1.2=12px. Još jednom, <body> je parent (roditelj) svih ostalih elemenata.
- ključnim rečima (keywords): xx-small, x-small, small, medium, large, x-large, xx-large. Najbolje su za <body>, preporučuje se small ili medium.
Najbolje je prvo definisati font-size za <body> (small ili medium), pa nakon toga u % ili em (isto rade, 170% je 1.7em) podešavati veličinu texta ostalih elemenata u odnosu na <body>. Tako ćete lako moći da povećate ili smanjite font texta u SVIM elementima proporcionalno, promenom samo jedne reči. Ako u sledećem primeru promenimo small u medium, h1 i h2 ne moramo ni da pipnemo, oni će se sami prilagoditi.
body {font-size: small;}
h1 {font-size: 150%;}
h2 {font-size: 1.2em;}
Još text osobina:
font-weight property definiše debljinu fonta texta (normal, bold, lighter, bolder - poslednje 2 se izbegavaju jer se uglavnom i ne vide). Može i vrednost između 100 i 900, ali izbegavajte taj metod.
font-style, naginje text nadesno (italic [BEZ S!], oblique).
text-decoration, dekoracija texta (none, underline, overline, line-through, blink). Može i više istovremeno npr. text-decoration: underline overline;. Imajte u vidu da se underline text često vezuje za link, pa koristite tu dekoraciju pažljivo. Izbegavajte blink.
line-height određuje visinu razmaka između redova texta (px ili % i em u odnosu na veličinu fonta). Taj prazan razmak se naziva "leading" u izdavaštvu. Ako se piše .5em ili 0.5em, isto je. Specifičan je jer može da ima vrednost SAMO BROJ (bez em ili %). Npr br. 1 znači da je visina 1 x njegov sopstveni font-size (a ne parent-ov). Takođe, može da ima vrednost normal, gde browser bira odgovarajuću vrednost koja zavisi od fonta.
letter-spacing određuje razmak između slova texta ovako (u px, može i negativna vrednost).
text-shadow dodaje senku ispod texta.
text-indent određuje uvučenost prve linije text bloka (u px, može i negativna vrednost).
color property je za boju fonta. Zapravo definiše foreground boju elementa, sto znači da utiče na boju texta i border-a (ako ga ima). Međutim, boja bordera može posebno da se menja sa border-color osobinom.
Boje:
U CSS-u boje možemo da definišemo na više načina
- imenom (postoji 17 imenovanih boja): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange (ona je poslednja dodata).
- relativnim procentom crvene, zelene i plave (red, green, blue = rgb) rgb(80%, 40%, 0%); ILI rgb(204, 102, 0); gde je vrednost 0 = 0%, a 255 = 100%.
- hex codes za crvenu, zelenu i plavu: #cc6600 (cc=red, 66=green, 00=blue). Vrednosti su od 0 do 255, ali u hexadecimalnom kodu, u kome su brojevi od 0-9 "normalni", a od 10 do 15 SLOVA. 10=A, 11=B, 12=C, 13=D, 14=E, 15=F. Ovako se računa: cc = prvi c je 12 i on se uvek množi sa 16. drugi c je samo svoja vrednost, dakle 12. Saberi ih. (12*16)+12 = 192+12 = 204.
Ovo je sve jedna ista boja:
body {background-color: rgb(80%, 40%, 0%);}
body {background-color: rgb(204, 102, 0);}
body {background-color: #cc6600;}
Napomena: #ccbb00 može da se piše skraćeno #cb0, ili #11eeaa skraćeno #1ea. Međutim, ako je hex kod kao #ccbb10, onda ne može da se skraćuje.