Cara Mengatur Text pada CSS

Pada tutorial ini kita akan mempelajari tentang cara mengatur text pada CSS seperti menerapkan shadow terhadap sebuah text, mengatur penjajaran paragraf apakah akan dibuat rata kiri/kanan/tengah/kiri-kanan, menambahkan dekorasi, dan memasukan indent. Untuk memahami lebih mendalam tentang apa itu Text pada CSS. Sekarang mari kita lihat fungsi dari fitur Text ini pada CSS, satu per satu :

Mengatur penjajaran text

Properti text-align digunakan untuk mengatur penjajaran teks/tulisan pada halaman web apakah rata kanan / rata kiri / rata tengah dan lainnya. Untuk lebih jelasnya perhatikan table keterangan di bawah ini.

Nilai Properti Keterangan
Center Mengatur penulisan menjadi rata – tengah.
Right Mengatur penulisan menjadi rata – kanan.
Left Mengatur penulisan menjadi rata – kiri.
Justify Mengatur penulisan menjadi rata – kanan – kiri.
Inherit Mengatur penulisan mengikuti elemen parent.

Di bawah ini adalah contoh dari kode sumber di atas :

Dan di bawah ini adalah hasil dari kode sumber di atas :

cara mengatur text pada css

Text Align Last

Property text-align-last digunakan untuk mengatur penjajaran terakhir pada tulisan sebuah halaman website. Keterangan dari nilai – nilai propertinya masing – masing adalah sebagai berikut :

Nilai Properti Keterangan
Auto Menyeting penjajaran baris terakhir penulisan ke nilai default.
Left Menyeting penjajaran baris terakhir penulisan ke rata – kiri.
Right Menyeting penjajaran baris terakhir penulisan ke rata – kanan.
Center Menyeting penjajaran baris terakhir penulisan ke rata – tengah.
Justify Menyeting penjajaran baris terakhir penulisan ke rata – kanan – kiri.
Start Menyeting penjajaran baris terakhir penulisan sesuai dengan penjajaran awalnya. Jika yang dipakai adalah penjajaran rata – kiri, itu berarti penulisan dimulai dari kiri ke kanan, maka yang digunakan adalah kiri. Namun, bila dimulai dari kanan ke kiri, maka yang digunakan adalah kanan.
End Konsepnya sama seperti nilai property start, namun bedanya start dimulai dari awal tipe penjajaran (kiri ke kanan yang digunakan adalah kiri), nilai properti end dimulai dengan akhir dari tipe penjajaran (kiri ke kanan yang digunakan adalah kanan).

Dan di bawah ini adalah hasil dari kode sumber di atas :

Cara Mengatur Text pada CSS

Memberikan dekorasi pada text

Properti text-decoration digunakan untuk memberikan dekorasi pada teks yang terkait.

Nilai Properti Keterangan
None Menghilangkan garis pada Teks. Nilai Properti ini biasa digunakan untuk menghilangkan garis bawah pada teks hyperlink.
Overline Memberi garis pada teks pada bagian atas.
Line-through Memberi garis pada teks pada bagian tengah teks tersebut. Sehingga teks terlihat tercoret.
Underline Memberi garis bawah pada teks.
Inherit Pemberian garis pada teks mengikuti elemen induk/parent.

Dan di bawah ini adalah hasil dari kode sumber di atas :

Text Decoration pada CSS

Memberikan indent pada text

Property text-indent menspesifikasikan indentasi / spasi / jarak teks. Teks indent ini umumnya digunakan dalam hal pembuatan paragraf. Perubahan tampak pada kalimat pertama dalam paragraf. Dalam menentukan jaraknya, satuan yang diberikan dapat berupa nilai em atau % atau px atau cm dll.

Di bawah ini adalah contoh dari kode sumber di atas :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Text Indent pada CSS

Text Overflow

Property text-overflow digunakan untuk menentukan apa yang akan terjadi pada sebuah teks apabila melebihi batas bingkai / border yang dipasangkan padanya. Andai saja panjang box 200 sementara panjang teks lebih dari 200 maka akan terjadi potongan/clipping pada teks tersebut. Property text-overflow lebih bekerja maksimal pada browser Mozilla Firefox.

Contoh Kode Sumber :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Text Overflow pada CSS

Memberikan shadow pada text

Properti text-shadow digunakan untuk memberikan bayangan pada sebuah teks. Dalam mendefinisikannya anda harus memasukan kordinat x, kordinat y dan kordinat z (disebut juga radius blur) dan warna pada nilai propertinya.

Pemberian kordinat – kordinat ini wajib, terutama kordinat x (sebagai horizontal) dan kordinat y (sebagai vertical). Sementara kordinat z hanya warna opsional.

Di bawah ini adalah contoh kode sumbernya :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Text Shadow pada CSS

Text Transform

Properti text-transform digunakan untuk menentukan bagaimana teks akan ditampilkan, apakah semuanya akan ditampilkan huruf besar / huruf kecil semua, atau hanya pada kata depannya saja.

Dalam contoh ini akan saya berikan teks dalam bentuk huruf kecil semua.

Dan di bawah ini adalah hasil dari kode sumber di atas :

Text Transform pada CSS


Demikian tutorial dari Cara Mengatur Text pada CSS, silahkan kunjungi tutorial CSS lainnya seperti cara mengatur margin pada css, fungsi dari padding pada css, apa itu konsep box model pada CSS.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us