29. lokakuuta 2025

Tyylittelyä

Keskitytään vaihtelun vuoksi hetkeksi nettisivuihin ja niiden tyyleihin:
  1. Oman peda.net -sivusi tyyliin
  2. Oman pelisi tyyleihin


CSS-tyylit


🖥️ Mikä on CSS?

CSS tulee sanoista Cascading Style Sheets.
Se tarkoittaa tyylisivuja, joilla kerrotaan, miltä verkkosivu näyttää.

Jos HTML kertoo, mitä sivulla on (esim. tekstiä, kuvia, linkkejä),
niin CSS kertoo, miltä se näyttää (esim. värit, fontit, taustat, asettelu).
(Lisäksi JavaScript luo sivullesi toiminnallisuutta.)

🎨 Esimerkki ilman CSS:ää

HTML-sivu ilman CSS:ää näyttää aika tylsältä:

 
<h1>Tervetuloa sivulleni</h1> <p>Tämä on ensimmäinen kotisivuni.</p>

Selaimessa teksti näkyy mustana valkoisella taustalla, ilman värejä tai muotoiluja.

🌈 Sama sivu CSS:llä

Nyt lisätään CSS-tyyli, joka tekee sivusta vähän nätimmän:

 
<h1>Tervetuloa sivulleni</h1> <p>Tämä on ensimmäinen kotisivuni.</p> <style> body { background-color: lightblue; /* taustan väri */ } h1 { color: darkblue; /* otsikon väri */ text-align: center; /* keskitys */ } p { font-size: 18px; /* tekstin koko */ color: black; /* tekstin väri */ } </style>

Nyt sivulla on sininen tausta, otsikko keskellä ja isompi teksti.

🔍 CSS:n rakenne

CSS koostuu säännöistä, joissa on kolme osaa:

 
p { color: red; font-size: 20px; }

  • p = valitsin, kertoo mihin HTML-elementtiin tyyli vaikuttaa (tässä kaikki kappaleet <p>).

  • color: red; = ominaisuus ja sen arvo (tässä tekstin väri on punainen).

  • Jokainen sääntö päättyy puolipisteeseen (;).

📚 Miten CSS voidaan lisätä sivulle?

CSS voidaan laittaa kolmella tavalla:

  1. Samaan tiedostoon HTML:n kanssa (käyttämällä <style>-osaa kuten yllä).

  2. Erilliseen tiedostoon (esim. style.css) ja linkitetään näin:

     
    <link rel="stylesheet" href="style.css">

  3. Suoraan yhteen elementtiin (ei suositeltavaa, mutta mahdollista):

     
    <p style="color: red;">Punainen teksti</p>

💡 Miksi CSS on tärkeä?

  • Se tekee verkkosivuista kauniimpia ja selkeämpiä.

  • Se auttaa erottamaan sisällön (HTML) ja ulkoasun (CSS).

  • Samaa tyyliä voi käyttää monella sivulla, jolloin sivusto pysyy yhtenäisenä.

    💡 Kolme verkkosivun kieltä lyhyesti:

    • HTML = sisältö (teksti, kuvat, linkit)

    • CSS = ulkoasu (värit, fontit, asettelu)
      JavaScript = toiminta (napit, animaatiot, vuorovaikutus)




Ensimmäinen harjoituskokonaisuus


Tutustu CSS-tyyleihin omalla Peda.net-sivullasi:


  • Kokeile valmiit toiminnot Muokkaa tyylistä
  • Kokeile sen jälkeen osaatko tehdä omia asetuksia Lisäasetukset-kohdassa:


  • Esittele muutokset opettajalle


Toinen harjoituskokonaisuus

Voit seuraavaksi tuunata peliäsi.
Kiinnitä huomio pelisi ulkoasuun ja keskity erityisesti tekemään muutoksia CSS-tyyleihin.
Olisi parempi, että tämä tyyliasetukset olisivat sinulla omassa tiedostossaan (esim. nimellä style.css). Katso aiempaa oppituntia vibe-koodauksesta.

Voit käyttää myös selaimesi kehittäjän työkaluja, jonka avulla pääset tutkimaan, miten mikäkin osa pelistäsi jäsentyy.