Postingan pertama saya mengenai css akan saya mulai dari editing font, karena hal ini sangat penting dalam ilmu design web, dimana ukuran , jenis dan gaya dalam editing huruf sangat berpengaruh dalam keseimbangan halaman web.
Ada beberapa properti css text :
| Properti | Deskripsi |
|---|---|
| color | Setting warna pada teks |
| text-align | Menentukan keseimbangan horizontal teks |
| direction | Menentukan arah teks / arah tulisan |
| text-decoration | Menentukan dekorasi tambahan ke tesk seperti Bold , Underline dan Italic |
| text-indent | Menentukan indentasi dari baris pertama dalam blok teks |
| text-shadow | Menambahkan efek bayangan pada teks |
| text-transform | Mengatur huruf kapital pada teks |
| latter-spacing | Mengatur spasi antar karakter pada teks |
| line-height | Mengatur tinggi baris |
| vertical-align | Mengatur keseimbangan vertikal pada setiap elemen |
| white-space | Menentukan bagaimana pengaturan spasi di dalam suatu elemen di tangani |
| word-spacing | Mengatur spasi di antara kata-kata dalam teks |
Contoh penggunaan beberapa properti css text :
Color
| Properti | Hasil |
|---|---|
| h3 { color : #ff0000 ; } | Openotes90 |
| h4 { color : rgb ( 255,0,0 ) ; } | Openotes90 |
| h5 { color : red ; } | Openotes90 |
Text-Align
| Properti | Hasil |
|---|---|
| h3 { text-align : right ; } | Openotes90 |
| h4 { text-align : center ; } | Openotes90 |
| h5 { text-align : left ; } | Openotes90 |
| h5 { text-align : justify ; } | Openotes90 |
Text-Decoration
| Properti | Hasil |
|---|---|
| h3 { text-decoration : overline ; } | Openotes90 |
| h4 { text-decoration : line-through ; } | Openotes90 |
| h5 { text-decoration : underline ; } | Openotes90 |
| h5 { text-decoration : blink ; } | Openotes90 |
Catatan :text-decoration dengan value blink tidak mendukung pada Chrome , IE dan Safari | |
Direction
| Properti | Keterangan |
|---|---|
| ltr | Menentukan arah teks dari kiri ke kanan (default) |
| rtl | Menentukan arah teks dari kanan ke kiri |
| inherit | Menentukan arah teks dari nilai properti turunan nya |
Contoh penggunaan properti direction :
| Nilai | Hasil |
|---|---|
| div ( direction: ltr; ) | Indonesia itu adalah negara ku.. Dan merah - putih itu adalah semangat ku.. |
| div ( direction: rtl; ) | Indonesia itu adalah negara ku.. Dan merah - putih itu adalah semangat ku.. |
Text-transform
| Properti | Hasil |
|---|---|
| uppercase | Digunakan untuk menentukan huruf kapital pada huruf pertama pada sebuah kalimat |
| lowercase | Digunakan untuk menentukan huruf kecil pada huruf pertama pada sebuah sebuah kalimat |
Contoh penggunaan Text-transform
| Properti | Hasil |
|---|---|
| div ( text-transform: uppercase; ) | Indonesia itu adalah negara ku.. Dan merah - putih itu adalah semangat ku.. |
| div ( text-transform: lowercase; ) | Indonesia itu adalah negara ku.. Dan merah - putih itu adalah semangat ku.. |