U ovom poglavlju naučićemo kako možemo vršiti formatiranje i stilizovanje Web stranica korišćenjem CSS-a – Cascading Style Sheets. Svo formatiranje koje smo do sad uradili izvršili smo pomoću HTML koda. HTML ipak predstavlja markap programski jezik, što drugim rečima znači da je njegova glavna svrha da vašim dokumentima da strukturu a ne stil. Kao što ste videli u prethodnim lekcijama, korišćenjem HTML Styles panela ne vrši se automatsko ažuriranje stila nekog teksta, već to moramo uvek raditi ručno. CSS sa druge strane, sve vaše stilove čuva u jednoj datoteci i sve izmene koje izvršite nad nekim stilom, automatski se primenjuju na tekst koji ga sadrži. Ipak, mnogi Web dizajneri ne koriste CSS stilove u svojim Web stranicama. Jedan od uzroka jeste njihova nespremnost da migriraju na novi programski kod, dok je drugi, mnogo važniji, taj da neki od starijih Web brauzera ne podržavaju, ili vrlo malo podržavaju CSS stilove. Uprkos svemu, u ovoj lekciji ćemo naučiti kako možemo kreirati CSS stil i primeniti ga na Body tag. Da bismo počeli, prikažimo CSS Styles panel, koji možemo otvoriti iz menija Window. U ovom panela imamo dva okvira. Okvir sa desne strane sadrži stil koji trenutno modifikujemo, dok levi okvir prikazuje stilove koje možemo primeniti na neki deo dokumenta. Da bismo kreirali novi CSS stil, kliknimo na dugme sa znakom plus, čime se otvara New CSS Style okvir za dijalog. U ovom okviru možemo izabrati na koji deo dokumenta želimo da primenimo određeni stil, i u našem slučaju izabraćemo opciju Redefine HTML Tag, pošto želimo da izvršimo izmene na Body tagu. Zatim, iz liste Tag izaberimo tag Body. Na kraju, moramo odrediti gde želimo da stavimo naš novi CSS stil. Ako ga postavljamo u zasebnu datoteku, time ujedno osiguravamo da ćemo tu datoteku moći koristiti iz bilo kog drugog dokumenta. Nasuprot tome, drugra opcija omogućava da isti CSS stil snimimo unutar postojećeg dokumenta. Pošto smo izabrali prvu opciju, Dreamweaver od nas traži da unesemo naziv datoteke i mesto gde želimo tu datoteku da snimimo. Nazovimo je Rocket_Club, i kliknimo na dugme Save. Sad dobijamo CSS Style Definition okvir za dijalog. U ovom slučaju izabraćemo novu boju pozadine, pa iz tog razloga, pređimo na Background kategoriju, zatim iz Color Picker okvira opcije Background Color izaberimo crvenkastu boju našeg logoa. Ako kliknemo na dugme Apply možemo videti kakav će efekat postavljanje nove boje imati na čitav dokument. Kliknimo na dugme OK da bismo snimili CSS stil, a zatim pređimo u drugi dokument da bismo videli kakav efekat možemo postići ako iskoristimo novokreirani CSS stil i na ovom dokumentu. Ponovo prikažimo CSS Styles panel, zatim kliknimo na dugme Attach Style Sheet. U novom okviru za dijalog kliknimo na dugme Browse zatim selektujmo naš novi CSS dokument, Rocket Club. Kliknimo na OK da bismo ubacili datoteku, i još jednom da bismo zatvorili prethodni okvir. Kao što sada možemo videti, boja pozadine je promenjena, kao što je to definisani CSS stilom. Da bismo videli pravu snagu CSS stilova, vratimo se na prethodni dokument, zatim u CSS Styles panelu selektujmo naš stil a zatim kliknimo na dugme Edit Style Sheet. Ako sad izmenimo boju pozadine u svetlo žutu, vidimo da boja pozadine nije promenjena za trenutno prikazani dokument, već i za dokument u kome smo ručno ubacili CSS stil.