Pada tutorial kali ini akan membahas bagaimana cara mengatur teks pada CSS menggunakan text spacing. Pengaturan text spacing pada CSS biasanya terdiri dari text indentation, letter spacing, line height, word spacing dan white spacing. Berikut akan dibahas lebih lanjut tentang cara penggunaan text spacing pada CSS.
Section Artikel
Text Indentation
Properti text-indent pada CSS digunakan untuk menentukan indentasi baris pertama teks, biasanya digunakan pada sebuah paragraf.
Contoh :
<!DOCTYPE html> <html> <head> <style> p { text-indent: 50px; } </style> </head> <body> <p> Dimasa muda dan masa rentanku, ayah memberiku nasihat yang terus aku pikirkan sejak saat itu. "Kapanpun kamu ingin mengkritik seseorang," katanya kepadaku, "ingatlah bahwa tidak setiap orang di dunia ini memiliki kelebihan seperti yang aku miliki." </p> </body> </html>
Letter Spacing
Properti letter-spacing pada CSS berfungsi untuk menentukan spasi antar karakter dalam teks.
Berikut ini adalah contoh yang menunjukkan cara menambah atau mengurangi spasi antar karakter:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
</body>
</html>
Line Height
Properti line-height pada CSS berfungsi untuk menentukan jarak antar baris perbaris. Agar lebih jelas berikut adalah contoh penerapannya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p>
Pragraf ini menggunakan jarak antar baris standar<br>
Kebanyakan browser memiliki jarak antar baris default kira-kira 110%-120%.<br>
</p>
<p class="small">
Paragraf ini menggunakan jarak antar baris lebih kecil.<br>
Paragraf ini menggunakan jarak antar baris lebih kecil.<br>
</p>
<p class="big">
Paragraf ini menggunakan jarak antar baris lebih besar.<br>
Paragraf ini menggunakan jarak antar baris lebih besar.<br>
</p>
</body>
</html>
Word Spacing
Properti word-spacing pada CSS digunakan untuk menentukan spasi atau jarak antar kata dalam teks.
Berikut ini adalah contoh yang menunjukkan bagaimana cara menambah atau mengurangi jarak antar kata menggunakan word spacing kata:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
</body>
</html>
White Spacing
Properti white-space pada CSS digunakan untuk menentukan bagaimana menangani elemen kosong (jarak enter) dalam sebuah kalimat.
Contoh di bawah ini akan menunjukkan cara menonaktifkan wrapping teks di dalam elemen, hapus properti white-space agar terlihat perbedaan antara paragraf yang menggunakan white-space dan tidak menggunakan white-space:
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White Space</h2>
<p>
ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks.
ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks.
ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks. ini adalah teks
</p>
<p>Hapuslah properti white-space agar terlihat perbedaannya.</p>
</body>
</html>
Sekian pembahasan dan contoh cara penggunan text spacing pada CSS, semoga bermanfaat.
