Tekstin tyylittelyn perusteet

Värin määrittäminen

color-attribuuttia käytetään tekstin värin määrittämiseen.

CSS:n avulla esimerkiksi punainen väri määritellään seuraavilla tavoilla:

Tekstin oletusväri määritellään body-valitsimen avulla.

Esimerkki

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

W3C mukaisen CSS:n toteuttamiseksi: Jos tekstille asetetaan väri, niin myös tekstin taustalle pitäisi asettaa väri.

Tekstin vaakasuuntainen asemointi

Tekstin vaakasuuntaiseen asemointiin käytetään text-align-attribuuttia.

Tekstin asemoinnin vaihtoehdot ovat left, right, center ja justify.

Justify-arvo määrää tekstin molemmat reunat tasatuiksi, eli kaikki rivit ovat leveydeltään yhtä leveitä.

Esimerkki

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Tekstin ehostaminen

Ehostaminen hoidetaan text-decoration -attribuutilla, jota yleensä käytetään alleviivauksen poistamiseksi (text-decoration:none).

Ehostamista käytetään myös päälleviivauksen (text-decoration:overline), yliviivauksen (text-decoration:line-through), alleviivauksen (text-decoration:underline) ja välkkymisen (text-decoration:blink) toteuttamiseksi.

Esimerkki

a {text-decoration:none;}

Esimerkki

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Kannattaa kuitenkin välttää tekstin tarpeetonta alleviivaamista, sillä käyttäjä olettaa helposti alleviivauksen tarkoittavan linkkiä.

Kirjainkoon määrääminen

Attribuutti text-transform määrittää sen, että milloin teksti kirjoitetaan pienillä tai isoilla kirjaimilla.

Attribuuttia voidaan hyödyntää kaiken tekstin muuntamista isoiksi (text-transform:uppercase) tai pieniksi kirjaimiksi (text-transform:lowercase), tai sen avulla voidaan määrätä kirjoitettavaksi isolla kirjaimella jokaisen sanan ensimmäinen kirjain (text-transform:capitalize).

Esimerkki

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Tekstin sisentäminen

Tektikappaleen ensimmäinen rivi voidaan sisentää määrittelemällä text-indent -arvo (esim. text-indent:50px).

Esimerkki

p {text-indent:50px;}

Kokeile

Voit kokeilla eri tyylien näkymistä muuttamalla CSS-arvoja. Koodi ja esimerkki päivittyvät välittömästi kun olet muuttanut valintoja.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque, metus sit amet imperdiet varius, nibh leo consectetur nibh, semper egestas mauris mauris vitae orci. Donec adipiscing rhoncus enim, ut auctor nunc viverra ut. Aliquam fringilla nunc et nulla faucibus aliquet. Praesent orci lorem, egestas eget lacinia ullamcorper, dignissim quis mi. Duis volutpat, lacus nec luctus aliquam, lorem elit adipiscing enim, id auctor orci dolor a mauris. Nam imperdiet lectus sed magna egestas id laoreet nisi fringilla. Cras vulputate arcu sed erat dapibus ut egestas eros iaculis.

In at hendrerit libero. Proin pellentesque erat quis eros eleifend placerat sit amet vel arcu. Quisque erat mi, commodo et eleifend eget, laoreet sit amet diam. Mauris ut libero sed ligula aliquet pretium. Mauris aliquam gravida tellus, a imperdiet metus bibendum at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse nec tortor eget odio imperdiet accumsan non at nisi.

Nunc pulvinar rutrum eros, eu porttitor urna convallis quis. Aliquam in tincidunt mauris. Fusce mauris eros, bibendum at feugiat sed, gravida in dolor. Morbi quis lorem eu nisl pharetra luctus. Donec molestie metus sed enim interdum id vestibulum quam vehicula. Nam pharetra venenatis diam eu lobortis. Cras aliquet mattis ligula et scelerisque. Aenean a semper eros. Integer ornare vehicula diam imperdiet vulputate. Mauris mauris quam, imperdiet quis hendrerit et, imperdiet a felis. Suspendisse vitae diam diam.