Voit kohdistaa kappaleiden kappaleita tai taulujen solujen sisältöä haluamallasi tavalla seuraavien ominaisuuksien avulla. Nämä ominaisuudet voidaan soveltaa myös kaikkiin muihin elementteihin, joille on määritetty tai laskettu korkeus tai leveys.
Ensimmäisen rivin sisennys
Aloitetaan ominaisuudesta text-indent. Määrittele tämän avulla, miten kappaleen ensimmäinen rivi tulisi sisentää. Myös "negatiivinen sisennys" vasemmalle on mahdollista. Tätä varten on käytettävä negatiivista text-indent-arvoa. (Yksityiskohtaiset tiedot siitä, milloin äärimmäinen sisennys voi olla järkevää, seuraavat jäljempänä). Arvona odotetaan numeerista ilmaisua.
Esimerkki:
.kappale { text-indent: 2em; }
Selaimessa tämä näyttää seuraavalta:
Jos käytät negatiivista arvoa, ensimmäisellä virran rivillä on tekstiä, joka poistuu.
.kappale {
text-indent: -2em;
}
Ja tietenkin katso tulos selaimessa:
text-indent voi tulla mielenkiintoiseksi myös hakukoneoptimoinnin kannalta. Toisinaan haluaisit näyttää mieluummin kuvia kuin tekstiä.
Vaikka tekstin tulisi silti olla saatavilla hakukoneille, olet alusta alkaen dilemman edessä. Tätä dilemman voi kuitenkin ratkaista käyttämällä text-indent. Tämä ominaisuus mahdollistaa tekstien siirtämisen, kuten tiedätte. Tällä tavoin voit siis piilottaa tekstit kävijöiden näkyvistä.
Etuna text-indent-variantissa: Grafiikalla korvattava teksti on muuttumaton lähdetekstissä.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Tämän syntaksin avulla otsikolle h1 määritetään taustakuva. (Tämä background-ominaisuus on esitelty tässä sarjassa aiemmin). text-indent: -99999px siirtää otsikon tekstin 99999 pikseliä vasemmalle. Teksti ei ole enää näkyvissä. Nyt näytetään todellakin vain kuva.
Sivuston tyylin poistuessa teksti näkyy kuitenkin jälleen normaalisti.
Rivikorkeuden määrittäminen
Olin jo aiemmin maininnut rivikorkeuden yhteydessä yleiseen font-ominaisuuteen. Tässä yhteydessä käsitellään hieman tarkemmin tätä aihetta. Rivikorkeuden määrittäminen yhdessä fontin koon (font-size) kanssa voi olla mielenkiintoista.
Rivikorkeus voidaan määrittää ominaisuuden line-height avulla. Numeeriset arvot ovat sallittuja. Myös prosentuaaliset arvot ovat mahdollisia. Nämä liittyvät sitten elementin fonttikokoon, jolle rivikorkeus on määritetty. Ennen rivikorkeuden määrittämistä huomioikaa seuraava asia: Saattaa tapahtua, että selain/laitteisto antaa etusijan rivikorkeudelle muihin ominaisuuksiin nähden ja esittää elementeitä leikkaantuneina, jos ne ovat korkeampia. Tämä voi olla ärsyttävää etenkin grafiikoissa. Testaa tulokset siis ennen sivuston julkaisemista.
Seuraava esimerkki näyttää, kuinka line-height-ominaisuutta voidaan käyttää.
<p style="line-height:1.4em; font-size:1em;">Joskus olet luonut upean layoutin, mutta kuvat puuttuvat vielä, ja jos käytät vain tyhjiä kehyksiä, layout vaikuttaa varsin alastomalta. Tähän on parempikin tapa:<br /> Tässä videokoulutuksessa näytän teille parhaat verkkosivut, joista voit nopeasti saada ilmaisia sopivia kuvien paikkoja. Dahin levyn löydät ilmaiseksi, esim. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">täältä</a>.</p> <p style="line-height:2em;font-size:1em;">Joskus olet luonut upean layoutin, mutta kuvat puuttuvat vielä, ja jos käytät vain tyhjiä kehyksiä, layout vaikuttaa varsin alastomalta. Tähän on parempikin tapa:<br /> Tässä videokoulutuksessa näytän teille parhaat verkkosivut, joista voit nopeasti saada ilmaisia sopivia kuvien paikkoja. Dahin levyn löydät ilmaiseksi, esim. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">täältä</a>.</p> <p style="line-height:1em; font-size:1em;">Joskus olet luonut upean layoutin, mutta kuvat puuttuvat vielä, ja jos käytät vain tyhjiä kehyksiä, layout vaikuttaa varsin alastomalta. Tähän on parempikin tapa:<br /> Tässä videokoulutuksessa näytän teille parhaat verkkosivut, joista voit nopeasti saada ilmaisia sopivia kuvien paikkoja. Dahin levyn löydät ilmaiseksi, esim. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">täältä</a>.</p>
Tässä on määritelty kolme tekstikappaletta, joille on määritetty erilaiset rivikorkeudet.
Kuten näette, rivikorkeus vaikuttaa erittäin voimakkaasti tekstien luettavuuteen. Joten käsittelkää line-height -ominaisuutta varoen.
Lopuksi tietysti herää kysymys, millaisen rivikorkeuden pitäisi oikeastaan valita. Yleensä rivikorkeudet ovat välillä 130 ja 150 prosenttia.
p {
line-height: 150%;
}
Lopulta hyvä lukeminen riippuu ennen kaikkea tekstin leveydestä. Pätee: rivivälin pitäisi olla sitä suurempi, mitä pidemmät tekstirivit ovat. Testatkaa siis ehdottomasti sivua varmistaaksenne, että lukeminen säilyy todella helppona.
Vaakasuora tekstaus
Ominaisuudella text-align määritellään tekstikappaleten ja muiden lohko-elementeissä olevien tai sisällään sisältävien tekstin tai sisällytettyjen elementtien vaakasuora tasaus. Seuraavat arvot voidaan määrittää text-align -ominaisuudelle:
• left – vasen tasaus
• right – oikea tasaus
• center – keskitetty
• justify – tasaus molempiin reunojiin
Tähänkin taas esimerkki:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Ja näin se näyttää selaimessa: 
Huomaa, että text-align koskee myös muita elementtejä kuin tekstisisältöä. Ominaisuus koskee itse asiassa kaikkia sisällytettyjä elementtejä. Joten kun kuva on liitetty, text-align-määritys koskee myös tätä elementtiä.
Yksi huomautus vielä: text-align -ominaisuuden ei pitäisi, ainakaan virallisen CSS-määrittelyn mukaan, vaikuttaa lohko-elementteihin. (Vaikka on kyllä selaimia, jotka soveltavat sitä myös lohko-elementteihin). Jos haluat tasata lohko-elementtejä, käytä näissä tapauksissa jo esiteltyjä margin-ominaisuuksia.
