Untuk mengatur rata text kita memakai property text-align. Property text-align mempunyai 4 nilai yang sanggup digunakan, yaitu : left, right, center, atau justify. Sesuai dengan namanya, jikalau memakai text-align : left maka text akan rata kiri dan jikalau memakai text-align : right maka text akan rata kanan. Untuk menciptakan text berada di tengah, kita mengunakan : text-align : center, dan perintah text-align : justify dipakai untuk menciptakan text rata kiri dan kanan.
Agar lebih gampang untuk dimengerti, aku sudah sediakan satu teladan dimana pada teladan ini mempunyai 4 paragraf, setiap paragraf nya mempunyai instruksi CSS text-align, yang disematkan dengan motode internal style sheets CSS. Berikut teladan 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 ibarat 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 menciptakan web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini sanggup menciptakan goresan pena akan susah dibaca, terutama jikalau diakses dari smartphone yang mempunyai layar kecil.
Dari hasil gambar diatas teman-teman sanggup melihat bahwah dengan mengatur rata text sanggup memperindah tampilan dan lebih menarik untuk dibaca. Sekian tutorial dari aku agar sanggup bermanfaat buat kita semua. Terimakasi atas kunjungan nya.
No comments:
Post a Comment