13. HTML CSS

Avoin tyylittely (Avoin CSS)

2016-05-06T13:35:23+03:00

Avointa tyylittelyä käytetään siihen että saisit uniikin tyylin yhteen html elementeistäsi:

Avoin tyylittely käyttää style atribuuttia.

Tämä esimerkki vaihtaa Tekstin väri <h1> elementin siniseksi:

Esimerkki

<h1 style="color:blue;">Tämä on sininen otsikko</h1>

Ulkoinen tyylittely (Ulkoinen CSS)

2016-05-06T13:47:33+03:00

Ulkoinen css tyyli käytetään muotoilemaan monia sivuja kerralla.

Ulkoisella tyyli pohjalla, voit vaihtaa ulkoasun koko sivullesi kerralla.

Jos tahdot käyttää ulkoista css pohjaa, laita siitä linkki <head> osioon HTML sivulle:

Esimerkki

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Otsikko</h1>
<p>Väliotsikko.</p>

</body>
</html>

Ulkoinen tyylitiedosto voidaan kirjoittaa millä tahansa tekstieditorilla. Tiedosto ei saa sisältää mitään html tageja. Tyyli tiedosto tallennetaan .css päätteellä.

Tältä näyttää "styles.css" tiedosto:

body {
background-color: lightgrey;
}

h1 {
color: blue;
}

p {
color:green;
}

Sisäinen tyylittely (Sisäinen CSS)

2016-05-06T13:38:33+03:00

Sisäistä tyylittelyä käytetään antamaan muoto ja väri kokonaiselle HTML sivulle.

Sisäinen tyylittely määritellään <head> osiossa html sivua, <style> elementillä:

Esimerkki

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>

<h1>Tämä on otsikko</h1>
<p>Tämä on väliotsikko.</p>

</body>
</html>

CSS Fontit

2016-05-06T13:50:55+03:00

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

2016-05-06T13:59:30+03:00

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ä

2016-05-06T13:29:03+03:00

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

2016-05-06T14:11:46+03:00

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;
}

	Käytä id osoittaaksesi tietyn elementin. Käytä class toimintoa osoittaaksesi ryhmällisen elementtejä.