Cara Mengatur Rata Teks HTML dengan CSS
Untuk mengatur rata text kita menggunakan property text-align. Property text-align memiliki 4 nilai yang dapat digunakan, yaitu : left, right, center, atau justify. Sesuai dengan namanya, jika menggunakan text-align : left maka text akan rata kiri dan jika menggunakan text-align : right maka text akan rata kanan. Untuk membuat text berada di tengah, kita mengunakan : text-align : center, dan perintah text-align : justify digunakan untuk membuat text rata kiri dan kanan.
Agar lebih mudah untuk dimengerti, saya sudah sediakan satu contoh dimana pada contoh ini memiliki 4 paragraf, setiap paragraf nya memiliki kode CSS text-align, yang disematkan dengan motode internal style sheets CSS. Berikut contoh penggunaan property text-align:
<!DOCTYPE html>
<html>
<head>
<title>Point
Website</title>
<style
type="text/css">
.kiri
{
text-align: left;
}
.kanan
{
text-align: right;
}
#tengah
{
text-align: center;
}
#kiri-kanan {
text-align: justify;
}
</style>
</head>
<body>
<h2>Belajar CSS
Mengatur Text dengan text-align</h2>
<h3> Membuat Paragraf Rata Kiri
</h3>
<p class="kiri">Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
<hr>
<h3> Membuat Paragraf Rata kanan
</h3>
<p class="kanan">Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
<hr>
<h3>Membuat Paragraf Rata
Tengah</h3>
<p id="tengah">Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
<hr>
<h3> Membuat Paragraf Rata Kiri-Kanan</h3>
<p id="kiri-kanan">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
<hr>
</body>
</html>
Jika dijalankan pada web browser akan menghasilkan seperti gambar berikut ini :
 |
| penggunaan property text-align untuk tata letak paragraf |
Namun Yang perlu diperhatikan dalam penggunaan justify ini adalah. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil.
Dari hasil gambar diatas teman-teman dapat melihat bahwah dengan mengatur rata text dapat memperindah tampilan dan lebih menarik untuk dibaca. Sekian tutorial dari saya semoga dapat bermanfaat buat kita semua. Terimakasi atas kunjungan nya.
No comments: