Taso 3: Muodonmuutokset

Tekstin muotoilu ja taustavärin vaihtaminen CSS:lla

  1. Luo tyhjä tyylitiedosto, jolla on .css-pääte. Tallenna se samaan kansioon kuin index-html.
  2. Linkitä tyylitiedosto HTML-tiedostoon, esim. lisäämällä tämänkaltainen rimpsu HTML-tiedoston headiin: <link rel=”stylesheet” type=”text/css” href=”velhotyyli.css”>
  3. Muuta äsken luomasi dokumentin taustaväri.
  4. Vaihda jonkun elementin (otsikon tai kappaleen) väri.
  5. Siirrä jonkun toisen elementin asemointi keskelle.
  6. Muotoile linkki siten, että se näkyy ilman alleviivausta.
  7. Vaihda jonkun elementin fontti.

Bonus: Kokeile vaihtaa listassa näkyvät pallurat ontoiksi tai vaikkapa neliöiksi. Esimerkkejä täältä.

Lisävinkit

PSST… Jos keskitetyssä listassa pallukat eivät seuraa mukana, kokeile lisätä CSS:ssä ul:lle muotoilu ”list-style-position: inside”.

>  Level up: 4!