CSS : Format Teks Dengan CSS

assalamualaikum wr. wb.
Postingan hari ini saya akan berbagi tentang formatting teks dengan CSS, ada beberapa cara untuk merubah penampilan teks di web browser.

A. Mengatur warna teks
Properti yang digunakan untuk mengatur warna teks adalah properti color. Warna yang sering digunakan dalam CSS biasanya adalah :

• Nama warna : "red"
• Nilai HEX : "#fff000"
• Nilai RGB : "rgb(255,0,0)"

Cara penulisannya yaitu - color: blue;
Membuat teks menjadi warna hijau dan biru :

Script yang dituliskan adalah :

B. Alignment Teks
Properti text-align digunakan untuk mengatur alignment horizontal teks. Alignment dalam teks dapat align left, right, center dan justify.
Berikut adalah gambar hasil di browser saat kita mengatur perataan teks :

Script untuk hasil diatas adalah :

• text-align: center;

Perataan text menjadi rata tengah

• text-align: left;

Perataan teks menjadi rata kiri

• text-align: right;

Perataan teks menjadi rata kanan

• text-align: justify;

Perataan teks menjadi rata kanan-kiri atau setiap baris meregang sehingga memiliki lebar yang sama, dan kiri dan kanan margin lurus (seperti di majalah dan koran)


C. Dekorasi Teks
Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks.

text-decoration: none; sering digunakan untuk menghilangkan garis bawah dari link.
Beberapa contoh dekorasi teks lain adalah sebagai berikut :

Script untuk dekorasi teks diatas adalah :

D. Transformasi Teks
text-transform digunakan untuk menentukan huruf besar dan kecil dalam teks.

Contoh menggunakan properti text-transform :

Hasilnya di web browser adalah :

Uppercase - untuk mengubah semua huruf menjadi huruf besar
Lowercase - untuk mengubah semua huruf menjadi huruf kecil
Capitalize - untuk mengubah huruf depan setiap kata menjadi huruf kapital


E. Menambah Indentasi Teks Pada Paragraf
text-indent digunakan untuk menentukan indentasi dari baris pertama sebuah paragraf.
Contoh dibawah ini menggunakan text-indent: 50px;

F. Letter Spacing
letter-spacing digunakan untuk menentukan ruang antara karakter dalam teks.
Contoh menggunakan letter-spacing adalah seperti di bawah ini :

Letter spacing yang ditulis adalah

h1 {
    letter-spacing: 5px;
}

h2 {
    letter-spacing: -3px;
}

G. Tinggi Garis / Line Height
Properti line-height digunakan untuk menentukan ruang antara garis.
Dengan memasukkan script berikut pada text editor anda :

maka hasil di browser akan menjadi seperti ini :

H. Text Direction
Properti direction digunakan untuk mengubah arah teks dari elemen.
Sebagai contoh, perhatikan gambar berikut.

Scipt yang dituliskan.

Hasil direction di web browser.

I. Word Spacing / Spasi Antar Kata
Properti word-spacing digunakan untuk menentukan spasi antar kata-kata dalam sebuah teks.
Cara untuk menambah atau mengurangi spasi antar kata adalah seperti berikut :

Script yang kita tuliskan.

Hasil word-spacing di web browser.

J. Text Shadow / Bayangan Teks
Properti text-shadow digunakan untuk menambahkan bayangan pada teks. Gunanya untuk menambah style pada suatu teks.
Contoh dibawah ini menggunakan shadow horizontal 4px shadow vertical 5px dan warna shadownya adalah biru.

 

 

Demikian beberapa formating text yang dapat kita lakukan dengan CSS.
Terimakasih, semoga bermanfaat.
wassalamualaikum wr. wb.



Referensi :
- http://www.w3schools.com/css/css_text.asp