29. lokakuuta 2025
https://peda.net/id/4e5986a2b40
2025-10-28T15:23:35+02:00
https://peda.net/:static/539/peda.net.logo.bg.svg
<div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div>
Tyylittelyä
https://peda.net/id/88214b86b40
2025-10-29T09:21:33+02:00
Keskitytään vaihtelun vuoksi hetkeksi nettisivuihin ja niiden tyyleihin:<br/>
<ol>
<li>Oman peda.net -sivusi tyyliin</li>
<li>Oman pelisi tyyleihin</li>
</ol>
<br/>
<br/>
<h3>CSS-tyylit</h3>
<br/>
<h3><!--filtered attribute: data-start="142"--><!--filtered attribute: data-end="162"-->🖥️ Mikä on CSS?</h3>
<p><!--filtered attribute: data-start="164"--><!--filtered attribute: data-end="293"--><strong><!--filtered attribute: data-start="164"--><!--filtered attribute: data-end="171"-->CSS</strong> tulee sanoista <em><!--filtered attribute: data-start="187"--><!--filtered attribute: data-end="211"-->Cascading Style Sheets</em>.<br/>
<!--filtered attribute: data-start="212"--><!--filtered attribute: data-end="215"-->Se tarkoittaa <strong><!--filtered attribute: data-start="229"--><!--filtered attribute: data-end="244"-->tyylisivuja</strong>, joilla kerrotaan, miltä verkkosivu <strong><!--filtered attribute: data-start="281"--><!--filtered attribute: data-end="292"-->näyttää</strong>.</p>
<p><!--filtered attribute: data-start="295"--><!--filtered attribute: data-end="455"-->Jos <strong><!--filtered attribute: data-start="299"--><!--filtered attribute: data-end="307"-->HTML</strong> kertoo, mitä sivulla <strong><!--filtered attribute: data-start="329"--><!--filtered attribute: data-end="335"-->on</strong> (esim. tekstiä, kuvia, linkkejä),<br/>
<!--filtered attribute: data-start="369"--><!--filtered attribute: data-end="372"-->niin <strong><!--filtered attribute: data-start="377"--><!--filtered attribute: data-end="384"-->CSS</strong> kertoo, miltä se <strong><!--filtered attribute: data-start="402"--><!--filtered attribute: data-end="413"-->näyttää</strong> (esim. värit, fontit, taustat, asettelu).<br/>
(Lisäksi <b>JavaScript</b> luo sivullesi toiminnallisuutta.)</p>
<hr></hr><!--filtered attribute: data-start="457"--><!--filtered attribute: data-end="460"-->
<h3><!--filtered attribute: data-start="462"--><!--filtered attribute: data-end="491"-->🎨 Esimerkki ilman CSS:ää</h3>
<p><!--filtered attribute: data-start="493"--><!--filtered attribute: data-end="538"-->HTML-sivu ilman CSS:ää näyttää aika tylsältä:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span>>Tervetuloa sivulleni<span class="hljs-tag"></<span class="hljs-name">h1</span></span>>
<span class="hljs-tag"><<span class="hljs-name">p</span></span>>Tämä on ensimmäinen kotisivuni.<span class="hljs-tag"></<span class="hljs-name">p</span></span>>
</span></code></div>
</div>
<p><!--filtered attribute: data-start="622"--><!--filtered attribute: data-end="705"-->Selaimessa teksti näkyy mustana valkoisella taustalla, ilman värejä tai muotoiluja.</p>
<hr></hr><!--filtered attribute: data-start="707"--><!--filtered attribute: data-end="710"-->
<h3><!--filtered attribute: data-start="712"--><!--filtered attribute: data-end="736"-->🌈 Sama sivu CSS:llä</h3>
<p><!--filtered attribute: data-start="738"--><!--filtered attribute: data-end="796"-->Nyt lisätään CSS-tyyli, joka tekee sivusta vähän nätimmän:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span>>Tervetuloa sivulleni<span class="hljs-tag"></<span class="hljs-name">h1</span></span>>
<span class="hljs-tag"><<span class="hljs-name">p</span></span>>Tämä on ensimmäinen kotisivuni.<span class="hljs-tag"></<span class="hljs-name">p</span></span>>
<span class="hljs-tag"><<span class="hljs-name">style</span></span>>
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">background-color</span>: lightblue; <span class="hljs-comment">/* taustan väri */</span>
}
<span class="hljs-selector-tag">h1</span> {
<span class="hljs-attribute">color</span>: darkblue; <span class="hljs-comment">/* otsikon väri */</span>
<span class="hljs-attribute">text-align</span>: center; <span class="hljs-comment">/* keskitys */</span>
}
<span class="hljs-selector-tag">p</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">18px</span>; <span class="hljs-comment">/* tekstin koko */</span>
<span class="hljs-attribute">color</span>: black; <span class="hljs-comment">/* tekstin väri */</span>
}
<span class="hljs-tag"></<span class="hljs-name">style</span></span>>
</span></code></div>
</div>
<p><!--filtered attribute: data-start="1142"--><!--filtered attribute: data-end="1207"-->Nyt sivulla on sininen tausta, otsikko keskellä ja isompi teksti.</p>
<hr></hr><!--filtered attribute: data-start="1209"--><!--filtered attribute: data-end="1212"-->
<h3><!--filtered attribute: data-start="1214"--><!--filtered attribute: data-end="1234"-->🔍 CSS:n rakenne</h3>
<p><!--filtered attribute: data-start="1236"--><!--filtered attribute: data-end="1285"-->CSS koostuu <strong><!--filtered attribute: data-start="1248"--><!--filtered attribute: data-end="1262"-->säännöistä</strong>, joissa on kolme osaa:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span class="hljs-selector-tag">p</span> {
<span class="hljs-attribute">color</span>: red;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;
}
</span></code></div>
</div>
<ul><!--filtered attribute: data-start="1338"--><!--filtered attribute: data-end="1575"-->
<li><!--filtered attribute: data-start="1338"--><!--filtered attribute: data-end="1439"-->
<p><!--filtered attribute: data-start="1340"--><!--filtered attribute: data-end="1439"--><code><!--filtered attribute: data-start="1340"--><!--filtered attribute: data-end="1343"-->p</code> = <strong><!--filtered attribute: data-start="1346"--><!--filtered attribute: data-end="1358"-->valitsin</strong>, kertoo mihin HTML-elementtiin tyyli vaikuttaa (tässä kaikki kappaleet <code><!--filtered attribute: data-start="1430"--><!--filtered attribute: data-end="1435"--><p></code>).</p>
</li>
<li><!--filtered attribute: data-start="1440"--><!--filtered attribute: data-end="1524"-->
<p><!--filtered attribute: data-start="1442"--><!--filtered attribute: data-end="1524"--><code><!--filtered attribute: data-start="1442"--><!--filtered attribute: data-end="1455"-->color: red;</code> = <strong><!--filtered attribute: data-start="1458"--><!--filtered attribute: data-end="1472"-->ominaisuus</strong> ja sen <strong><!--filtered attribute: data-start="1480"--><!--filtered attribute: data-end="1488"-->arvo</strong> (tässä tekstin väri on punainen).</p>
</li>
<li><!--filtered attribute: data-start="1525"--><!--filtered attribute: data-end="1575"-->
<p><!--filtered attribute: data-start="1527"--><!--filtered attribute: data-end="1575"-->Jokainen sääntö päättyy <strong><!--filtered attribute: data-start="1551"--><!--filtered attribute: data-end="1574"-->puolipisteeseen (;)</strong>.</p>
</li>
</ul>
<hr></hr><!--filtered attribute: data-start="1577"--><!--filtered attribute: data-end="1580"-->
<h3><!--filtered attribute: data-start="1582"--><!--filtered attribute: data-end="1622"-->📚 Miten CSS voidaan lisätä sivulle?</h3>
<p><!--filtered attribute: data-start="1624"--><!--filtered attribute: data-end="1661"-->CSS voidaan laittaa kolmella tavalla:</p>
<ol><!--filtered attribute: data-start="1663"--><!--filtered attribute: data-end="2013"-->
<li><!--filtered attribute: data-start="1663"--><!--filtered attribute: data-end="1744"-->
<p><!--filtered attribute: data-start="1666"--><!--filtered attribute: data-end="1744"--><strong><!--filtered attribute: data-start="1666"--><!--filtered attribute: data-end="1701"-->Samaan tiedostoon HTML:n kanssa</strong> (käyttämällä <code><!--filtered attribute: data-start="1715"--><!--filtered attribute: data-end="1724"--><style></code>-osaa kuten yllä).</p>
</li>
<li><!--filtered attribute: data-start="1745"--><!--filtered attribute: data-end="1876"-->
<p><!--filtered attribute: data-start="1748"--><!--filtered attribute: data-end="1814"--><strong><!--filtered attribute: data-start="1748"--><!--filtered attribute: data-end="1773"-->Erilliseen tiedostoon</strong> (esim. <code><!--filtered attribute: data-start="1781"--><!--filtered attribute: data-end="1792"-->style.css</code>) ja linkitetään näin:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span class="hljs-tag"><<span class="hljs-name">link</span></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"style.css"</span>>
</span></code></div>
</div>
</li>
<li><!--filtered attribute: data-start="1877"--><!--filtered attribute: data-end="2013"-->
<p><!--filtered attribute: data-start="1880"--><!--filtered attribute: data-end="1949"--><strong><!--filtered attribute: data-start="1880"--><!--filtered attribute: data-end="1910"-->Suoraan yhteen elementtiin</strong> (ei suositeltavaa, mutta mahdollista):</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span class="hljs-tag"><<span class="hljs-name">p</span></span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: red;"</span>>Punainen teksti<span class="hljs-tag"></<span class="hljs-name">p</span></span>>
</span></code></div>
</div>
</li>
</ol>
<hr></hr><!--filtered attribute: data-start="2015"--><!--filtered attribute: data-end="2018"-->
<h3><!--filtered attribute: data-start="2020"--><!--filtered attribute: data-end="2047"-->💡 Miksi CSS on tärkeä?</h3>
<ul><!--filtered attribute: data-start="2049"--><!--filtered attribute: data-end="2249"-->
<li><!--filtered attribute: data-start="2049"--><!--filtered attribute: data-end="2106"-->
<p><!--filtered attribute: data-start="2051"--><!--filtered attribute: data-end="2106"-->Se tekee verkkosivuista <strong><!--filtered attribute: data-start="2075"--><!--filtered attribute: data-end="2103"-->kauniimpia ja selkeämpiä</strong>.</p>
</li>
<li><!--filtered attribute: data-start="2107"--><!--filtered attribute: data-end="2166"-->
<p><!--filtered attribute: data-start="2109"--><!--filtered attribute: data-end="2166"-->Se auttaa erottamaan sisällön (HTML) ja ulkoasun (CSS).</p>
</li>
<li><!--filtered attribute: data-start="2167"--><!--filtered attribute: data-end="2249"-->
<p><!--filtered attribute: data-start="2169"--><!--filtered attribute: data-end="2249"-->Samaa tyyliä voi käyttää <strong><!--filtered attribute: data-start="2194"--><!--filtered attribute: data-end="2213"-->monella sivulla</strong>, jolloin sivusto pysyy yhtenäisenä.<br/>
<br/>
</p>
<hr></hr><!--filtered attribute: data-start="2015"--><!--filtered attribute: data-end="2018"-->
<p><!--filtered attribute: data-start="839"--><!--filtered attribute: data-end="880"-->💡 <strong><!--filtered attribute: data-start="842"--><!--filtered attribute: data-end="880"-->Kolme verkkosivun kieltä lyhyesti:</strong></p>
<ul><!--filtered attribute: data-start="883"--><!--filtered attribute: data-end="1044"-->
<li><!--filtered attribute: data-start="883"--><!--filtered attribute: data-end="929"-->
<p><!--filtered attribute: data-start="885"--><!--filtered attribute: data-end="929"--><strong><!--filtered attribute: data-start="885"--><!--filtered attribute: data-end="893"-->HTML</strong> = sisältö (teksti, kuvat, linkit)</p>
</li>
<li><!--filtered attribute: data-start="932"--><!--filtered attribute: data-end="979"-->
<p><!--filtered attribute: data-start="934"--><!--filtered attribute: data-end="979"--><strong><!--filtered attribute: data-start="934"--><!--filtered attribute: data-end="941"-->CSS</strong> = ulkoasu (värit, fontit, asettelu)<br/>
<strong><!--filtered attribute: data-start="984"--><!--filtered attribute: data-end="998"-->JavaScript</strong> = toiminta (napit, animaatiot, vuorovaikutus)</p>
</li>
</ul>
<br/>
<br/>
<br/>
</li>
</ul>
<h3>Ensimmäinen harjoituskokonaisuus</h3>
<br/>
Tutustu CSS-tyyleihin omalla Peda.net-sivullasi:<br/>
<span class="small"><a href="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/muokkaatyylia.png#top" title="MuokkaaTyylia.png"><img src="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/muokkaatyylia.png:file/photo/07924d9c0a6d9a7567809f05fb9d41bcf75fdb7c/MuokkaaTyylia.png" alt="" title="MuokkaaTyylia.png" class="inline" loading="lazy"/></a></span><br/>
<br/>
<ul>
<li>Kokeile valmiit toiminnot Muokkaa tyylistä</li>
<li>Kokeile sen jälkeen osaatko tehdä omia asetuksia Lisäasetukset-kohdassa:</li>
</ul>
<br/>
<span class="small"><a href="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/csstyylitpedanetissalisaasetukset.png#top" title="CSStyylitPedaNetissaLisaAsetukset.png"><img src="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/csstyylitpedanetissalisaasetukset.png:file/photo/505bf9fcc5627be766d8451095f6036ff5df2a29/CSStyylitPedaNetissaLisaAsetukset.png" alt="" title="CSStyylitPedaNetissaLisaAsetukset.png" class="inline" loading="lazy"/></a></span><br/>
<ul>
<li>Esittele muutokset opettajalle</li>
</ul>
<br/>
<br/>
<h3>Toinen harjoituskokonaisuus</h3>
Voit seuraavaksi tuunata peliäsi.<br/>
Kiinnitä huomio pelisi ulkoasuun ja keskity erityisesti tekemään muutoksia CSS-tyyleihin. <br/>
Olisi parempi, että tämä tyyliasetukset olisivat sinulla omassa tiedostossaan (esim. nimellä style.css). <a href="https://peda.net/id/d126832a987" rel="noopener" target="_blank">Katso aiempaa oppituntia vibe-koodauksesta.</a><br/>
<br/>
Voit käyttää myös selaimesi kehittäjän työkaluja, jonka avulla pääset tutkimaan, miten mikäkin osa pelistäsi jäsentyy.<br/>
<span class="medium"><a href="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/kehittajan-tyokalut.png2#top" title="kehittajan tyokalut.png"><img src="https://peda.net/orivesi/perusopetus/yhteiskoulu/oppiaineet/tietoteknikka/tvt-ja-ohjelmointikurssi-25-26/29.-lokakuuta-2025/tyylittelya/kehittajan-tyokalut.png2:file/photo/f200a2c3fb48303b5d5aa2661c171d31881a1335/kehittajan%20tyokalut.png" alt="" title="kehittajan tyokalut.png" class="inline" loading="lazy"/></a></span>
2025-10-28T15:25:11+02:00