Cara Mengatur Format Teks dengan CSS
….
Isi Konten
Cara Merubah Warna Teks dengan CSS
Teks pada halaman website bisa diubah warnanya dengan menggunakan properti CSS color.
Warna yang diterapkan pada teks menggunakan properti color juga diterapkan pada dekorasi teks yang menggunakan properti text-decoration seperti underlines, upperlines, line-throughs, dll.
Property color bisa menggunakan nilai berupa:
- Keyword warna, seperti: red, blue, yellow, dll.
- Notasi angka hexadesimal, seperti #99FFAA.
- Nilai desimal RGB seperti rgb(0, 160, 255) atau rgb(0%, 63%, 100%)
Contoh:
h2 {
color: #a0aec0;
}
p {
color: #2196f3;
}
Baca juga penjelasan lengkap tentang referensi properti color.
Cara Mengatur Rata Teks di HTML dengan CSS
Kamu bisa mengatur rata teks di HTML dengan menggunakan properti CSS text-align.
Properti text-align ini memiliki 4 nilai, yaitu: left, right, center, dan justify.
Mengatur Rata Teks Kiri
Untuk mengatur rata teks kiri, kamu bisa menggunakan properti text-align dengan nilai left.
p {
text-align: left;
}
Mengatur Rata Teks Kanan
Untuk mengatur rata teks kanan, kamu bisa menggunakan properti text-align dengan nilai right.
p {
text-align: right;
}
Mengatur Rata Teks Tengah
Untuk mengatur rata teks tengah, kamu bisa menggunakan properti text-align dengan nilai center.
p {
text-align: center;
}
Mengatur Teks Rata Kanan dan Kiri
Untuk mengatur teks rata kanan dan kiri, kamu bisa menggunakan properti text-align dengan nilai justify.
Namun efek justify ini akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang.
Hal ini bisa membuat tulisan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil.
Efek justify lebih cocok untuk digunakan pada media cetak seperti buku atau majalah.
p {
text-align: justify;
}
Membuat Teks Underline, Overline, dan Line-through
Untuk membuat teks dengan efek garis bawah (underline), garis atas (overline), dan teks tercoret (line-through), kamu bisa menggunakan properti CSS text-decoration.
Dan untuk menghapus efek garis bawah, garis atas, atau teks tercoret, kamu bisa menggunakan nilai none pada properti text-decoration.
Contoh teks underline:
p {
text-decoration: underline;
}
Contoh teks overline:
p {
text-decoration: overline;
}
Contoh teks tercoret:
p {
text-decoration: line-through;
}
Cara Mengubah Format Teks
Untuk mengubah tampilan teks HTML menjadi huruf besar, huruf kecil, dan huruf kapital, kamu bisa menggunakan properti CSS text-transform.
Mengubah Tampilan Teks Menjadi Huruf Besar
Kamu bisa menggunakan properti text-transform dengan nilai uppercase untuk mengubah teks menjadi huruf besar.
<p>Teks paragraf dengan huruf besar</p>
p {
text-transform: uppercase;
}
Mengubah Tampilan Teks Menjadi Huruf Kecil
Kamu bisa menggunakan properti text-transform dengan nilai lowercase untuk mengubah teks menjadi huruf kecil.
<p>Teks paragraf dengan huruf kecil</p>
p {
text-transform: lowercase;
}
Mengubah Tampilan Teks Menjadi Huruf Kapital
Kamu bisa menggunakan properti text-transform dengan nilai capitalize untuk mengubah teks menjadi huruf kapital.
<p>Teks paragraf dengan huruf kapital</p>
p {
text-transform: capitalize;
}
Cara Membuat Teks Indent
Teks indent atau teks yang bagian awal paragraf lebih menjorok ke dalam biasa dijumpai pada media cetak seperti majalah atau koran.
Untuk menggunakan efek teks indent pada halaman HTML, kamu bisa menggunakan properti CSS text-indent.
Contoh:
<p>Teks paragraf dengan efek indent 50px. In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
p {
text-indent: 50px;
}
Cara Mengatur Lebar atau Spasi antar Huruf dengan CSS
Untuk mengatur spasi atau jarak antar huruf, kamu bisa menggunakan properti CSS letter-spacing.
Nilai yang digunakan pada properti ini bisa berupa pixel, persen, em, atau satuan ukuran teks lainnya.
Jika kamu memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh.
Sebaliknya jika kamu memberikan nilai negatif untuk letter-spacing, spasi antar karakter akan semakin berdekatan.
Contoh:
<p>Teks dengan spasi karakter normal</p>
<p class="plus">Teks dengan spasi karakter positif</p>
<p class="minus">Teks dengan spasi karakter negatif</p>
.plus {
letter-spacing: 3px;
}
.minus {
letter-spacing: -3px;
}
Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).
Baca juga penjelasan lengkap tentang referensi properti letter-spacing.
Cara Mengatur Lebar atau Spasi antar Kata dengan CSS
Untuk mengatur spasi atau jarak antar kata, kamu bisa menggunakan properti CSS word-spacing.
Nilai yang digunakan pada properti ini bisa berupa pixel, persen, em, atau satuan ukuran teks lainnya.
Jika kamu memberikan nilai positif untuk word-spacing, spasi antar kata akan semakin menjauh.
Sebaliknya jika kamu memberikan nilai negatif untuk word-spacing, spasi antar kata akan semakin berdekatan.
Contoh:
<p>Teks dengan spasi kata normal</p>
<p class="word__plus">Teks dengan spasi kata positif</p>
<p class="word__minus">Teks dengan spasi kata negatif</p>
.word__plus {
word-spacing: 20px;
}
.word__minus {
word-spacing: -30px;
}
Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).
Baca juga penjelasan lengkap tentang referensi properti word-spacing.
Cara Mengatur Tinggi Baris dalam Paragraf HTML (line-height)
Apa yang dimaksud tinggi baris dalam paragraf ini?
Tinggi baris atau line-height adalah besar jarak antara satu baris teks dengan baris dibawahnya.
Pengaturan line-height yang tepat pada halaman website bisa membuat tulisan lebih nyaman untuk dibaca.
Biasanya para pengunjung website lebih suka membaca artikel yang jarak antar barisnya agak longgar karena bisa membuat mata tidak mudah lelah.
Untuk mengatur line-height, kamu bisa menggunakan properti CSS line-height.
Properti ini bisa diberi nilai em, rem, px, persen atau angka (tanpa satuan).
Warna pada elemen berikut menunjukkan tinggi baris teks paragraf.
Contoh:
p {
line-height: 16px;
}
Cara Menghitung Jarak Antar Baris
Untuk mengetahui jarak antar baris bisa dilakukan dengan cara menghitung selisih ukuran font dengan nilai line-height.
Misalnya, jika paragraf memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris bisa dihitung berdasarkan rumus berikut: 18px-14px.
Sehingga jarak antar barisnya yaitu 4px.
Jarak antar baris ini disebut juga dengan istilah leading.
Selain satuan pixel, persen, em, dan rem, line-height juga memiliki satuan khusus yang digunakan untuk menentukan nilainya. yaitu dengan angka (tanpa satuan).
Contoh:
p {
line-height: 1.5;
}
Cara perhitungan hasil leading dari penulisan line-height ini mirip seperti menggunakan nilai persen.
Jadi line-height: 1.5 akan menghasilkan nilai yang sama dengan line-height: 150%.
Misalnya, nilai line-height: 1.5 pada teks yang berukuran 14px, maka nilai line-height akan menjadi 150%*14px=21px.
Sehingga jarak antar baris pada kasus ini adalah 21px-14px=7px.