[Sisällysluettelo]

Expression Web - CSS ulkoiseen tyylitiedostoon

Microsoft Expression Webissä on hieman omituinen tapa liittää oletuksena CSS:n samaan koodiin HTML:n kanssa, jolloin mielestäni CSS:n hyötyjä menetetään. CSS kannattaa kuitenkin sijoittaa omaan tyylitiedostoonsa HTML:n ulkopuolelle, jotta samaa tyylitiedostoa olisi helppo käyttää muissakin sivuissa, ja jos halutaan muuttaa tyylejä, ei tarvitse muuttaa tyyliä jokaisessa HTML-koodissa erikseen.

Tässä ohjeessa näytetään kuinka Expression Webin luomat tyylit sijoitetaan ulkoiseen tiedostoon.

1. Tee ensiksi sivusi ja asettelusi tyylein joita haluat käyttää, Expression Web lisää ne samaan koodiin HTML:n kanssa.
   
2. Kun tyylisi on kuten haluat (voit toki muuttaa niitä jälkeenpäin), valitse File / New / CSS
   
3. Tallenna tyhjä CSS-tyylitiedostosi, eli valitse File / Save As... ja tallenna tyylitiedosto sopivalla nimellä (tässä esimerkissä tyylit.css) sopivaan paikkaan.
   
4. Haluamme nyt liittää äsken tallennetun tyylitiedoston HTML-sivuumme, joten valitse aktiiviseksi välilehti, jolla HTML-koodisi on, ja valitse Manage styles -tehtäväruudusta Attach style sheet -linkki.
   
5. Kerro URL: -kenttään tyylitiedostosi (voit Browse -painikkeella etsiä sen) ja varmista että asetukset ovat Attach to: Current page ja Attach as: Link, ja valitse lopuksi OK -painike.
   
6. Manage styles -tehtäväruudussa, Current page -kohdan alta, valitse kaikki tyylit ja vedä ja pudota ne liittämäsi tyylitiedoston päällä.
   
7. Nyt CSS-koodi on siirtynyt HTML-koodista pois ulkoiseen tyylitiedostoon. Muista tallentaa sekä HTML- että CSS -koodisi!