Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Fontin väri voidaan määritellä joko heksakoodina tai rgb-arvona. Näistä rgb-arvo on usein tarkempi, mikäli väri täytyy saada mahdollisimman lähelle jonkin kuvan sävyä. Useimmat kuvankäsittelyohjelmat osaavat kertoa värin heksakoodin sekä rgb-arvot. Heksakoodi voidaan ilmoittaa kuuden numeron sijasta lyhennettynä kolmella, ja rgb-arvo voidaan ilmoittaa kolmen numeroarvon 0-255 sijasta prosentteina.
| #xxxxxx | Väri heksakoodilla ilmaistuna. Jokainen x merkitsee numeroa väliltä 0-9 tai kirjainta a-f. |
|---|---|
| #xxx | |
| rgb(arvo,arvo,arvo) | Väri rgb-arvoilla ilmaistuna. Jokainen arvo on joko väliltä 0-255 tai 0-100 %. |
| värin nimi | Jonkin värin englanninkielinen nimi. |
| inherit | Väri periytyy ylemmiltä elementeiltä. |
Esimerkeissä on määritelty fontin väri valkoiseksi.
Rgb-arvoilla ilmoitettuna: color:rgb(255,255,255); tai color:rgb(100%,100%,100%); Heksakoodilla ilmoitettuna: color:#ffffff; tai color:#fff;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
| fontin nimi | Esittää halutun tekstin määritetyllä fontilla. |
|---|---|
| fonttiperhe | Esittää halutun tekstin jollakin määritetyn fonttiperheen fontilla. |
| inherit | Kirjasinlaji periytyy ylemmältä elementiltä. |
Font-family -määrellä ilmoitetaan käytettävä fontti (kirjasinlaji) sekä sen perhe. Fontteja voi luetella useampia peräkkäin, kunhan ne erottelee toisistaan pilkulla. Jos vierailijalla ei ole asennettuna ensimmäisenä listassa mainittua fonttia, hänelle näytetään teksti toisena mainitulla fontilla, ja jos hänellä ei ole sitäkään, näytetään teksti kolmanneksi mainitulla fontilla ja niin edelleen. Moniosaiset fontin nimet, kuten Book Antiqua ja Times New Roman, ilmoitetaan ‘-merkkien sisällä.
Jos vierailijalla ei ole mitään listassa mainituista fonteista, turvaudutaan fonttiperheen määreeseen ja näytetään vierailijalle teksti samaan fonttiperheeseen kuuluvalla fontilla. Fonttiperheet ovat seuraavat:
Cursive -perheeseen kuuluvat esimerkiksi Comic Sans MS ja monet käsinkirjoitusta jäljittelevät fontit.
Fantasy -perheeseen kuuluvat esimerkiksi Impact sekä monet mielikuvituksellisilta näyttävät fontit, kuten lähes kaikki dingbats-fontit (fontit, joissa on kirjaimien tilalla kuvia).
Monospace -perheeseen kuuluvat fontit, joiden jokainen kirjain on yhtä leveä, esimerkiksi Courier New.
Sans-serif -perheeseen kuuluvat esimerkiksi Arial, Tahoma, Verdana, Trebuchet MS.
Serif -perheeseen kuuluvat esimerkiksi Times New Roman, Book Antiqua, Georgia, Garamond.
Cursive, Fantasy, Monospace, Sans-serif, Serif
Muutamia yleisiä fontteja:
Arial, Arial Narrow, Book Antiqua, Comic Sans MS, Courier New, Garamond, Georgia, Impact, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Verdana
Alla olevassa esimerkissä luetellaan Sans-Serif -perheeseen kuuluvia fontteja. Jos mitään ensin mainituista (Arial, Tahoma, Verdana, Trebuchet MS) ei ole vierailijan koneella, näytetään jokin toinen fontti Sans-Serif -perheestä.
font-family:Arial, Tahoma, Verdana, 'Trebuchet MS', Sans-Serif;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Fontin koko ilmoitetaan CSS:llä seuraavasti:
font-size:NUMEROyksikkö;
Fontin koon voi ilmoittaa monella eri yksiköllä, jotka on listattu CSS-osion etusivulla. Kooksi voi merkitä myös inherit, jolloin fontin koon muotoilut periytyvät ylemmältä elementiltä.
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Fontin kokoon ja perheeseen vaikuttavat muotoilut voidaan yhdistää yhdeksi pikakirjoitteeksi. Tähän muotoiluun voidaan myös lisätä kursivointi, lihavointi, kapiteelit sekä rivikorkeus. Muotoilut saa ilmoittaa missä järjestyksessä tahansa, eikä kaikkia tarvitse ilmoittaa. Lisäksi pikakirjoitteeseen voi lisätä muutamia sen omia arvoja:
| caption | Määrittää fontin samaksi kuin pudotusvalikoissa ja napeissa. |
|---|---|
| icon | Määrittää fontin samaksi kuin mitä ikonien yhteydessä käytetään. |
| menu | Määrittää fontin samaksi kuin mitä valikoissa (esimerkiksi pudotusvalikoissa) käytetään. |
| message-box | Määrittää fontin samaksi kuin mitä tekstikentissä käytetään. |
| small-caption | Määrittää fontin samaksi kuin mitä pienissä valikoissa käytetään. |
| status-bar | Määrittää fontin samaksi kuin selaimen tilarivillä.* |
*Selaimen tilarivi on useimmiten selaimen alaosassa näkyvä matala palkki, jossa lukee linkin osoite, kun hiiren vie linkin päälle, ja "valmis", kun haluttu sivu on ladattu.
Teoriassa:
font:kursiivimuotoilu kapiteelimuotoilu lihavointimuotoilu fontin_koko/rivikorkeus fontti;
Esimerkiksi:
font:italic small-caps bold 1.2em/1.0 Arial, Sans-Serif;
Fontin muotoilut voi myös määrittää periytymään ylemmiltä elementeiltä.
font:inherit;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
| italic | Kursivoi tekstin. |
|---|---|
| oblique | Kallistaa tekstiä oikealle. |
| normal | Palauttaa tekstin normaaliksi. |
| inherit | Tekstin mahdolliset kursivointimuotoilut periytyvät ylemmältä elementiltä. |
Esimerkiksi:
font-style:italic;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Tekstin lihavointi voidaan määrittää joko sanallisesti (esimerkiksi bold) tai numeroilla (esimerkiksi 100). Lihavointia merkitään numeroilla vain harvoin lähinnä siksi, ettei useimpiin kirjasinlajeihin (fontteihin) ole mahdollista saada kuin tavallinen lihavointi. Näin ollen tavallisesta poikkeavat lihavoinnit toimivat vain harvojen fonttien yhteydessä.
| bold | Lihavoi tekstin. |
|---|---|
| bolder | Lihavoi tekstin tavallista vahvemmin. |
| lighter | "Laihistaa" tekstin tavallista ohuemmaksi. |
| normal | Palauttaa tekstin normaaliksi. |
| 100 | "Laihistaa" tekstin paljon tavallista ohuemmaksi. |
| 200 | "Laihistaa" tekstin tavallista ohuemmaksi. |
| 300 | "Laihistaa" tekstin hieman tavallista ohuemmaksi. |
| 400 | Tavallisen paksuinen teksti, vastaa arvoa "normal". |
| 500 | Hyvin kevyesti lihavoitu teksti. |
| 600 | Kevyesti lihavoitu teksti. |
| 700 | Hieman tavallista kevyemmin lihavoitu teksti. |
| 800 | Normaali lihavointi, vastaa arvoa "bold". |
| 900 | Hieman tavallista paksumpi lihavointi. |
| inherit | Tekstin mahdolliset lihavointimuotoilut periytyvät ylemmältä elementiltä. |
Esimerkiksi:
font-weight:bold;
Tämä muotoilu toimii osittain IE 6:lla, IE 7:llä ja Safari 3:lla sekä kokonaan FF 2:lla ja Opera 9:llä.
Text-decoration -muotoilulla voidaan määrittää tekstille pääasiassa erilaisia viivauksia. Erikoista on se, että muotoilu voi saada useamman arvon yhtä aikaa — esimerkiksi underlinen ja overlinen.
| * Internet Explorerin versiot 6 ja 7 näyttävät overline-muotoilun väärin sanojen välissä (välilyöntien kohdalla). / ** Vilkkuminen toimii ainoastaan Mozilla Firefox- ja Opera-selaimissa. | |
| underline | Alleviivaus. |
|---|---|
| overline | Viiva tekstin ylle.* |
| line-through | Yliviivaus. |
| none | Ei viivausta. |
| blink | Vilkkuminen.** |
| inherit | Tekstin mahdolliset viivausmuotoilut periytyvät ylemmältä elementiltä |
Esimerkkejä:
text-decoration:underline overline line-through blink;
Tai:
text-decoration:underline;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Rivikorkeuden voi määrittää joko CSS:n etusivulla esitellyillä mittayksiköillä tai pelkillä numeroilla. Pelkillä numeroilla esitettäessä rivikorkeus tulee merkitä desimaalien kanssa: 1.0, ei pelkkä 1. Selainten oletusrivikorkeus on yleensä 1.0. Rivikorkeudeksi voi myös määrittää normal (vastaa oletusrivikorkeutta) tai inherit (rivikorkeusmuotoilu periytyy ylemmiltä elementeiltä).
Esimerkiksi:
line-height:1.5;
Tai:
line-height:125%;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Kirjainväli esitetään CSS:n etusivulla esitellyillä mittayksiköillä. Arvona voi olla myös normal (oletus) tai inherit (kirjainvälimuotoilu periytyy ylemmiltä elementeiltä).
Esimerkiksi:
letter-spacing:1px;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Text-alignin avulla voidaan tasata teksti halutulla tavalla. Oletuksena teksti on tasattu vasemmalle.
| left | Tasaa tekstin vasemmalle. |
|---|---|
| center | Keskittää tekstin. |
| right | Tasaa tekstin oikealle. |
| justify | Tasaa tekstin molempiin reunoihin. |
| inherit | Mahdollinen tasausmuotoilu peritään ylemmältä elementiltä. |
Esimerkiksi:
text-align:center;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Vertical-alignin avulla voidaan vaikuttaa tekstin sijaintiin pystysuunnassa. Yleisimmin vertical-alignia käytetään kuvien yhteydessä silloin, kun samalla rivillä olevaa tekstiä ei haluta kuvan alalaitaan.
| sub | Alaindeksi. |
|---|---|
| super | Yläindeksi. |
| text-top | Sijoitus samalla rivillä olevan isomman fontin ylälaitaan. |
| text-bottom | Sijoitus samalla rivillä olevan isomman fontin alalaitaan. |
| baseline | Mikäli teksti on jonkin elementin sisällä, se asemoidaan tämän elementin alalaitaan. |
| top | Teksti sijoitetaan rivin korkeimman elementin ylälaidan tasolle. |
| middle | Pystysuuntainen keskitys. |
| bottom | Teksti sijoitetaan rivin korkeimman elementin alalaidan tasolle. |
| inherit | Mahdollinen muotoilu peritään ylemmältä elementiltä. |
Esimerkiksi:
<img src="mansikka.png" alt="Mansikka" style="vertical-align:middle;" />
Kuvalle määritetty vertical-align määrittää, miten sen jälkeen tuleva
teksti (toisin sanoen tämä) näytetään.
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Text-indentin avulla voidaan sisentää kappaleen tai elementin ensimmäisen rivin tekstiä samaan tapaan kuin monissa painotuotteissa, esimerkiksi kirjoissa. Sisennyksen määrittelyssä käytetään CSS-osion etusivulla esiteltyjä mittayksiköitä. Arvo voi olla myös inherit, jolloin muotoilu periytyy ylemmiltä elementeiltä.
Esimerkiksi:
text-indent:2em;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Word-spacingin avulla voidaan määrittää tekstin sanojen välinen tila. Mittayksikkönä käytetään jotakin CSS-osion etusivulla esitellyistä vaihtoehdoista. Arvo voi olla myös inherit, jolloin muotoilu periytyy ylemmiltä elementeiltä.
Esimerkiksi:
word-spacing:5%;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Font-variantin avulla tekstille voi määrittää kapiteelit.
| normal | Normaali teksti. |
|---|---|
| small-caps | Suuret ja pienet kapiteelit. |
| inherit | Mahdolliset kapiteelimuotoilut periytyvät ylemmiltä elementeiltä. |
Esimerkiksi:
font-variant:small-caps;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Tekstimuunnosten avulla voi vaikuttaa halutun tekstin kirjainkokoon.
| capitalize | Jokaisen Sanan Alkukirjain Isolla. |
|---|---|
| uppercase | KAIKKI KIRJAIMET ISOLLA. |
| lowercase | kaikki kirjaimet pienellä. |
| none | Normaalit kirjaimet. |
| inherit | Mahdolliset muotoilut periytyvät ylemmiltä elementeiltä. |
Esimerkiksi:
text-transform:lowercase;