Kamu dapat mengatur penjajaran paragraf atau konten sel dalam sel tabel sesuai keinginan Anda dengan menggunakan properti berikut. Properti ini juga dapat diterapkan pada semua elemen lain yang memiliki tinggi atau lebar yang ditentukan atau dihitung.
Tata Letak Baris Pertama
Mulai dengan properti text-indent. Tentukan bagaimana baris pertama dari suatu paragraf akan diindentasi. Indentasi ke kiri juga mungkin. Untuk melakukan itu, nilai negatif text-indent harus digunakan. (Informasi detail mengenai kapan indentasi yang ekstrim dapat bermanfaat akan dijelaskan selanjutnya). Input yang diharapkan adalah angka numerik.
Contoh:
.absatz { text-indent: 2em; }
Tampilan di peramban akan seperti ini: 
Jika Anda menggunakan nilai negatif, akan ada indentasi teks di baris teks pertama.
.absatz {
text-indent: -2em;
}
Dan di sini tentu saja tampilan hasilnya di peramban: 
Sesuatu seperti ini juga dapat dilakukan. Namun, perhatikan saat menentukan indentasi, bahwa konten masih dapat dibaca jika dimaksudkan. Sebenarnya, text-indent juga dapat menjadi menarik dalam konteks SEO. Kadang-kadang lebih baik menampilkan grafik daripada teks.
Namun, jika teks tetap harus terbaca oleh mesin pencari, Anda akan menghadapi dilema. Dilema ini dapat diatasi dengan menggunakan text-indent. Karena properti ini memungkinkan Anda untuk menggeser teks. Dengan demikian, Anda dapat "menghilangkan" teks dari pandangan pengunjung.
Keunggulan dari varian text-indent: Teks yang ingin diganti dengan grafik tetap ada dalam sumber teks.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Dengan sintaks ini, gambar latar belakang ditetapkan untuk elemen h1. (background telah diperkenalkan dalam seri ini). Melalui text-indent: -99999px, teks judul akan digeser 99999 piksel ke kiri. Dengan demikian, teks tersebut tidak terlihat. Sekarang, yang terlihat hanyalah gambar.
Jika Anda menonaktifkan stylesheet, teks akan kembali terlihat seperti biasa.
Menentukan Tinggi Baris
Saya pernah menyinggung tentang tinggi baris dalam konteks properti font. Pada bagian ini, kita akan melihat topik ini secara lebih rinci. Penentuan tinggi baris dalam hubungannya dengan ukuran huruf (font-size) menarik perhatian.
Anda dapat menetapkan tinggi baris melalui properti line-height. Input yang diizinkan berupa angka numerik. Nilai persen juga dapat digunakan. Persentase tersebut akan merujuk pada ukuran huruf elemen yang ditentukan tinggi barisnya. Sebelum menentukan tinggi baris, perhatikan hal berikut: Terkadang, peramban/perangkat memberikan prioritas pada penentuan tinggi baris daripada properti lain, dan elemen akan terpotong jika lebih tinggi dari yang diharapkan. Hal ini biasanya menyebalkan terutama saat berhadapan dengan grafik. Oleh karena itu, uji hasilnya sebelum mengunggah halaman secara online.
Contoh berikut menunjukkan penggunaan line-height.
<p style="line-height:1.4em; font-size:1em;">Ada kalanya Anda membuat tata letak yang bagus, tetapi gambar masih belum ada. Jika Anda hanya menggunakan bingkai kosong, tata letaknya akan terlihat sangat polos. Berikut cara membuatnya lebih baik:<br /> Dalam pelatihan video ini, saya akan menunjukkan kepada Anda situs web terbaik untuk mendapatkan tempat gambar gratis dengan cepat. Anda dapat menemukan daftar brilian di sini, misalnya <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">di sini</a>.</p> <p style="line-height:2em;font-size:1em;">Ada kalanya Anda membuat tata letak yang bagus, tetapi gambar masih belum ada. Jika Anda hanya menggunakan bingkai kosong, tata letaknya akan terlihat sangat polos. Berikut cara membuatnya lebih baik:<br /> Dalam pelatihan video ini, saya akan menunjukkan kepada Anda situs web terbaik untuk mendapatkan tempat gambar gratis dengan cepat. Anda dapat menemukan daftar brilian di sini, misalnya <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">di sini</a>.</p> <p style="line-height:1em; font-size:1em;">Ada kalanya Anda membuat tata letak yang bagus, tetapi gambar masih belum ada. Jika Anda hanya menggunakan bingkai kosong, tata letaknya akan terlihat sangat polos. Berikut cara membuatnya lebih baik:<br /> Dalam pelatihan video ini, saya akan menunjukkan kepada Anda situs web terbaik untuk mendapatkan tempat gambar gratis dengan cepat. Anda dapat menemukan daftar brilian di sini, misalnya <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">di sini</a>.</p>
Di sini didefinisikan tiga paragraf, di mana masing-masing diberikan ketinggian baris yang berbeda.
Seperti yang terlihat, keseimbangan teks berjalan dapat dipengaruhi secara signifikan oleh ketinggian baris. Oleh karena itu, berhati-hatilah dengan penggunaan line-height.
Pertanyaan terakhir tentu saja adalah ketinggian baris mana yang sebaiknya dipilih. Biasanya ketinggian baris berkisar antara 130 hingga 150 persen.
p {
line-height: 150%;
}
Namun, keseimbangan yang baik pada akhirnya terutama bergantung pada lebar huruf. Di sini berlaku: semakin panjang baris teks berjalan, semakin besar ketinggian baris tersebut. Karena itu, pastikan untuk menguji situs agar keseimbangan tetap terjaga.
Penyelarasan Teks Horizontal
Dengan properti text-align, penyesuaian horizontal dari paragraf dan teks berjalan lainnya yang terdapat dalam elemen Blok dapat ditentukan. Nilai-nilai berikut dapat ditetapkan untuk text-align:
• left – penyelarasan kiri
• right – penyelarasan kanan
• center – terpusat
• justify – rata kanan kiri
Berikut adalah contoh lain:
<!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>Dan inilah tampilan hasilnya di browser:
Perhatikan bahwa text-align tidak hanya berlaku untuk konten teks. Properti ini sebenarnya berlaku untuk semua elemen Inline. Jadi ketika gambar dimasukkan, definisi text-align juga berlaku untuk elemen tersebut.
Sebuah catatan: text-align seharusnya - setidaknya menurut spesifikasi CSS resmi - tidak mempengaruhi elemen Blok. (Meskipun ada browser yang mengaplikasikannya pada elemen Blok). Jika Anda ingin mengatur elemen Blok, gunakan properti margin yang sudah dijelaskan sebelumnya untuk kasus tersebut.
