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

1 comments:


  1. wlpn msh bingung tp bermanfaat bgt kang

Posting Komentar


Creative Commons License
CSS Text by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-text.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.