13. HTML CSS

CSS Fontit

CSS väri ominaisuus määrittelee mitä väriä HTML elementin tekstissäsi käytetään.

CSS font-family ominaisuus määrittelee mitä fonttia HTML elementin tekstissäsi käytetään.

CSS font-size ominaisuus määrittelee tekstin koon HTML elementissä

Esimerkki

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS koodin reunus ominaisuus

Jokaisessa HTML elementissä on laatikko ympärillä, vaikket sitä näkisi.

CSS border ominaisuus määrittää näkyvän reunuksen HTML elementille:

Esimerkki

p {
border: 1px solid black;
}

CSS padding ominaisuus määrittää jokaiselle reunukselle lisää tilaa sen sisäpuolella:

Esimerkki

p {
border: 1px solid black;
padding: 10px;
}

CSS margin ominaisuus määrittää marginaalin (välin) reunuksen ulkopuolelle:

Esimerkki

p {
border: 1px solid black;
padding: 10px;
margin: 30px;
}

HTML koodin tyylittelyä CSS:llä

CSS tulee sanoista Cascading Style Sheets

HTML elementteihin saa tyylejä 3:lla eri tavalla:

  • Avoin - käyttäen style attribuuttia HTML elementti osiossa
  • Sisäinen - käyttäen <style> elementtiä HTML <head> osiossa
  • Ulkoinen - käyttäen yhtä tai useamopaa ulkoista css tiedostoa

Kaikkein yleisin tapa käyttää tyylitiedostoja, on pitää erilliset tyylit ulkoisissa CSS tiedostoissa. mutta tässä opetusmateriaalissa käytetään sisäistä, koska se on helpoin käyttää / oppia.


ID ja Class atribuutti

Kaikki esimerkit käyttää CSS:ää tyylittelyyn HTML elementeissä yleisellä tasolla.

Määritelläksesi spesiaalin tyylin eri elementeille, ensimmäiseksi lisää id atribuutti elementille:

<p id="p01">Olen erikoinen</p>

jonka jälkeen määrittele tyyli elementille jolla on oma id:

Esimerkki

#p01 {
color: blue;
}

Luokka Atribuutti

Määritelläksesi tyylin jonkin sortin (luokalle) elementtejä, lisää class atribuutti elementille:

<p class="error">Olen erikoinen</p>

Nyt voit määritellä erillaisia tyylejä elementeille, kullekkin omassa luokassaan:

Esimerkki

p.error {
color: red;
}
Note Käytä id osoittaaksesi tietyn elementin. Käytä class toimintoa osoittaaksesi ryhmällisen elementtejä.