Anak Males – Kali ini kita akan belajar text formatting di css. Ok, jadi setelah kita belajar tentang cara mengatur warna dan latar belakang, sekarang kita akan belajar tentang cara mengatur teks.
Ini penting banget sih, karena teks itu element yang paling banyak dipakai di halaman web. Ada beberapa properti CSS yang bisa kita gunakan buat nyetel teks, kayak text-align, text-decoration, text-transform, text-spacing, dan text-shadow.
Okelah mungkin kita bisa mulai.
1. Text Align di CSS
Text align adalah salah satu properti CSS yang digunakan untuk mengatur penyelarasan teks dalam sebuah elemen. Ini memungkinkan Anda untuk menentukan apakah teks akan dibayangkan ke kiri, tengah, atau kanan dalam elemen tersebut.
Untuk menggunakan properti text-align, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-align meliputi:
- left: menyelaraskan teks ke kiri
- right: menyelaraskan teks ke kanan
- center: menyelaraskan teks ke tengah
- justify: menyelaraskan teks ke kiri dan kanan dengan mengisi spasi di antara kata-kata dengan spasi yang sama sehingga teks terlihat rata di kedua sisi
Contoh penggunaan text-align dalam CSS adalah seperti ini:
p {
text-align: center;
}
Ini akan menyelaraskan teks dalam setiap elemen paragraf <p> ke tengah. Anda juga dapat menggunakan text-align untuk mengatur penyelarasan teks dalam elemen lain seperti div, header, dan lain-lain.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-align.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.left {
text-align: left;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
p.justify {
text-align: justify;
}
</style>
</head>
<body>
<p class="left">Ini adalah paragraf yang dibayangkan ke kiri.</p>
<p class="center">Ini adalah paragraf yang dibayangkan ke tengah.</p>
<p class="right">Ini adalah paragraf yang dibayangkan ke kanan.</p>
<p class="justify">Ini adalah paragraf yang dibayangkan ke kiri dan kanan dengan mengisi spasi di antara kata-kata dengan spasi yang sama sehingga teks terlihat rata di kedua sisi.</p>
</body>
</html>
2. Text Direction
Text Direction adalah salah satu properti CSS yang digunakan untuk mengatur arah penulisan teks dalam sebuah elemen. Ini memungkinkan Anda untuk menentukan apakah teks akan ditulis dari kiri ke kanan (LTR) atau dari kanan ke kiri (RTL).
Untuk menggunakan properti text-direction, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-direction meliputi:
- ltr: menentukan bahwa teks akan ditulis dari kiri ke kanan
- rtl: menentukan bahwa teks akan ditulis dari kanan ke kiri
Contoh penggunaan text-direction dalam CSS adalah seperti ini:
p {
text-direction: rtl;
}
Ini akan mengatur teks dalam setiap elemen paragraf <p> untuk ditulis dari kanan ke kiri. Anda juga dapat menggunakan text-direction untuk mengatur arah penulisan teks dalam elemen lain seperti div, header, dan lain-lain.
Perlu diperhatikan bahwa properti text-direction hanya berlaku untuk teks yang ditulis dalam bahasa yang menggunakan penulisan dari kanan ke kiri, seperti bahasa Arab, Ebre, dan lain-lain. Untuk teks dalam bahasa yang menggunakan penulisan dari kiri ke kanan, seperti bahasa Inggris, properti ini tidak akan memiliki efek apapun.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-direction.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.ltr {
text-direction: ltr;
}
p.rtl {
text-direction: rtl;
}
</style>
</head>
<body>
<p class="ltr">Ini adalah paragraf yang ditulis dari kiri ke kanan.</p>
<p class="rtl">Ini adalah paragraf yang ditulis dari kanan ke kiri.</p>
</body>
</html>
3. Text Decoration
Text Decoration adalah salah satu properti CSS yang digunakan untuk menambahkan efek penghias pada teks dalam sebuah elemen. Ini memungkinkan Anda untuk menambahkan garis bawah, garis tengah, atau garis di atas teks, atau untuk menghilangkan garis bawah yang sudah ada pada teks.
Untuk menggunakan properti text-decoration, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-decoration meliputi:
- none: menghilangkan garis bawah yang sudah ada pada teks
- underline: menambahkan garis bawah di bawah teks
- overline: menambahkan garis di atas teks
- line-through: menambahkan garis tengah melalui teks
Contoh penggunaan text-decoration dalam CSS adalah seperti ini:
a {
text-decoration: underline;
}
ni akan menambahkan garis bawah di bawah setiap elemen hyperlink <a>. Anda juga dapat menggunakan text-decoration untuk menambahkan efek penghias pada teks dalam elemen lain seperti paragraf, div, dan lain-lain.
Perlu diperhatikan bahwa properti text-decoration hanya akan memiliki efek apabila teks tersebut memiliki garis bawah atau garis di atasnya. Jika teks tersebut tidak memiliki garis bawah atau garis di atasnya, maka properti ini tidak akan memiliki efek apapun.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-decoration.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.none {
text-decoration: none;
}
p.underline {
text-decoration: underline;
}
p.overline {
text-decoration: overline;
}
p.line-through {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="none">Ini adalah paragraf yang tidak memiliki garis bawah.</p>
<p class="underline">Ini adalah paragraf yang memiliki garis bawah di bawah teks.</p>
<p class="overline">Ini adalah paragraf yang memiliki garis di atas teks.</p>
<p class="line-through">Ini adalah paragraf yang memiliki garis tengah melalui teks.</p>
</body>
</html>
Dalam contoh di atas, terdapat empat elemen paragraf <p> yang masing-masing memiliki class yang menentukan efek penghias teksnya. Class tersebut kemudian diatur menggunakan aturan CSS di dalam elemen <style> yang ada di dalam head.
4. Text Transform
Text Transform adalah salah satu properti CSS yang digunakan untuk mengubah bentuk teks dalam sebuah elemen. Ini memungkinkan Anda untuk mengubah teks menjadi huruf besar (uppercase), huruf kecil (lowercase), atau huruf kapital (capitalize) di awal kata.
Untuk menggunakan properti text-transform, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-transform meliputi:
- none: tidak mengubah bentuk teks
- uppercase: mengubah teks menjadi huruf besar
- lowercase: mengubah teks menjadi huruf kecil
- capitalize: mengubah huruf pertama dari setiap kata menjadi huruf kapital
Contoh penggunaan text-transform dalam CSS adalah seperti ini:
h1 {
text-transform: uppercase;
}
Ini akan mengubah teks dalam setiap elemen heading level 1 <h1> menjadi huruf besar. Anda juga dapat menggunakan text-transform untuk mengubah bentuk teks dalam elemen lain seperti paragraf, div, dan lain-lain.
Perlu diperhatikan bahwa properti text-transform hanya akan memiliki efek pada teks yang ada dalam elemen tersebut. Jika Anda menambahkan teks baru ke dalam elemen tersebut, teks tersebut akan mengikuti bentuk teks yang sudah ada sebelumnya, dan bukan bentuk yang diatur oleh properti text-transform.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-transform.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.none {
text-transform: none;
}
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="none">Ini adalah paragraf yang tidak mengubah bentuk teks.</p>
<p class="uppercase">Ini adalah paragraf yang mengubah teks menjadi huruf besar.</p>
<p class="lowercase">Ini adalah paragraf yang mengubah teks menjadi huruf kecil.</p>
<p class="capitalize">Ini adalah paragraf yang mengubah huruf pertama dari setiap kata menjadi huruf kapital.</p>
</body>
</html>
Dalam contoh di atas, terdapat empat elemen paragraf <p> yang masing-masing memiliki class yang menentukan bentuk teksnya. Class tersebut kemudian diatur menggunakan aturan CSS di dalam elemen <style> yang ada di dalam head.
5. Text Spacing
Text Spacing adalah salah satu properti CSS yang digunakan untuk mengatur jarak spasi di antara karakter-karakter dalam sebuah elemen. Ini memungkinkan Anda untuk menambahkan atau mengurangi spasi di antara karakter-karakter teks sesuai dengan kebutuhan.
Untuk menggunakan properti text-spacing, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-spacing meliputi:
- normal: menentukan jarak spasi normal di antara karakter-karakter teks
- <length>: menentukan jarak spasi yang diinginkan dalam satuan ukuran tertentu, seperti pixel atau em
- <percentage>: menentukan jarak spasi yang diinginkan sebagai persentase dari ukuran font yang digunakan
Contoh penggunaan text-spacing dalam CSS adalah seperti ini:
p {
text-spacing: 1em;
}
Ini akan menambahkan jarak spasi sebesar 1 em di antara karakter-karakter teks dalam setiap elemen paragraf <p>. Anda juga dapat menggunakan text-spacing untuk mengatur jarak spasi dalam elemen lain seperti heading, div, dan lain-lain.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-spacing.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.normal {
text-spacing: normal;
}
p.one-em {
text-spacing: 1em;
}
p.two-percent {
text-spacing: 200%;
}
</style>
</head>
<body>
<p class="normal">Ini adalah paragraf yang menggunakan jarak spasi normal.</p>
<p class="one-em">Ini adalah paragraf yang menambahkan jarak spasi sebesar 1 em di antara karakter-karakter teks.</p>
<p class="two-percent">Ini adalah paragraf yang menambahkan jarak spasi sebesar 200% dari ukuran font yang digunakan di antara karakter-karakter teks.</p>
</body>
</html>
Dalam contoh di atas, terdapat tiga elemen paragraf <p> yang masing-masing memiliki class yang menentukan jarak spasi teksnya. Class tersebut kemudian diatur menggunakan aturan CSS di dalam elemen <style> yang ada di dalam head.
6. Text Overflow
Text Overflow adalah salah satu properti CSS yang digunakan untuk mengatur bagaimana teks akan ditampilkan apabila tidak muat dalam elemen yang sudah ditentukan. Ini memungkinkan Anda untuk menampilkan tanda tambah (“…”) atau teks lainnya di akhir teks yang tidak muat, atau untuk menampilkan teks tersebut dengan menggulungnya ke baris baru.
Untuk menggunakan properti text-overflow, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-overflow meliputi:
- clip: menampilkan tanda tambah (“…”) di akhir teks yang tidak muat
- ellipsis: menampilkan tanda tambah (“…”) di akhir teks yang tidak muat
- string: menampilkan string yang diinginkan di akhir teks yang tidak muat
- <ident>: menampilkan elemen HTML yang diinginkan di akhir teks yang tidak muat
Contoh penggunaan text-overflow dalam CSS adalah seperti ini:
p {
overflow: hidden;
text-overflow: ellipsis;
}
Ini akan menampilkan tanda tambah (“…”) di akhir teks yang tidak muat dalam setiap elemen paragraf <p>. Anda juga dapat menggunakan text-overflow untuk mengatur tampilan teks yang tidak muat dalam elemen lain seperti div, span, dan lain-lain.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-overflow.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
p.custom {
overflow: hidden;
text-overflow: " (lihat selengkapnya)";
}
</style>
</head>
<body>
<p class="ellipsis">Ini adalah paragraf yang menampilkan tanda tambah ("...") di akhir teks yang tidak muat.</p>
<p class="custom">Ini adalah paragraf yang menampilkan string " (lihat selengkapnya)" di akhir teks yang tidak muat.</p>
</body>
</html>
Dalam contoh di atas, terdapat dua elemen paragraf <p> yang masing-masing memiliki class yang menentukan bagaimana teks yang tidak muat akan ditampilkan. Class tersebut kemudian diatur menggunakan aturan CSS di dalam elemen <style> yang ada di dalam head.
7. Text Shadow
Text Shadow adalah salah satu properti CSS yang digunakan untuk menambahkan bayangan teks ke dalam sebuah elemen. Ini memungkinkan Anda untuk menambahkan efek bayangan yang terpisah dari elemen yang menampung teks tersebut, sehingga memberikan kesan kedalaman pada teks tersebut.
Untuk menggunakan properti text-shadow, Anda bisa menambahkannya ke dalam aturan CSS Anda dan memberikannya nilai yang diinginkan. Nilai-nilai yang biasa digunakan untuk text-shadow meliputi:
- <offset-x> <offset-y> <blur-radius> <color>: menentukan koordinat X dan Y dari bayangan teks, radius blur, dan warna bayangan teks
- none: tidak menampilkan bayangan teks
Contoh penggunaan text-shadow dalam CSS adalah seperti ini:
h1 {
text-shadow: 2px 2px 4px #444;
}
Ini akan menambahkan bayangan teks dengan jarak offset 2 pixel ke kanan dan 2 pixel ke bawah, radius blur 4 pixel, dan warna bayangan #444 (hitam) ke dalam setiap elemen heading level 1 <h1>. Anda juga dapat menggunakan text-shadow untuk menambahkan bayangan teks pada elemen lain seperti paragraf, div, dan lain-lain.
Biar lebih jelas, mari kita coba latihan.
Buatlah file baru dengan nama text-shadow.html, kemudian isi dengan kode berikut:
<html>
<head>
<style>
p {
text-shadow: 2px 2px 4px #444;
}
</style>
</head>
<body>
<p>Ini adalah paragraf yang menampilkan bayangan teks.</p>
</body>
</html>
Dalam contoh di atas, terdapat sebuah elemen paragraf <p> yang menggunakan aturan CSS untuk menampilkan bayangan teks dengan jarak offset 2 pixel ke kanan dan 2 pixel ke bawah, radius blur 4 pixel, dan warna bayangan #444 (hitam).
Penutup
Baiklah, mungkin hanya itu saja tutorial css kali ini, sampai jumpa di tutorial berikutnya.