Mengenal Fungsi Properties Text-indent CSS

Hallo teman-teman balik lagi pada tutorial Dumet School, pada tutorial kali ini saya akan membahas tentang salah satu properties yang ada di CSS yaitu text-indent, nah mungkin teman-teman.

Ada yang belum faham tentang fungsi properties yang satu ini, untuk Lebih jelasnya, kita langsung saja praktek,
coba teman-teman buat sebuah file HTML dan ketikan script berikut:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
 when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting,
 remaining essentially unchanged.</p>

</body>
</html>

Untuk paragrafnya, teman-teman bisa buka lipsum.com untuk menggunakan text dummy, di atas saya membuat sebuah paragraf dengan tag p, nah sekarang coba tambahkan CSS internal seperti berikut:

<style>
p {
    text-align:justify;
}
</style>

Jika sudah save dan jalankan pada browser maka hasilnya akan seperti berikut :

Masih nampak seperti paragraf biasa, nah sekarang coba tambahkan pada script cssnya seperti berikut:

<style>
p {
    text-indent: 70px;
    text-align:justify;
}
</style>

Jika saya menambahkan properties text-indent sebanyak 70px, maka hasilnya akan seperti berikut:

Hasilnya baris pertama pada paragraf yang tadi kita buat akan lebih condong ke dalam sebanyak 70px, nah itulah fungsi dari text-indent, oke cukup sekian dulu untuk tutorial kali ini, semoga bermanfaat.

Terimakasih.

Mengenal Fungsi Properties Text-indent CSS

Kategori