Summary  
This chapter explains how to use CSS font properties—font-family, font-size, font-weight, font-style—and the ::first-letter pseudo-class to control and decorate text appearance.

General domain of usage  
Web design

Watch this video to see how different CSS font properties—such as font-family, font-size, font-weight, and font-style—change the appearance of text on a web page. You'll also learn how the ::first-letter pseudo-class can be used for decorative effects. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Fontit vaikuttavat merkittävästi verkkosivun tunnelmaan ja luettavuuteen.
Tässä luvussa käsitellään yleisimmin käytettyjä fontteihin liittyviä CSS-ominaisuuksia: `font-family`, `font-size`, `font-weight` ja `font-style`.


Kaikissa esimerkeissä käytetään samaa tekstiä havainnollistamaan, miten nämä ominaisuudet muuttavat ulkoasua.

Huomio

## font-family
`font-family`-ominaisuudella määritetään, mitä kirjasintyyppiä tekstin esittämiseen käytetään.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Useita fontteja voidaan luetella varalle pilkuilla eroteltuna. Jos ensimmäistä fonttia ei ole saatavilla, selain käyttää seuraavaa listassa. On suositeltavaa lisätä aina geneerinen varafontti, kuten: `serif`, `sans-serif`, `monospace`.

## font-size
`font-size`-ominaisuus määrittää tekstin koon.
```css
p {
  font-size: 16px;
}
```
Yleiset yksiköt: 
- `px`: kiinteä koko;
- `em`: suhteessa ylätason elementtiin;
- `rem`: suhteessa juurielementtiin.

## font-weight
Määrittää tekstin paksuuden. Numeeriset arvot: `100–900`. Avainsanat: `normal`, `bold`, `lighter`.

## font-style
Määrittää tekstin tyylin: `normal`, `italic` tai `oblique`.

## Pseudoluokka ::first-letter
`::first-letter` kohdistaa elementin (yleensä kappaleen tai otsikon) ensimmäiseen kirjaimeen, mahdollistaen koristeelliset tai tyylitellyt tehosteet.
```css
selector::first-letter {
 /* some styles */
}
```
Käynnistetään seuraava esimerkki nähdäksesi, miten se toimii.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJhcnRpY2xlIj4KICAgICAgPGgyIGNsYXNzPSJ0aXRsZSI+VGhlIFBvd2VyIG9mIFN0b3JpZXM8L2gyPgogICAgICA8cCBjbGFzcz0ibGVhZCI+CiAgICAgICAgU3RvcmllcyBjb25uZWN0IHVzLiBUaGV5IHNoYXBlIGhvdyB3ZSBzZWUgdGhlIHdvcmxkLCB1bmRlcnN0YW5kIGVhY2gKICAgICAgICBvdGhlciwgYW5kIHJlbWVtYmVyIG91ciBwYXN0LiBBIHdlbGwtdG9sZCBzdG9yeSBjYW4gbW92ZSBoZWFydHMsIGNoYW5nZQogICAgICAgIG1pbmRzLCBhbmQgc3BhcmsgYWN0aW9uLgogICAgICA8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` määrittää kirjasintyypin ja varavaihtoehdot.

`font-size` säätää tekstin kokoa px-, em- tai rem-yksiköissä.

`font-weight` säätää paksuutta numeroilla tai avainsanoilla.

`font-style` muuttaa fontin tyyliä.

`::first-letter` muotoilee tekstilohkon ensimmäisen kirjaimen.

Yhteenveto

Mikä ominaisuus määrittää fontin paksuuden?

Mikä on CSS:n `font-style`-ominaisuuden oletusarvo?

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Ymmärrä, miten CSS yhdistyy HTML:ään ja miten tyylejä sovelletaan selektoreiden avulla. Käytä värejä, tekstin muotoilua ja hover-efektejä visuaalisen esityksen hallintaan.

Paranna typografiaa käyttämällä riviväliä, välistyksiä, fonttiominaisuuksia ja mukautettuja fontteja. Hallitse fonttiperheitä, painoa, tyyliä ja kokoa paremman luettavuuden saavuttamiseksi.

Hallitse asettelun rakennetta käyttämällä margin-, padding-, border- ja width-ominaisuuksia. Ymmärrä laatikon koon määrittely sekä elementtien näyttötyypit, kuten block, inline ja inline-block.

Hallitse vaakasuoria ja pystysuoria asetteluja Flexbox-ominaisuuksien avulla. Säädä suuntaa, kohdistusta ja välistystä käyttöliittymäkomponenttien rakenteen määrittämiseksi.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Fonttien ja Fonttiominaisuuksien Käsittely

font-family

font-size

font-weight

font-style

Pseudoluokka ::first-letter

1. Mikä ominaisuus määrittää fontin paksuuden?

2. Mikä on CSS:n `font-style`-ominaisuuden oletusarvo?