Cascading Style Sheets (CSS) -perusteet

• Mallivideot
• Navigointi
• Linkkien muotoilu
• Kuvat
• Taulukot
• address
• Testaus

Näissä demoissa opetellaan perusteet WWW-sivun ulkoasun ehdottamisesta CSS-kielen avulla. Jatketaan edelliskerran tehtävistä ja tehdään Nanonanon kotisivuille siisti ulkoasu. Jos edelliset demot jäivät kesken, niin tee ne ensin valmiiksi. Voit jatkaa näitä demoja myös mallivastauksesta.

CSS-perusteet -mallivideo

1. Aloita html-kitillä uusi dokumentti valinnalla File | New | Blank Style Sheet. Kopioi dokumentin pohjaksi css-pohja. Tallenna dokumentti W:\www\-hakemistoon demo2.css-nimellä.
2. Muuta jokainen edellisessä demossa tekemäsi XHTML-dokumentti käyttämään demo2.css-tiedostoa. Vaihda tunnus-sanan tilalle käyttäjätunnuksesi. Käytä absoluuttista linkkiä palvelimen juuresta lukien:

   <link href="http://www.it.jyu.fi/users/tunnus/www/demo2.css"
    rel="stylesheet" type="text/css" title="Tyylipohja" />

3. Kokeile miten www-sivujesi ulkoasu muuttui.
4. CSS-kielellä voidaan määritellä oletusulkoasu halutuille xhtml-elementeille. Voidaan luoda myös uusia tyylimäärityksiä joita voi ottaa xhtml-dokumentissa käyttöön halutessaan. Esimerkkejä CSS-määrityksistä löytyy kurssimonisteesta ja luentosivulta.
5. Määritellään ensimmäiseksi dokumentissa käytettävä kirjasin. Lisää body-elementille kirjasinmääritys seuraavasti:

   body {
     font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
   }

   Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle joten on pakko antaa useita vaihtoehtoja. sans-serif tarkoittaa päätteetöntä kirjasinperhettä josta poimitaan käyttöön jokin kirjasin jos mitään muuta kirjasinta ei ole käytettävissä.

6. Tallenna CSS-tiedosto ja kokeile selaimella WWW-dokumenttiesi ulkoasua. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
7. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt:

   margin-left: 5%;
   margin-right: 5%;
   margin-top: 1%;
   margin-bottom: 1%;

   Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 5% sivun koosta. Ylä- ja alamarginaaliksi määritellään 1% sivun koosta.

   Tallenna ja testaa sivun ulkonäön muuttuminen selaimella.

   Lisää body-elementtiin myös rivivälistysmääritys:

   line-height: 150%

   Isompi riviväli parantaa luettavuutta.

8. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille määritykset seuraavaan tapaan:

   h1 {
   margin-left: 1em;
   margin-right: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   }

   em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

   Tallenna ja testaa selaimella. Muuta marginaalimääritykset mieleisiksesi.

Navigointi

Navigointi -mallivideo

1. Määritellään seuraavaksi sivustolla käytetylle navigointipalkille erottuva ulkoasu. Lisätään .navbar-tyyliin reunus seuraavalla tavalla:

   border-style: solid;
   border-width: thin;
   border-color: #000000;

   Kokeile sivujen toimintaa selaimella.

   Pisteellä (.) alkavat tyylit ovat määrityksiä joita voidaan käyttää minkä elementin yhteydessä tahansa kertomalla class-attribuutilla käytetyn tyylin nimi.

2. Navigointipalkille voidaan määritellä myös taustaväri. Aina taustaväriä määriteltäessä pitää muistaa määritellä myös tekstin väri:

    background: #FFC653 none;
    color: #666666;
   

   Värien määritteleminen RGB-koodeina on selitetty esim. WDG:n sivulla. HTML-kitissä on myös helppo värityökalu Actions|Tools|Colors jota voi käyttää apunaan.

3. Navigointipalkille pitää määrittää myös normaalista poikkeava leveys jotta se sopii siististi sivun jompaan kumpaan laitaan:

   width: 18%;

4. Navigointipalkin siirtäminen jompaan kumpaan laitaan onnistuu helposti float-ominaisuudella, jolla voi kelluttaa elementin oikeaan (right) tai vasempaan (left) laitaan:

   float: right;

5. 
   Määrittele oma ulkoasu myös sivun yläosassa olevalle leivänmurunavigoinnille, joka käyttää .navbartop-css-tyyliä. Aseta taustaväriksi #D69C52.
6. Määritellään lista näyttämään leivänmurunavigoinnin sisällä muulta kuin perinteiseltä listalta. Lisää seuraava uusi tyylimäärittely:

   .navbartop ul li {
   	display: inline;
   }

   Ylläoleva määrittely on voimassa .navbartop-tyylin sisällä olevan ul-listan li-elementteihin eli kyseessä on ns. asiayhteyden mukaan määräytyvä tyyli.

   display-ominaisuudella muutetaan lista ulkoasultaan tavalliseksi tekstitason (inline) elementiksi.

   Tallenna ja kokeile.

7. Siistitään edelleen navbartop:ssa olevan linkkilistan ulkoasua seuraavilla lisäyksillä edellä määriteltyyn tyyliin (.navbartop ul li):

   border-left: 1px solid black; /* lisätään linkkien väliin pieni pystysuora palkki */
   margin-left: 0.5em;
   padding-left: 0.5em;

8. Lisää hieman välistystä (padding) .navbartop-tyylin sisällä olevaan ul:än ylä- ja alapuolelle. Poista samalla marginaali ja padding kokonaan vasemmasta laidasta niin navigointi siirtyy siististi aivan vasempaan reunaan.
9. 
   Vielä pieneksi kauneusvirheeksi jää vasemmanpuolimmaisen linkin viereen tuleva turha palkki. Se voidaan piilottaa seuraavalla määrityksellä:

   .navbartop ul li:first-child {
           border-left: 0;
           margin-left: 0;
           padding-left: 0;
   }

   first-child-määritys ei välttämättä toimi jokaisessa selaimessa eikä esim. HTML-kitin preview-tilassa. Testaa sivujasi Mozillalla, Operalla sekä Internet Explorerilla.

10. Yritä keksiä vaihtoehtoinen tapa tehdä edellä toteutettu first-child-määritys jokaisella selaimella toimivaksi.
11. Siisti .navbar-tyylin sisällä olevaa linkkilistaa. Siirrä lista aivan laatikon vasempaan reunaan.
12. Validoi CSS-tiedostosi HTML-kitin Actions barin Online-välilehdeltä löytyvällä W3C CSS Validatorilla. Korjaa mahdolliset virheet ja varoitukset.

Linkkien muotoilu

Linkit -mallivideo

1. WWW-sivun linkeille on mahdollista määrittää ns. pseudoluokkia joiden ominaisuudet tulevat voimaan riippuen siitä onko linkki aktiivinen, onko hiiri linkin päällä tai onko linkin viittaamassa osoitteessa jo käyty.
   • a:link määrittää linkeille yhteiset ominaisuudet
   • a:visited määrittää käytyjen linkkien ulkoasun
   • a:hover määrittää linkin ulkoasun hiiren ollessa linkin päällä
   • a:active määrittää aktiivisen linkin ulkoasun

   Määritä linkeille seuraavat ominaisuudet:

   • Tavallisen linkin väriksi sininen.
   • Käydyn linkin väriksi purppura.
   • hover-efektinä linkin taustaväriksi voisi muuttua #D69C52 ja tekstin väri muuttua valkoiseksi.
2. Navigointipalkkien linkkien väritys ja hover-efekti kannattaa määrätä hieman leipätekstistä eroaviksi. Poista navigointipalkkien sisällä olevista linkeistä alleviivaus ja muuta värit sopivammiksi.

   .navbartop a:link, .navbar a:link {
   	text-decoration: none; /* poistaa alleviivauksen */
   }

   Jos sama tyylimääritys sopii useampaan paikkaan niin voidaan sama määritys tehdä helposti vaikka useammalle elementille jos luettelee elementit pilkulla eroteltuina. Sama pätee myös asiayhteyden mukaan määräytyville tyyleille. Ylläoleva esimerkki tarkoittaa että .navbartop-tyylin sisällä olevien linkkien ja .navbar-tyylin sisällä olevien linkkien ulkoasua muutetaan.

Kuvat

Kuvat & taulukot -mallivideo

Muotoillaan myös ylänavigoinnissa oleva nanonanokuvalinkki järkevän näköiseksi.

• Kirjoita asiayhteydestä riippuva tyyli, joka poistaa reunukset ylänavigoinnin sisällä olevilta kuvilta.
• Lisää samaan tyyliin määritys, joka keskittää sisällön pystysuunnassa.

Tehdään myös leipätekstissä oleville kuville pieniä muutoksia.

• Avaa nanonanon IT ja tietoliikenne -artikkeli. Muuta sivulla olevan kuvan sisältävä p-elementti käyttämään kuva-tyyliä:

  <p class="kuva">

• Lisää css-tiedostoon .kuva-tyyli jossa leijutat (float) kuvan jompaan kumpaan laitaan. Määrittele kuvan ympärille siistit marginaalit.
• Kokeile selaimella miten teksti kiertää kuvaa

Taulukot

Muotoile Nanonanon opiskelu-sivulla oleva taulukko siistiksi:

• Lisää koko taulukon ympärille raja
• Lisää jokaisen solun ympärille raja
• Muotoile otsikkosolut (th) selkeästi erottumaan varsinaisista soluista (td)
• Keskitä otsikkosolujen sisältö
• Tasaa solujen sisältö solun vasempaan reunaan
• Muotoile myös taulukon otsikko caption
• Määritä solujen väliin neljän pikselin alue

address

1. Määritä siisti ulkoasu etusivun alaosassa olevalle address-elementille. Sijoita elementin sisältö oikeaan laitaan ja pienennä kirjasinkokoa aavistuksen verran.

Testaus

• Validoi CSS-tiedostosi
• Testaa että kaikki nanonanon sivut näyttävät järkeviltä Mozillalla, Operalla ja Internet Explorerilla. Ei tarvitse hätääntyä jos sivut eivät näytä täysin samanlaisilta jokaisella selaimella. Täysin samanlaiseen ulkoasuun on turha edes pyrkiä koska selaimia ja käyttöympäristöjä on liian monenlaisia. Oleellisinta on että sivusto on jokaisella selaimella järkevästi luettavissa.