Style sheets(kaskadni stilovi) su veoma snažan alat svakog web dizajnera. Oni vam omogućavaju da vaše stranice budu potpuno konzistentne, daju vam mnogo više kontrole u vezi uređenja stranica. Kreirani su 1997, Cascading Style Sheets (CSS) se sada mnogo koriste i podržani su od većine browser-a (od verzije 4.0) i od većine dizajnera. Ukoliko ste vični MS Word-u, stilovi imaju sličan način korišćenja i primenu.
Informacije o stilovima se smeštaju na tri moguća mesta: u <HEAD> tag, u spoljni fajl i ubačeni stil u tagovima. Za sada ćemo govoriti samo o prvom slučaju. Pravila:
- Informacije o stilu moraju biti ugnježdene u tag <STYLE> </STYLE>. Na ovaj način web čitači prepoznaju da je reč o informacijama za stilove.
- Sam tag obavezno uključuje atribut TYPE koji indicira koji tip stilova koristite (najčešće je to CSS, ali može biti i XSL, JSS...).
- Smestite sve stil tagove u komentar tagove. Ovo zbog starijih browser-a koji ne podržavaju CSS.
Jedan stil je određen sa dve stvari: selektorem i deklaracijom.
- Selektor - selektor određuje na koji HTML tag se zadati stil odnosi
- Deklaracija - osobine stila koje će se primeniti na izabrani tip selektora
Evo i kompletne sintakse:
selektor {osobina : vrednost ;}
Na primer ukoliko želite da sav bold tekst bude crvene boje, napisaćete u deklaraciji:
b {color: red;}
Jedna od prednosti koja CSS čini jednostavniom za korišćenje, je i ta da možete grupisati komponente kojima želite da dodelite isti stil. Na primer, ako želite da naslovi H1, H2 i bold-ovan tekst budu crveni pisali biste:
b {color: red;}
h1 {color: red;}
h2 {color: red;}
Ali njihovim grupisanjem, sve njih možete postaviti u istu liniju:
b, h1, h2 {color: red;}
Analogno ovome, i više definicija stilova možete grupisati (odvojite ih tačka-zarezom). Na primer, svi naslovi H3 želimo da budu plave boje i Arial fonta:
h3 {
font-family: Arial;
color: blue;
}
Kao što vidite različite deklaracije stila se pišu u zasebnim linijama, ovo je konvencija koja nije obavezna (radi se o plain-text-u).
Osobina stila font ima sledeće stilove:
- font-family - specifikacija fonta, moguće je navesti više fontova odjednom
- font-size - specifikacija veličine fonta, može biti izražena relativno (npr. +1), apsolutno (npr.4 - u pikselima ili pointima) ili procentualno
- font-style - način prikaza teksta: italic, oblique ili normal
- font-variant - specifikacija prikaza u malim slovima (small caps) ili normal
- font-weight - podešavanje koliko će tekst biti taman ili svetao.
I na kraju još jedan vrlo korišćen stil je text-decoration, uz pomoć koga možete npr. ukloniti podvlačenje linkova, postaviti liniju preko teksta itd. Primer, uklanjanje podvučenih linija ispod linkova:
a { text-decoration: none;}