Tyylit (Cascading Style Sheets, CSS) ovat tapa määritellä html-dokumentin eri osien (kappale, tausta, listat, taulukot jne.) ominaisuuksia, kuten fonttikokoa, väriä, kehyksiä yms. Tyylit voidaan määritellä erikseen eri osille dokumenttia, koko dokumentille taikka omaksi tiedostokseen. Viimeinen tapa näistä on järkevin silloin, kun halutaan yhtenevät määritykset jokaiselle sivulle. Tällöin ei tarvitse kuin liittää tyylitiedosto sivustoon.
Tyylitiedoston luominen aloitetaan Tools - CSS-editor -valinnalla:
Tästä saadaan valikko, joka seuraavissa kuvissa on jaettu kahteen osaan (ikkuna on varsin leveä eikä sen järkevä kaventaminen ole oikein mahdollista). Vasen laita näyttää tältä:
Link elt. -valinnalla päästään luomaan uusi tyylitiedosto, jota voi sitten linkittää eri sivuihin:
URL-kohtaan kirjoitetaan tyylitiedoston nimi. Tyypillisesti nämä ovat jotakin .css-päätteellä varustettuja tiedostoja. Create Stylesheet-valinnalla sitten luodaan tyylitiedosto ja samalla se linkitetään aktiivisena olevaan tiedostoon. Siitä ilmestyy koodiin tällainen sisältö (katso source):
<link rel="stylesheet" href="tyyli.css" type="text/css">
Huom! Samalla
valinnalla saamme myös linkitettyä uuteen sivuun aiemmin
luodun tyylitiedoston. Siinä tapauksessa valitaan Choose file -valinnalla olemassaolevan tyylitiedosto ja painetaan Close-nappulaa:
Huom! Usein töiden helpottamiseksi on järkevää luoda pohjatiedosto (template), johon muut sivut perustuvat. Tähän pohjaan sitten voi liittää kaikki haluamansa asiat, kuten juuri tyylitiedostot. Näin ei tarvitse tätä operaatiota tehdä erikseen kaikille uusille sivuille!
Nyt pääsemme luomaan uusia tyylimäärityksiä. Rule-nappulalla päästään eteenpäin (katso vasemman laidan kuva yllä, näkyy tässä kohdin vielä harmaana):
Oletusarvoisesti luodaan nimetty tyyli, jota voi sitten käyttää eri elementtien kanssa. Tyylin nimi kirjoitetaan riville ja painetaan Create Style rule -painiketta. Tätä pitää muistaa ehdottomasti painaa, muuten ei pääse luomaan tyylille ominaisuuksia!
Alimmaisella valinnalla voidaan määritellä ominaisuuksia olemassaoleville html-elementeille. Jos siihen kirjoittaa esimerkiksi h1, määritellään ensimmäisen tason otsikon ominaisuudet. Jos halutaan yhteisiä ominaisuuksia useammille elementeille (esimerkiksi h1, h2, h3), luettele kaikki elementit pilkulla erotettuna riville.
Esimerkissä (ks. seuraava kuva) on määritelty joukko erilaisia tyylejä:
Pisteellä alkavat ovat yleisiä tyylejä. Esimerkiksi .huom-tyyli on tässä dokumentissa käytetty keltapohjainen laatikko. Tämän tyyli saa liitettyä kirjoitettuun kappaleeseen kirjoittamalla kappaleen ja sen jälkeen valitsee tyylin kappaletyyliä osoittavan laatikon alta olevasta luettelosta:
Sen jälkeen vain siinä kappaleessa käytetään tätä tyyliä. Aiemmassa esimerkissä on erikseen määritelty kappalelle (p), otsikkotasolle 1 (h1) ja luetteloalkiolle (li) omat tyylimäärittelynsä. Lisäksi otsikoilla h2, h3, sekä h4 on yhteinen tyylimäärittely. Näin voi esimerkiksi vaihtaa fontin yhtenäiseksi useaan eri elementtiin.
Huom! Jotkut ohjelmat suosivat fonttien koon ym. muutoksessa FONT-tagia. Tyylien käyttö on ehdottomasti paljon parempi tapa muutella fonttien ulkoasua. Font-määrityksellä homma pitää joka kerta tehdä erikseen jokaiseen paikkaan ja tämä taas tekee dokumentin muuttamisen työlääksi.