Tehtävät

Tehtävä 1: div-elementti

div-elementillä voidaan merkata nettisivusta tiettyjä osioita.

Kokeile: Ympäröi esimerkiksi joku osa sivuistasi

<div> … </div> -elementeillä!

Esimerkiksi:

<div>

<p>Tähän tulee jotain tekstiä</p>

</div>

Sen ei pitäisi näkyä vielä mitenkään...

Tehtävä 2: class-määrite

Lisätään lisättyyn div-elementtiin class-määrite:

<div class=”testi”>

<p>Tähän tulee jotain tekstiä</p>

</div>

Lisää nyt CSS-tiedostoosi seuraava:

div.testi {

background: red;

}

Mitä huomaat?

Tehtävä 3: class-määrite myös muihin

Kokeile lisätä class-määritettä myös esimerkiksi sivusi p-elementteihin:

<p class=”varikasta”>Tähän tulee jotain tekstiä</p>

Ja lisää CSS-tiedostoosi seuraava rivi:

p.varikasta {

color: cyan;

border: 1px solid black;

}

Tehtävä 4: Yhteenveto

Kokeile nyt tehdä ulkoasultaan samannäköiset nettisivut kuin mallisivut olivat! Huom. katso mallia sivujen lähdekoodista ja sivujen tyyli.css:stä!