![Page 1: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/1.jpg)
CSS –tyyliä sivuihinosa I
Elina Ulpovaara
![Page 2: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/2.jpg)
Mistä on kyse?
CSS eli tyylisivut on dokumentin esitysasua koskeva ehdotus, joka on kirjoitettu tähän tarkoitukseen kehitetyllä kielellä.
Yleisin Webissä käytetty kieli on CSS (Cascading Style Sheet), joka on oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3.
CSS:ssä voi ehdottaa elementeille mm.: fontin tyypin, korostuksen , koon tekstin värin taustan värin, taustakuvion ja sen sijainnin marginaalien ja reunusten käytön, leveydet, värit ja muodot esitystavan:mm. elementin esittäminen lohkoina, luetteloalkiona tai ei
ollenkaan
2ICT1TN004
![Page 3: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/3.jpg)
Mihin kirjoitan tyyliehdotukset?Kolme vaihtoehtoa….
<!DOCTYPE html><html><head><title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" ><style type="text/css">
h1 {color:rgb(255,0,0)}</style></head><body><h1 style="color:rgb(0,0,255)">ICT1TN004<br> Verkkomultimedia</h1><nav><ul><li>kotisivu</li>
<li>aikataulu</li>....
Tyyli kirjoitetaan erilliseen tiedostoon. Tyylitiedosto liitetään html-dokumenttiin<head>-elementtiin <link>-elementillä.
Tyyli kirjoitetaan <style>-elementtiin html-tiedoston otsikossa eli <head>-elementissä.
Kirjoittamalla tyyliehdotus juuri siihen kohtaan, mihin haluat sen tulevat.Html-dokumentissä voidaan tyyli antaa jokai-selle elementille erikseen style-attribuutinavulla.
3ICT1TN004
![Page 4: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/4.jpg)
Miten kirjoitan CSS:ään?
Tyyliehdotuksen kirjoitusperiaate:
valitsin määritys määritysselector declaration declaration
h1 {color:rgb(255,0,0); font-size:20px;}
ominaisuus arvoproperty value
Valitsin on usein html-elementti, johon tyyli kohdistuu.
4ICT1TN004
![Page 5: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/5.jpg)
Valitsimia:
Yleisvalitsin * : koskee kaikkia elementtejä* {font-size: 12px;}
Ehdotus kohdistuu yhteen tiettyyn elementtiin: H1-tason otsikot ovat punaisia ja kooltaan 20px.
h1 { color: rgb(255,0,0); font-size: 20px;}
Usealla elementillä sama ulkoasuehdotus: H1-tason otsikoiden ja kappaleiden väri on sininen.
h1, p { color: rgb(0,0,255);}
Elementin sisällä tarkentava elementti, johon ominaisuus kohdistuu: nav-elementin sisällä oleva a-elementin teksti sinisellä.
nav a {color: rgb(0,0,255);}
5ICT1TN004
![Page 6: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/6.jpg)
Luokkavalitsin
Yhdelle html-elementille voidaan ehdottaa useampia tyylejä käyttämällä luokkia.h1.pun { color:rgb(255,0,0)}h1.sin {color:rgb(0,0,255)}
Määriteltyyn luokkaan viitataan html-tiedostossa elementeissä class- attribuutilla.<h1 class="pun">Ärsyttääkö silmiäsi?</h1><h1 class="sin">Ei ärsytä.</h1>
Voidaan käyttää myös yleisiä luokkia, joiden määritys voidaan liittää mihin elementtiin hyvänsä. Luokan määrittely aloitetaan pisteellä (.), jonka jälkeen tulee luokan nimi. Elementin taustaväri on harmaa:
.htausta {background-color: rgb(204,204,204)}
Näin määriteltyyn luokkaan voidaan viitata missä elementissä hyvänsä käyttämällä class-attribuuttia.
<h2 class=”htausta">Tässä on ....<table class=”htausta"> .......
6ICT1TN004
![Page 7: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/7.jpg)
ID valitsin
ID-attribuuttia annetaan dokumentin elementille ainutkertainen tunniste.<p id="eka">Tämä on dokun eka kappale....</p>
Tähän tunnisteeseen viitataan tyylimäärittelyssä #-merkillä:#eka {color:rgb(255,0,0)}
Kommentti tyylitiedostossa:
/* tyylimäärittelyn sisällä oleva kommentti*/
Kommentti css:ssä
7ICT1TN004
![Page 8: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/8.jpg)
Ulkopuolinen css-tiedosto
HTML-dokumenttiin lisätään <head>-elementtiin <link>-elementti, joka osoittaa tyylitiedoston sijainnin. Tyylitiedoston tarkentimeksi annetaan .css.
Sama tyyli voidaan linkittää useisiin html-sivuihin Yhtenäinen ulkoasu koko sivustolla Ulkoasun päivitys/uudistus on helppoa: muutat vain tyylitiedostoa. Ulkoasun tuottamisen voi hoitaa tarvittaessa eri henkilö kuin html-sivun
tekijä/päivittäjä. Voit tuottaa erilaisia ulkoasuja erikoisille näytöille, kirjoittimelle ym.
varten samasta html-sivusta
<!DOCTYPE html><html><head>
<title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" >
<head>….
.
8ICT1TN004
![Page 9: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/9.jpg)
Style-elementti
Html-dokumentille voidaan tehdä dokumentin sisäinen tyyliohje style-elementillä, joka sijoitetaan html-dokumentissa head-elementinalielementiksi.
Tämä tyyliohje on olemassa vain siinä html-dokumentissa, jonka head-elementissä style-elementti sijaitsee.
Sisäisen style-elementin tyyliohje ohittaa ulkoisen .css tiedostossa olevan ohjeen silloin kuin ehdotus koskee saman elementin samaa ominaisuutta.
<!DOCTYPE html><html><head><title>ICT1TN004</title><link href="tyyli.css" rel="stylesheet" type="text/css" ><style type="text/css">
h1 {color:rgb(255,0,0)}</style></head>…. 9ICT1TN004
![Page 10: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/10.jpg)
Style-attribuutti
HTML-dokumentissa elementille voidaan antaa style-attribuutti, jonka arvoksi kirjoitetaan kyseiseen elementtiin kohdistuvia ulkoasuehdotuksia.
Style-attribuutilla tehty tyylimääritys ohittaa sekä ulkoisen tiedoston että style-elementin kyseiselle elementille määritellyt tyyliohjeet.
<p style=”color:rgb(255,0,0); font-size:20px”>Punaista tekstiä, jonka koko on 20px.</p>
10ICT1TN004
![Page 11: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/11.jpg)
Miten selaimet tukevat CSS:ää?
Yleisesti voidaan sanoa, että kaikki selaimet tukevat CSS1 ja CSS2 tyylitiedostotekniikoita.
CSS3:sessa on paljon uusia piirteitä, joita kaikki selaimet ei vielä tue.Tietoa piirteistä ja selainten tuesta:
http://www.css3.info/ Everything yuo need to know about CSS3
http://caniuse.com/ http://www.w3schools.com/css/
Tähän dokumenttiin on pyritty lisäämään ulkoasuominaisuuksien kohdalle, jos tuessa on rajoituksia.
11ICT1TN004
![Page 12: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/12.jpg)
Extension Renderingengine
Selaimet Esimerkki
-moz- Mozilla Firefox, Camino -moz-transform
-ms- Trident IE
-o- Presto Opera -o-transform
-webkit- Webkit Chrome, Safari -webkit-transform
#laatikko {-moz-transform: scale(2);-webkit-transform: scale(2);transform: scale(2);
}
Osa uusista ominaisuuksista vaatii vielä toimiakseen selainten browserextension määritykset.
Huom. Kirjoita viimeiseksi CSS-suosituksen mukainen määritys. CSS-tyyleissä viimeinen sääntö tulee aina voimaan. Joskus tulevaisuudessa ei enää extension –poikkeussääntöjä tarvita. 12ICT1TN004
![Page 13: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/13.jpg)
CSS-tyylit
color – tekstin väri
Esimerkki:1-tason otsikot punaisella
h1 {color:rgb(255,0,0)}
Heksadesimaalit Väri määritellään #RRGGBB, mikä muodostuu värin osista RR (punainen),
GG (vihreä) ja BB (sininen). Osien arvojen täytyy olla väliltä 0-FF.
Kuvaus:- Asettaa tekstille värin.
Periytyminen: kyllä
Arvot:- heksadesimaalina: #CC0000- rgb-väreinä: rgb(255,0,0)- rgba-väreinä: rgba(255,0,0,0.5)- värin nimellä: red- hsl-väreinä:hsl(0º,100%,50%)- hsla-väreinä:hsla(0º,100%,50%,0.5)
ICT1TN004
![Page 14: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/14.jpg)
RGB Värit RGB -väri määritellään rgb(red, green, blue). Väriarvo ilmoitetaan
Numerona väliltä 0-255 Prosenttina 0%-100%
RGBa Värit RGBa-värit laajentavat RGB-värejä
aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. RGBa-väri määritellään rgba(red, green, blue, alpha). Alpha-parametri
on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysi peittävyys).
Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+
14ICT1TN004
![Page 15: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/15.jpg)
Värien nimet Perusvärit:
aqua, black, blue, fuchsia, gray (grey), green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
Lisäksi 130 väriä, linkkejä: http://www.w3schools.com/cssref/css_colornames.asp http://answers.oreilly.com/topic/453-color-names-and-rgb-values-
with-wide-browser-support/ HSL –värit
Väri määritellään hsl(hue, saturation, lightness)
Hue: 0 – punainen, 60 – keltainen , 120 – vihreä, 240 – sininen’ http://www.w3.org/TR/css3-color/#hsl-examples
väriarvot asteita väliltä 0-360
kylläisyysarvot 0%-100%harmaa -> väri
valoisuusarvot 0%-100%musta -> valkoinen
Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+
15ICT1TN004
![Page 16: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/16.jpg)
HSLa Värit HSLA-värit laajentavat HSL-värejä
aplha-kanavalla, joka kertoo elementin läpinäkyvyyden. HSLA-väri määritellään hsla(hue, saturation, lightness, alpha). Alpha-
parametri on numero valiltä 0.0 (täysi läpinäkyvyys) ja 1.0 (täysipeittävyys).
Väriesimerkki:
color:rgb(199,21,133)color:#C71585color: MediumVioletRedcolor:hsl(322,89%,43%)
Tuki: IE9+, Firefox3+, Chrome, Safari ja Opera10+
16ICT1TN004
![Page 17: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/17.jpg)
font-family - fontti
Esimerkki:1-tason otsikot tulostetaan ensisijaisesti fontilla Tahoma, jos sitä ei ole saatavilla niin käytetään Arial-fonttia. Jos Arialia ei ole käytössä, niinkäytetään selaimen sans serif (päätteetön fontti)-oletusfonttia.
h1 {font-family: Tahoma, Arial, sans-serif}
Kuvaus:- Asettaa fonttityypin.- Tyyppi voidaan antaa fonttienniminä tai käyttämällä jotainviidestä fonttiperheestä.
Periytyminen: kyllä
Arvot:- fonttien nimet- fonttiperheet: serif, sans-serif,cursive, fantasy, monospace
ICT1TN004
![Page 18: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/18.jpg)
Fonttien nimistä: Jos fontin nimi koostuu kahdesta tai useammasta sanasta, niin
käytetään ””-merkkejä
p {font-family: ”Times New Roman”, serif}
Fonttiperheet serif: päätteelliset fontit, esim. Times New Roman sans-serif: päätteettömät fontit, esim. Arial cursive: kaunokirjoitus, esim. script fantasy: esim. Jokerman monospace: tasalevyiset, esim. Courier New
18ICT1TN004
![Page 19: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/19.jpg)
font-size – fontin koko
Esimerkki:Kappaleiden fonttikoko on kaksinkertainen oletusfonttikokoon verrattuna.
p {font-size: 200%}p {font-size:2em}
Kuvaus:- Fontin koko
Periytyminen: kyllä
Arvot:- xx-small, x-small, small, medium, large, x-large, xx-large- larger, smaller- prosentit- pituusyksiköt: em, px, cm, pt ....
ICT1TN004
![Page 20: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/20.jpg)
font-style - tyyli
Arvot:- oblique: kallistettu teksti- italic: kursivoitu teksti- normal: normaali teksti
Periytyminen: kyllä
Esimerkki:2-tason otsikot tulostetaan kallistettuna.
h2 {font-style:oblique}
ICT1TN004
![Page 21: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/21.jpg)
font-weight - fontin lihavuus
Lihavoinnin luvut esittävät fontin paksuusastetta. Yleensä selaimetesittävät font-weight-arvot 100-300 arvona 400, joka on perusteksti.
Arvot:- numeeriset arvot:100, 200,300, 400, 500, 600, 700, 800,900- avainsanat: normal(400),bold(700), bolder, lighter
Periytyminen: kyllä
Esimerkki:Kappaleen teksti on lihavoitu.
p {font-weight:bold}
ICT1TN004
![Page 22: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/22.jpg)
font-variant - kapiteeliteksti
Esimerkki: Kappaleen teksti tulostetaan kapiteelikirjaimilla.
p {font-variant: small-caps}
Kuvaus:- Teksti tulostetaankapiteelikirjaimilla eli isoillakirjaimilla tavallisten pientenkirjaimien asemasta.
Arvot:- Small-caps: kapiteelikirjaimet- normal: normaalit kirjaimet
ICT1TN004
![Page 23: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/23.jpg)
font
Yhdistää edellä esitetyt font-alkuiset ulkoasuehdotukset
p {font: bold 12px arial,sans-serif}
23ICT1TN004
![Page 24: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/24.jpg)
Web fontit
@font-face
Mahdollistaa fonttien lataamisen verkosta käyttäjän omalle koneelle. Mistä fontteja:
www.fontsquirrel.com typekit.com
Fonttien formaatit: WOFF - Web open font, myös IE9 TTF – Toimii kaikilla selaimilla paitsi IE:llä ja iPhone.:ssa EOT – IE:n aikaisemmat versiot SVG - iPhone/iPad.
Tarkista lisenssit!
24ICT1TN004
![Page 25: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/25.jpg)
CSS-koodiin:
@font-face {font-family: 'leipis';src: url('fontit/GoodDog-webfont.eot');src: url('fontit/GoodDog-webfont.eot?iefix') format('eot'),
url('fontit/GoodDog-webfont.woff') format('woff'),url('fontit/GoodDog-webfont.ttf') format('truetype'),url('fontit/GoodDog-webfont.svg#webfontx1QlgLst') format('svg');
font-weight: normal;font-style: normal;}
Itse varsinaiseen html-koodiin:p {font-family:'leipis', arial, sans-serif}
Tässä on fontti nimeltä GoodDogtallennettu fontit-hakemistoon.
Font-family-nimeksi on annettu ”leipis”.
Fonttien mukana tulee mallikoodi css:lle.
25ICT1TN004
![Page 26: CSS –tyyliä sivuihin osa Imyy.haaga-helia.fi/~ict1tn004/materiaalit/css/css_tyylit_1.pdf · oikeastaan kieliperhe, johon kuuluu CSS1, CSS2 ja kehitteillä oleva CSS3. CSS:ssä](https://reader033.vdocuments.mx/reader033/viewer/2022041800/5e50964c3bb73e127b76c31e/html5/thumbnails/26.jpg)
Fontit Googlen palvelusta
http://code.google.com/webfonts Valitse sivulta sopiva fontti ->kopio omalle sivullesi siihen osoittava linkki
Lisää määre tyylitiedostoosi:
p {font-family: 'Skranji', cursive;}
<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>
26ICT1TN004