Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 6 : Cara Menggunakan Properti Font di CSS, selanjutnya kita akan belajar cara menggunakan properti text di CSS.
Pada tutorial ini, kita akan mempelajari bagaimana memanipulasi teks menggunakan properti CSS.
Anda dapat mengatur properti teks berikut dari sebuah elemen HTML :
- Properti color digunakan untuk mengatur warna teks.
- Properti direction digunakan untuk mengatur arah teks.
- Properti letter-spacing digunakan untuk menambah atau mengurangi spasi di antara huruf-huruf yang membentuk sebuah kata.
- Properti word-spacing digunakan untuk menambah atau mengurangi spasi di antara kata-kata dalam kalimat.
- Properti text-indent digunakan untuk membuat indentasi teks paragraf.
- Properti text-align digunakan untuk meratakan teks dokumen.
- Properti text-decoration digunakan untuk menggarisbawahi, menggarisbawahi, dan mencoret teks.
- Properti text-transform digunakan untuk mengubah teks menjadi huruf besar atau mengubah teks menjadi huruf besar atau kecil.
- Properti white-space digunakan untuk mengontrol aliran dan pemformatan teks.
- Properti text-shadow digunakan untuk mengatur bayangan teks di sekitar teks.
Mengatur Warna Teks
Contoh berikut menunjukkan cara mengatur warna teks.
Nilai yang biasanya digunakan dapat berupa nama warna apa pun dalam format apa pun yang valid.
<html>
<head>
</head>
<body>
<p style = "color:red;">
Kalimat ini akan berwarna merah.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Arah Teks
Contoh berikut menunjukkan cara mengatur arah teks. Nilai yang biasanya digunakan adalah ltr atau rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
Kalimat ini akan dituliskan dari kanan ke kiri
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Spasi di antara Karakter
Contoh berikut menunjukkan cara mengatur spasi antar karakter. Nilai yang biasanya digunakan adalah normal atau angka yang menentukan spasi.
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
Kalimat ini memiliki spasi sebesar 5px diantara karakter.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Spasi antar Kata
Contoh berikut menunjukkan cara mengatur spasi antar kata. Nilai yang biasanya digunakan adalah normal atau angka yang menentukan spasi.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
Kalimat ini memiliki spasi 5px antar kata.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Indent Text
Contoh berikut menunjukkan cara membuat indentasi baris pertama paragraf. Nilai yang biasanya digunakan adalah % atau angka yang menentukan spasi indentasi.
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
Kalimat ini memiliki jarak antar paragraph 1cm pada baris pertama. Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Perataan Teks
Contoh berikut menunjukkan cara meratakan teks. Nilai yang biasanya digunakan adalah left, right, center, justify.
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
Ini adalah tulisan rata kanan.
</p>
<p style = "text-align:center;">
Ini adalah tulisan rata tengah.
</p>
<p style = "text-align:left;">
Ini adalah tulisan rata kiri.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Menghias Teks
Contoh berikut menunjukkan cara menghias teks. Nilai yang biasanya digunakan adalah none, underline, overline, line-through, blink.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
Tulisan ini akan digarisbawahi
</p>
<p style = "text-decoration:line-through;">
Tulisan ini akan digariscoret.
</p>
<p style = "text-decoration:overline;">
Tulisan ini akan coret atas.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Text Case
Contoh berikut menunjukkan cara mengatur text case. Nilai yang biasanya digunakan adalah none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
Tulisan ini di capitalize
</p>
<p style = "text-transform:uppercase;">
Tulisan ini menggunakan uppercase
</p>
<p style = "text-transform:lowercase;">
Tulisan ini menggunakan lowercase
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Mengatur Spasi di antara Teks
Contoh berikut menunjukkan bagaimana membuat spasi di dalam elemen. Nilai yang biasanya digunakan adalah normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
Kalimat ini memiliki line break dan spasi pre setting
Beritahu browser memperlakukannya seperti tag pre HTML.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Text Shadow
Contoh berikut menunjukkan cara mengatur bayangan di sekitar teks. Properti ini mungkin tidak didukung oleh semua browser.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
Jika browser Anda mendukung property CSS text-shadow,
Kalimat ini akan memiliki bayangan berwarna biru.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda mempelajari cara menggunakan properti text di CSS untuk memperindah gaya tulisan di dokumen HTML.
