CSS Text

color

Color akan menentukan warna teks (bukan celana dalam !).

h1
{
color:red;
}
h2
{
color:#00ff00;
}
h3
{
color:rgb(0,0,255);
}

Nilai	Keterangan
nama warna	Menentukan warna dengan nama warna (harus berbahasa inggris), seperti red
hex	Menentukan warna dengan kode hex, seperti #00ff00
rgb	Menentukan warna dengan kode rgb, seperti rgb(0,0,255

Macam-macam warna

---

text-align

Text-align menentukan perataan teks.

h1
{
text-align:center;
}
h2
{
text-align:left;
}
h3
{
text-align:right;
}
h4
{
text-align:justify;
}

Nilai	Keterangan
left	Teks akan meluruskan disebelah kiri
right	Teks akan meluruskan disebelah kanan
center	Teks akan berada ditengah
justify	Teks akan memiliki lebar yang sama pada setiap barisnya.

---

text-decoration

Properti text-decoration digunakan untuk penambahan dekorasi pada teks.

h1
{
text-decoration:underline;
}
h2
{
text-decoration:overline;
}
h3
{
text-decoration:line-through;
}
h4
{
text-decoration:blink;
}

Nilai	Keterangan
none	Ini membuat tidak ada dekorasi pada teks. Biasanya digunakan pada link, karena link automatis dengan dekorasi underline.
underline	Baris dibawah teks
overline	Garis diatas teks
line-through	Garis ditengah teks atau seperti teks dicoret
blink	Membuat teks berkedip. Nilai tidak didukung oleh IE, Chrome, dan Safari

---

text-transform

Propeti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

h1
{
text-transform:uppercase;
}
h2
{
text-transform:lowercase;
}
h3
{
text-transform:capitalize;
}

Nilai	Keterangan
none	Akan terlihat asli dari apa yang anda ketik
capitalize	Ini akan membuat setiap huruf diawal kata berubah menjadi besar
uppercase	Ini akan membuat teks menjadi besar
lowercase	Ini akan membuat teks menjadi kecil

---

text-indent

Properti text-indent akan membuat setiap baris pertama akan sedikit menjorok. Cocok digunakan pada Blog yang artikelnya memuat cerpen.

p{
text-indent:30px;
}

Nilai	Keterangan
panjang	Bisa dengan ukuran px, pt, cm, em, dll
%	Bisa menggunakan % dari lebar halaman artikel anda.

---

line-height

Properti line-height digunakan untuk menentukan jarak antar baris.

p{
line-height:200%;
}

Nilai	Keterangan
normal	Ini akan membuat jarak antar baris normal
nomor	Bisa menggunakan nomor saja untuk menentukan jarak
panjang	Bisa menggunakan ukuran px, pt, cm, dll
%	Bisa menggunakan % dari besar huruf yang anda gunakan

---

letter-spacing

Properti letter-spacing digunakan untuk menentukan jarak spasi antar huruf.

h1{
letter-spacing:2px;
}
h2{
letter-spacing:-3px;
}

Nilai	Keterangan
normal	Ini akan membuat jarak spasi normal
panjang	Bisa menggunakan ukuran px, pt, cm, em, dll (nilai negatif diperbolehkan)

---

word-spacing

Properti word-spacing digunakan untuk menentukan jarak spasi antar kata.

p{
word-spacing:20px;
}

Nilai	Keterangan
normal	Ini akan membuat spasi antar kata menjadi normal
panjang	Bisa dengan ukuran px, pt, cm, em, dll. Nilai negatif diperbolehkan

---

direction

Properti direction untuk menentukan jalannya arah teks. Bisa dari kiri kekanan, dan bisa dari kanan kekiri (biasanya digunakan orang yang memakai tulisan arab).

p{
direction:rtl;
}

Nilai	Keterangan
ltr	Teks berjalan dari kiri kekanan
rtl	Teks berjalan dari kanan kekiri

---

white-space

Properti white-space digunakan menentukan sebuah format teks dalam elemen.

p{
white-space:nowrap;
}

Nilai	Keterangan
normal	Teks akan terlihat normal
nowrap	Ini akan membuat teks terus menyamping sampai tag <br/> menghadang (kayak kesatria)
pre	Ini akan membuat teks seperti didalam tag <pre>
pre-line	Seperti tag pre, tapi teks menjorok tidak akan berfungsi, hanya baris jeda
pre-wrap	Ini membuat browser membaca apa yang anda ketik, termasuk spasi yang berlebihan

---

Alhamdulillah