Masih dilingkup tutorial css dasar, kali ini yang akan kita bahas adalah bagaimana cara mengatur teks pada css, di css sendiri memikili beberapa properti untuk mengatur teks pada css agar menjadi sesuai yang keperluan kita. Bagian dari tutorial ini sangat penting, karna sebuah website adalah sekumpulan teks sebagai informasi untuk pengguna internet.
Mengatur Teks Pada CSS
Dasar mengatur teks pada css biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.
| Properti | Keterangan |
|---|---|
| color | Properti color digunakan untuk mengubah warna text |
| direction | Properti direction digunakan untuk menentukan posisi text |
| letter-spacing | Properti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kata |
| word-spacing | Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimat |
| text-indent | Properti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat |
| text-align | Properti text-align digunakan untuk mengatur posisi atau perataan text |
| text-decoration | Properti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada teks |
| text-transform | Properti text-transform digunakan untuk mengatur huruf besar atau kecil |
| white-space | Properti white-space digunakan untuk mengatur jarak enter sebuah kalimat |
| text-shadow | Properti text-shadow untuk membuat bayangan pada teks |
Properti-properti diatas akan kita bahas satu-persatu, penulis berharap pembaca sambil mempraktekan tutorial ini langsung, agar tahu bagaimana sebuah teks dapat dimanipulasi dengan sintaks css.
Mengubah Warna Teks Pada CSS
Untuk dapat mengubah warna teks pada css yaitu dengan cara menggunakan properti color, pada tutorial sebelumnya telah disediakan metode menggunakan warna pada css. Berikut ini contoh kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>Mengubah warna text pada css</p>
</body>
</html>Code language: HTML, XML (xml)Kode diatas untuk mengubah warna teks menjadi warna merah yang diarahkan ke selector p, berikut ini tampilan dari hasil kode diatas.
Mengatur Posisi Teks Pada CSS
Untuk mengatur posisi teks pada css yaitu dengan menggunakan properti direction, dalam properti direction ini hanya memiliki dua nilai, yaitu ltr (left to right) dan rtl (right to left), yang dimaksud posisi properti direction ini adalah posisi teks apakah berada dikanan atau dikiri. Berikut ini contoh kodenya.
<style type="text/css">
p {
direction: rtl;
}
</style>Code language: HTML, XML (xml)Kode diatas hanya menggunakan nilai rtl, dimana teks akan berada dibagian kanan browser, secara default nilai direction meksipun tidak didefinisikan akan bernilai ltr.
Mengatur Jarak Antara Huruf Dengan CSS
Untuk dapat mengatur jarak antara huruf pada sebuah kata yaitu dengan cara menggunakan properti letter-spacing, kita meskipun secara bawaan huruf pada sebuah halaman html sudah sangat baik, hanya saja pada bagian desain kadang-kadang memiliki aturannya sendiri, berikut ini contoh kodenya.
<style type="text/css">
p {
letter-spacing: 10px;
}
</style>Code language: HTML, XML (xml)Dari kode diatas berikut ini hasilnya…
Mengatur Jarak Spasi Antara Kata
Untuk dapat mengatur jarak spasi antara kata yaitu dengan menggunakan properti word-spacing, kadang spasi antara kata pada dokumen html tidak sesuai dengan yang kita inginkan, kita dapat menggunakan properti word-spacing tanpa menggunakan tombol spasi berkali-kali. Berikut ini kodenya.
<style type="text/css">
p {
word-spacing: 10px;
}
</style>Code language: HTML, XML (xml)Dari kode diatas maka akan menghasilkan tampilan seperti dibawah ini…
Mengatur Teks Jarak Kiri Pada Kata Pertama
Teks indent pada perangkat lunak office sering kita gunakan, yaitu untuk mengatur jarak pada bagian kiri kalimat pertama. Jika di css yaitu dengan menggunakan properti text-indent, berikut ini contoh kodenya.
<style type="text/css">
p {
text-indent: 40px;
}
</style>Code language: HTML, XML (xml)Berikut ini tampilan dari kode diatas…
Mengatur Posisi Perataan Teks Pada CSS
Layaknya diperangkat lunak office, anda dapat mengatur perataan teks seperti rata tengah, rata kanan, rata kiri, dan sama rata, begitupun dalam html kita membutuhkan posisi perataan text pada dokumen html ini. Jika di css yaitu dengan menggunakan properti text-align. Berikut ini contohnya.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
.rata-kiri {
text-align: left;
}
.rata-kanan {
text-align: right;
}
.rata-tengah {
text-align: center;
}
.sama-rata {
text-align: justify;
}
</style>
</head>
<body>
<strong>Rata Kiri</strong>
<p class="rata-kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Rata Kanan</strong>
<p class="rata-kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Rata Tengah</strong>
<p class="rata-tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<strong>Sama Rata</strong>
<p class="sama-rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>Code language: HTML, XML (xml)Berikut ini tampilan kode diatas…
Mengatur Dekorasi Teks Pada CSS
Untuk dapat mengatur dekorasi pada teks yaitu dengan menggunakan text-decoration, dekorasi pada teks maksudnya seperti menambahkan garis bawah, efek coret pada teks atau efek blink. Berikut ini contoh kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
.garis-bawah {
text-decoration: underline;
}
.coret {
text-decoration: line-through;
}
.garis-atas {
text-decoration: overline;
}
.blink {
text-decoration: blink;
}
</style>
</head>
<body>
<strong>Garis Bawah</strong>
<p class="garis-bawah">Lorem ipsum dolor sit amet</p>
<strong>Efek Coret</strong>
<p class="coret">Lorem ipsum dolor sit amet</p>
<strong>Garis Atas</strong>
<p class="garis-atas">Lorem ipsum dolor sit amet</p>
<strong>Efek Blink</strong>
<p class="blink">Lorem ipsum dolor sit amet</p>
</body>
</html>Code language: HTML, XML (xml)Berikut ini contoh tampilan dari kode diatas…
Mengatur Besar Kecil Huruf Pada CSS
Untuk dapat mengatur besar kecilnya huruf di css yaitu dengan menggunakan properti text-transform, dimana text-transform ini memiliki beberapa nilai antara lain, uppercase, lowercase dan capitalize. Jika pada uppercase seluruh teks akan menjadi huruf besar, sebaliknya dengan lowercase seluruh teks akan menjadi kecil, namun pada capitalize huruf awal setiap kata akan menjadi huruf besar. Beribut ini contoh kodenya.
<!DOCTYPE html>
<html>
<head>
<title>Mengatur Teks Pada CSS</title>
<style type="text/css">
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<strong>Uppercase</strong>
<p class="uppercase">Lorem ipsum dolor sit amet</p>
<strong>Lowercase</strong>
<p class="lowercase">Lorem ipsum dolor sit amet</p>
<strong>Capitalize</strong>
<p class="capitalize">Lorem ipsum dolor sit amet</p>
</body>
</html>Code language: HTML, XML (xml)Dari kode diatas berikut ini tampilan pada browser…
Mengatur White Space Pada CSS
Untuk mengatur white space pada css yaitu dengan menggunakan properti white-space. Pada properti white-space memiliki beberapa nilai antara lain, pre, nowrap, dan normal. Meski secara default di browser sudah normal. Berikut ini contohnya.
<style type="text/css">
p {
white-space: pre;
}
</style>Code language: HTML, XML (xml)Dinilai pre bisa anda ganti dengan beberapa nilai yang tadi penulis sudah sebutkan.
Mengatur Shadow Atau Bayangan Pada Teks
Mengatur bayangan pada teks atau shadow bisa dengan menggunakan properti text-shadow yang memang sudah tersedia di dalam css, hanya tinggal menyesuaikannya saja agar sesuai dengan yang kita inginkan. Berikut ini contoh kodenya.
<style type="text/css">
p {
text-shadow: 1px 1px 9px black;
}
</style>Code language: HTML, XML (xml)Hasil dari kode diatas seperti dibawah ini…
Demikianlah tutorial untuk mengatur teks pada css, dari sekian banyak properti teks yang bisa digunakan semoga dengan tutorial ini dapat lebih mempermudah penggunaan masing-masing properti yang dibutuhkan untuk membangun website anda.
