Sunday, December 14, 2014

Tutorial CSS Part 4: Memformat Teks

CSS menyediakan properti yang cukup lengkap dalam memformat teks. Mulai dari mengatur warna teks, posisi teks, dekorasi teks dan sebagainya dapat disetting melalui CSS. Selain itu kita juga bisa mentransformasikan teks dan mengatur spasi antar huruf dan kata pada teks melalui CSS. Bahkan mengatur arah teks (text direction) juga bisa dilakukan dengan CSS.

Ada 13 properti yang bisa digunakan untuk memformat teks, yaitu color, text-align, text-decoration, text-transform, text-indent, text-shadow, letter-spacing, word-spacing, line-height, vertical-align, white-space, direction dan unicode-bidi.
Berikut ini penjelasan masing-masing properti tersebut :

1. color

Adalah Adalah properti CSS yang digunakan untuk memformat warna teks.

Ada tiga cara dalam menentukan nilai warna, yaitu :
  • menggunakan nama warna seperti red, blue, green dan sebagainya
  • menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
  • menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.
Contoh penggunaan CSS color :
body {
    color: #e0ffff;
}

Kita bisa berlatih CSS color disini >>

2. text-align

Adalah properti CSS yang digunakan untuk mengatur alignment text horizontal. Alignment teks bisa diset left, right, center dan justify.

Left berarti teks rata kiri, right berarti rata kanan, center berarti rata tengah dan justify berarti rata kiri kanan.

Contoh penggunaan CSS text-align :
p {
   text-align: center;
}

Kita bisa berlatih CSS text-align disini >>

3. text-decoration

Adalah properti CSS yang digunakan untuk mengeset dan membuang dekorasi teks.

Ada empat nilai yang bisa ditetapkan pada properti text-decoration, yaitu :
  • none, berfungsi membuang semua dekorasi teks.
  • underline, berfungsi membuat teks bergaris bawah.
  • line-through, berfungsi membuat teks bergaris tengah
  • overline, berfungsi membuat teks bergaris atas.
Contoh penggunaan CSS text-decoration :
a {
   text-decoration: underline;
}

Kita bisa berlatih CSS text-decoration disini >>

4. text-transform

Adalah properti CSS yang digunakan untuk mentransformasi huruf pada teks.

Ada 3 nilai yang bisa ditetapkan pada properti text-transform, yaitu :
  • uppercase, berfungsi mengubah semua huruf menjadi huruf besar
  • lowercase, berfungsi mengubah semua huruf menjadi huruf kecil
  • capitalize, berfungsi mengubah huruf paertama pada setiap kalimat menjadi huruf besar.
Contoh penggunaan CSS text-transform :
.besar {
   text-transform: uppercase;
}

Kita bisa berlatih CSS text-transform disini >>

5. text-indent

Adalah properti CSS yang digunakan untuk mengatur posisi menjorok sebuat teks (inden teks)

Contoh penggunaan CSS text-transform :
p {
   text-indext: 50px;
}

Kita bisa berlatih CSS text-indent disini >>

6. text-shadow

Adalah properti CSS yang digunakan untuk membuat efek bayangan pada teks.

Contoh penggunaan CSS text-shadow :
h1 {
    text-shadow: 1px 1px #ff6a54;
}

Kita bisa berlatih CSS text-shadow disini >>

7. letter-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar huruf pada teks.

Contoh penggunaan CSS letter-spacing :
h1 {
     letter-spacing : 2px;
}

Kita bisa berlatih CSS letter-spacing disini >>

8. word-spacing

Adalah properti CSS yang digunakan untuk mengatur jarak antar kata pada teks.

Contoh penggunaan CSS word-spacing :
h1 {
     word-spacing : 2px;
}

Kita bisa berlatih CSS word-spacing disini >>

9.line-height

Adalah properti CSS yang digunakan untuk mengatur tinggi tiap baris teks.

Contoh penggunaan CSS line-height :
p {
     line-height : 150%;
}

Kita bisa berlatih CSS line-height disini >>

10.vertical-align

Adalah properti CSS yang digunakan untuk mengatur alignment sebuah elemen pada teks. Nilai properti ini bisa diset text-top yaitu elemen rata atas dengan teks atau text-bottom yaitu elemen rata bawah dengan teks. Secara default vertical-align diset text-bottom.

Contoh penggunaan CSS vertical-align :
img {
     vertical-align : text-top;
}

Kita bisa berlatih CSS vertical-align disini >>

11.white-space

Adalah properti CSS yang digunakan untuk menetapkan aksi penanganan terhadap white space sebuah teks. NIlai properti white-space bisa diset wrap dan nowrap. Secara default white-space akan ditangani dengan cara nowrap.

Contoh penggunaan CSS white-space :
p {
     white-space : wrap;
}

Kita bisa berlatih CSS white-space disini >>

12. direction

Adalah properti CSS yang digunakan untuk mengatur arah penulisan teks. Arah penulisan diisi ltr (left to right) atau rtl (right to left). Secara default arah penulisan adalah ltr yaitu dari kiri ke kanan.

Contoh penggunaan CSS direction :
h1 {
     direction : rtl;
}

Kita bisa berlatih CSS direction disini >>

13. unicode-bidi

Adalah properti CSS yang digunakan untuk mengatur bidirectional unicode karakter pada teks. unicode-bidi biasanya digunakan sepasang dengan CSS direction.

Contoh penggunaan CSS unicode-bidi:
h1 {
     direction : rtl;
     unicode-bidi: bidi-override;
}

Kita bisa berlatih CSS unicode-bidi disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment