7. HTML tyylit
https://peda.net/id/69ebecbc12d
2016-05-05T19:28:35+03:00
https://peda.net/:static/533/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>
HTML tausta väri
https://peda.net/id/8767cd4612d
2016-05-05T19:36:34+03:00
<p>Taustaväri ominaisuus määrittää html elementille taustavärin<br/>
<br/>
Esimerkki:</p>
<div class="w3-code notranslate htmlHigh"><span><span><</span>body<span> style<span>="background-color:lightgrey;"</span></span><span>></span></span><br/>
<br/>
<span><span><</span>h1<span>>Otsikko</span></span><span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span>>Väliotsikko</span></span>.<span><span><</span>/p<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span></div>
2016-05-05T19:36:33+03:00
HTML Tekstin väri
https://peda.net/id/b5437f8012d
2016-05-05T19:38:07+03:00
<p>Tekstin väri ominaisuudella saat haluamasi värin html elementtiisi</p>
<div class="w3-example">
<h3>Esimerkki:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>h1<span> style<span>="color:blue;"</span></span><span>>Otsikko</span></span><span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span> style<span>="color:red;"</span></span><span>>Väliotsikko</span></span><span><span><</span>/p<span>></span></span></div>
</div>
2016-05-05T19:37:50+03:00
HTML Fonts
https://peda.net/id/e5bbbc4a12d
2016-05-05T19:39:12+03:00
<p>"Font-family" ominaisuudella saat haluamasi fontin html elementtiisi.</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>h1<span> style<span>="font-family:verdana;"</span></span><span>>Otsikko</span></span><span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span> style<span>="font-family:courier;"</span></span><span>>Väliotsikko</span></span><span><span><</span>/p<span>></span></span></div>
</div>
2016-05-05T19:39:12+03:00
HTML Styles
https://peda.net/id/05c059de12d
2016-05-05T19:34:32+03:00
<div class="w3-example">
<h3>HTML tyylit<br/>
<br/>
<h2 style="color:red;">Minä olen punainen</h2><br/>
<h2 style="color:blue;">Minä olen sininen</h2></h3>
<div class="w3-code notranslate">
<h2>HTML tyyli Atribuutti</h2>
<p>Jos tahdot muutta HTML elementin tyyliä, sen voi tehdä tyyli atribuutilla<strong></strong>.</p>
<p>HTML tyyli atribuutilla on seuraava sääntö:</p>
<div class="w3-example">
<div class="w3-code notranslate">tyyli ="<em>property</em>:<em>value;</em>"</div>
</div>
<p>"<em><strong>property" on</strong></em> CSS ominaisuus. "<em><strong>value" on</strong></em> CSS arvo.</p>
</div>
</div>
2016-05-05T19:32:56+03:00
HTML tekstin koko ja kohdistus
https://peda.net/id/3d8783a012e
2016-05-05T19:41:39+03:00
"font-size" ominaisuudella saat tekstiisi haluamasi koot.
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>h1<span> style<span>="font-size:300%;"</span></span><span>></span></span>Otsikko<span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span> style<span>="font-size:160%;"</span></span><span>>Väliotsikko</span></span>.<span><span><</span>/p<span>></span></span></div>
</div>
<div class="w3-example"> </div>
<p>"text-align" ominaisuudella saat määriteltyä missä kohdin tekstisi sijaitsee html elementissäsi.</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>h1<span> style<span>="text-align:center;"</span></span><span>></span></span>Keskitetty otsikko<span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span>></span></span>Väliotsikko<span><span><</span>/p<span>></span></span></div>
</div>
2016-05-05T19:41:39+03:00