Belajar CSS Untuk Pemformatan Teks

Kali ini belajar CSS property yang digunakan untuk pemformatan teks, diantaranya: menambah spasi pada kata, menambah spasi pada huruf, membuat huruf besar pada awal kata, menambahkan jarak untuk baris pertama seperti layaknya surat kabar, menetapkan huruf besar dan kecil, membuat teks berkedip, menyelaraskan aligmen dsb.

Macam-macam properti CSS dan kegunaannya

Properti color digunakan untuk memberikan warna. Bisa menggunakan code hex atau nama warna.
Contoh menggunakan value color red (nama warna) dan #f00 (code hex) menghasilan teks warna merah.

p.red {color:red;}   p {color:#f00;}

Properti line-height digunakan untuk mengatur tinggi ruang dalam baris.
Contoh menggunakan value nomer 1.5 dan menggunakan length 18px. Dengan size teks 12px maka menghasilkan tinggi baris 18 pixel.

body {line-height:1.5;}  body {line-height:18px;}

Properti letter-spacing digunakan untuk mengatur jarak huruf, maksudnya antara huruf yang satu dengan huruf lainnya.
Contoh menggunakan value length 2px menghasilkan ruang antara huruf 2 pixel.

p {letter-spacing:2px;}  p { letter-spacing:normal;} 

Properti text-align digunakan untuk menyelaraskan alignmen, rata disebelah kanan, kiri, tengah atau sama rata kanan dan kiri.
Contoh menggunakan value justify menghasilkan teks rata kanan kiri, menggunakan value right menghasilkan teks rata di kanan.

p { text-align:justify; } p  { text-align:center; }

Properti text-decoration digunakan untuk memberikan garis pada teks, bisa juga untuk menghapus garis pada link untuk tujuan mempercantik desain. Dalam hal ini direkomendasikan agar tidak memberikan garis bawah pada teks selain link karena akan membuat pengunjung bingung.
Contoh menggunakan value underline menghasilkan garis bawah pada teks. menggunakan value blink menghasilkan text berkedip.

p {text-decoration:underline;}  p {text-decoration:blink;}

Properti text-indent digunakan untuk mengatur jarak pada baris pertama dalam sebuah paragraf.
Contoh menggunakan value length 50px menghasilkan jarak ruang 50 pixel. menggunakan value % 5% menghasilkan jarak ruang 5% dari lebar elemen.

p {text-indent:50px;}  p {text-indent:5%;}

Properti text-shadow digunakan untuk menambahkan efek bayangan pada teks. Tidak semua browser mendukung properti ini.
Contoh menggunakan value gabungan antara length 1px dan color #a01. menghasilkan teks warna merah hati dengan bayangan tipis warna hitam.

p {color:#a01; text-shadow:1px 1px 1px #000;}

Properti text-transform digunakan untuk menentukan transformasi huruf, huruf besar untuk semua teks, menentukan satu huruf besar hanya pada awal kata.
Contoh menggunakan value uppercase menghasilkan huruf BESAR. menggunakan value capitalize menghasilkan hanya Huruf Awal Yang Besar.

p {text-transform:uppercase;}  p {text-transform:capitalize;}

Properti white-space digunakan untuk mengatur ruang putih pada elemen.
Contoh menggunakan value nowrap dan menggunakan value normal.

pre {white-space:nowrap;}  code {white-space:normal;}

Properti word-spacing digunakan untuk menambah atau mengurangi spasi antara kata satu dengan kata lainnya. Contoh menggunakan value length 5px menghasilkan jarak kata 5 pixel. menggunakan value normal menghasilkan jarak kata normal.

p {word-spacing:5px;}  p {word-spacing:normal;}

Detail Nilai Properti CSS Digunakan Untuk Mengatur Teks

Tambahan: Nomer yang berada dalam kolom “CSS” menunjukkan bahwa properti di definisikan pada versi CSS1 atau CSS2.

Property	Description	Values	CSS
color	Digunakan untuk menambahkan warna	color	1
direction	Digunakan untuk mengatur direksi teks	ltr rtl	2
line-height	Digunakan untuk mengatur tinggi line	normal number length %	1
letter-spacing	Digunakan untuk menambahkan atau mengurangi spasi huruf	normal length	1
text-align	Digunakan untuk mengatur alignmen teks pada sebuah elemen	left right center justify	1
text-decoration	Digunakan untuk menambahkan dekorasi teks	none underline overline line-through blink	1
text-indent	Digunakan untuk mengatur jarak baris teks pertama sebuah elemen	length %	1
text-shadow	Digunanakan untuk menambah bayangan pada teks	none color length
text-transform	Digunakan untuk mengatur besar kecil huruf	none capitalize uppercase lowercase	1
unicode-bidi		normal embed bidi-override	2
vertical-align	Digunakan untuk mengatur vertical alignment pada sebuah element	baseline sub super top text-top middle bottom text-bottom length %	1
white-space	Digunakan untuk mengatur ruang putih	normal pre nowrap	1
word-spacing	Digunakan untuk menambah atau mengurangi spasi pada kata	normal length	1

Saya belajar artikel ini di www.w3schools.com saya cerna sebisa pemikiran saya, semoga dapat membantu para Newbie meskipun dalam artikel ini masih banyak kekurangan. Dan Saya berharap Anda bersedia menambahkan ataupun mengingatkan, karena saya juga masih dalam tahab belajar CSS. Terimakasih.

CATEGORY : CSS Basic TAG : belajar, code, css, dasar, desain, standar at Saturday, 6 November, 2010