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