Div-harjoitus

Tervetuloa harjoitussivulleni! Tämä kappale on kuvan vieressä. Kuvalla on CSS:ssä float: left, joten teksti asettuu kuvan oikealle puolelle. Fontti on Georgia ja koko 18 pikseliä.

Toinen kappale jatkaa samassa osassa. Jos tekstiä on tarpeeksi, se kiertää kuvan ja jatkuu sen alle. Tässä on vähän lisää tekstiä, jotta näkee, miten kuvan ympärillä oleva teksti käyttäytyy. Verkkosivu koostuu usein monista pienistä osista, ja div-tagilla voidaan jakaa sivu selkeisiin lohkoihin, joita voi muotoilla erikseen.

Kolmas kappale on vielä lisätty. Harrastan kuntosalia, teatteria ja pyöräilyä, ja niistä kerron enemmän harrastussivulla.

Tässä osassa on Courier New -fontti, koko 14 pikseliä, vihreä tausta ja teksti on tasattu oikealle.

CSS:n avulla sivun ulkoasua voi muuttaa ilman, että HTML-koodia tarvitsee muuttaa. Riittää, että vaihtaa värin, fontin tai koon tyylitiedostossa.

Tässä kappaleessa CSS-tiedoston p-tyyli on kumottu inline-tyylillä (style-attribuutti): valkoinen tausta ja punainen teksti.

Tämä kappale käyttää edelleen CSS-tiedoston p-tyyliä.

Tämä kolmas kappale on myös muokattu inline-tyylillä: sininen tausta ja tummanharmaa teksti. Inline-tyyli on aina vahvempi kuin CSS-tiedoston tyyli.