Ensimmäinen CSS: sivu saa värit · Koodaa Martinin kanssa

Tutustu CSS-kieleen ja katso verkkosivusi lakkaavan näyttämästä vuodelta 1995.

Näytän sinulle: mitä CSS on

HTML on sivun luuranko. CSS on sen vaatteet: värit, fontit, koot, välit. Se kirjoitetaan erilliseen tiedostoon ja näyttää tältä:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Lue se ääneen näin: “Jokainen h1-otsikko, väritä se tummansiniseksi. Jokainen p-kappale, tee siitä 18 pikseliä ja tummanharmaa.”

Jokaisella säännöllä on kolme osaa:

valitsin (h1) – mihin sääntö koskee,
ominaisuus (color) – mitä muutamme,
arvo (darkblue) – mihin muutamme sen.

Kaksoispiste erottaa ominaisuuden ja arvon, ja jokainen rivi päättyy puolipisteeseen. Varo niitä puolipisteitä – unohtunut on maailman yleisin CSS-virhe.

Yhdistäminen: kerro sivullesi CSS:stäsi

my-website-kansiosi sisällä luo uusi tiedosto nimeltä style.css.
Lisää tämä rivi jokaisen HTML-sivusi <head>:iin:
```
<link rel="stylesheet" href="style.css">
```
Tämä sanoo: “Tämän sivun ulkoasu löytyy tiedostosta style.css.”
Testaa että se toimii – laita style.css:ään jotain mahdotonta ohi mennä:
```
body {
  background-color: yellow;
}
```
Tallenna, päivitä sivu. Onko kaikki keltaista? Toimii! (Voit poistaa keltaisen nyt.)

Värit CSS:ssä

Voit kirjoittaa värit englanninkielisin sanoin (red, darkblue, lightgray, tomato, gold…) tai tarkemmin koodina ristikkomerkillä: #1d4ed8 on sininen, #16a34a on vihreä. Sekoita minkä tahansa värikoodin sivulla htmlcolorcodes.com.

Nyt sinun vuorosi 💪

Pue verkkosivusi ensimmäisiin väreihin. Aseta style.css:ssä:

koko sivun taustaväri (body),
otsikoidesi väri (h1, h2),
kappaleidesi koko ja väri (p).

Ratkaisut – voit tietysti säätää värejä:

🏫 Koulun sivu – ratkaisu

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Sininen sopii koulun sivulle hyvin – se tuntuu luotettavalta (siksi pankitkin käyttävät sitä!).

🙋 Henkilökohtainen sivu – ratkaisu

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Henkilökohtainen sivu voi olla rohkeampi – lämmin oranssi sanoo “tämä paikka on elävä”.

🌍 Matkapäiväkirja – ratkaisu

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Vihreä kuin metsät ja niityt – täydellinen matkapäiväkirjalle.

⚽ Seuran sivu – ratkaisu

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Paras valinta on seuran värit – pelaatteko punaisessa? Sitten punainen se on!

⚠️

Luettavuussääntö: tumma teksti vaalealla taustalla (tai toisin päin). Vaaleankeltainen valkoisella on lukukelvoton. Kun et ole varma, kysy joltakulta: “Luetko tämän mukavasti?”

✅

Tarkista itse: Verkkosivullasi on omat värit – ja koska CSS asuu yhdessä tiedostossa joka on linkitetty jokaiseen sivuun, kaikki sivusi värittyivät kerralla. Aika fiksua, eikö?

Mitä opit tästä oppitunnista

CSS = ulkoasu. Se kirjoitetaan style.css-tiedostoon, yhdistetään <link>-tagilla <head>:ssä.
Sääntö: valitsin { ominaisuus: arvo; } – älä unohda puolipisteitä.
Yksi CSS-tiedosto pukee koko verkkosivusi kerralla.