css: Format Font
Pengaturan text dengan style css menggunakan properti-properti yang meliputi :
- color
- text-align
- text-decoratin
- text-transform
- text-indent
Warna teks.
Warna pada teks sebuah artikel dapat diatur sedemikian rupa sehingga tampilan teks menjadi semarak dan menarik, selain itu kita dapat membedakan mana teks untuk link,mana yang bukan link, atau kita dapat memberi warna yang berbeda pada kata atau kalimat yang dianggap penting dalam uraian sebuah paragraf misalnya.Untuk menentukan warna teks digunakan properti color, dengan nilai/value dari warna dapat menggunakan:
- nilai HEX misalnya: "#FF0000"
- nilai rgb misalnya: "rgb(255,0,0)"
- nama warna misalnya: "red" (dalam bahasa Inggris).
/* warna default ditetapkan pada selector body */
body { color: rgb(25,100,100); }
h2 { color: white; }
p { color: #FFD700; }
body { color: rgb(25,100,100); }
h2 { color: white; }
p { color: #FFD700; }
Pada contoh diatas, elemen body ditaur dengan value/nilai: nama warna, h2 dengan nilai rgb dan p dengan nilai hexadecimal.
Tampilan pada halaman web.
ini judul
ini sebuah paragraf
dan ini paragraf yang lain.
Perataan/alignment.
Properti text-align digunakan untuk mengatur perataan teks secara garis horizontal (horizontal line). Kita dapat mengatur perataan teks (text alignment) dengan memilih value/nilai :left ( rata kiri )
right ( rata kanan )
center (berpusat ditengah)
justify (rata kiri dan rata kanan)
Contoh :
body { text-align:left; )
h1 { text-align:center; }
p { text-align:justify; }
p { text-align: right; }
.
h1 { text-align:center; }
p { text-align:justify; }
p { text-align: right; }
.
Tampilan pada halaman web.
teks pada paragraf ini diatur dengan properti text-align dan dengan value: left, teks menjadi rata kiri.
ini contoh judul
dan teks pada paragraf ini diatur dengan properti text-align dengan value/nilainya: justify, sehingga teks menjadi rata kiri dan rata kanan. Namun pada pengaturan ini akan bekerja apabila sesuai dengan jendela browser.
sedangkan teks pada paragraf ini diatur dengan properti text-align dengan value: right, dan teks menjadi rata kanan.
Dekorasi teks.
Untuk membuat dekorasi teks digunakan properti text-decoration, dengan value yang dapat dipilih adalah :- underline: teks dengan garis bawah.
- overline: teks dengan garis atas.
- line-through: teks tercoret
- none: untuk me-remove gaya standar
- blink: teks berkelip.
h2 { text-decoration:underline; }
h3 { text-decoration:overline; }
p { text-decoration:line-through; }
a { text-decoration:none; }
.
Tampilan pada halaman web.
Indentasi teks.
Untuk membuat teks pada baris pertama dari elemen html menjorok lebih kedalam dari baris normal digunakan properti text-indent, dengan value yang digunakan adalah: px ( pixel ) atau % ( persen ). Ini digunakan biasanya untuk membuat paragraf baru pada sebuah artikel.Contoh.
.
p { text-indent: 40px; }
p { text-indent: 10%; }
.
p { text-indent: 40px; }
p { text-indent: 10%; }
.
Tampilan pada halaman web.
paragraf ini diatur dengan properti text-indent, dengan value:40pixel.
sedang teks dalam paragraf ini diatur dengan indentasi value: 10%.
Selain formating teks seperti yang dijelaskan diatas, masih banyak lagi cara memformat teks, diantaranya:
- direction: mengatur arah dari teks (ltr, rtl)
- line-height: mengatur jarak diantara baris teks (normal, px, length, %).
- letter-spacing: mengatur jarak spasi antar karakter teks (normal, length).
- text-shadow: untuk memberi bayangan pada teks.
- vertical-align: mengatur posisi text secara garis vertikal dari suatu elemen.
- word-spacing: Untuk menambah atau mengurangi jarak spaci antar kata (normal, length).
Demikianlah bagaimana kita mengatur format teks dengan css. Semoga bermanfaat.
Sumber materi: W3Schools.
Baca juga materi sebelumnya:
- Belajar css Format Font.
- Belajar html Hyperlink.
- Belajar html Background Styling.
- Cara Mengubah Grid Menu Pada Symbian S60v3v5.
- Belajar HTML Cara Membuat Teks/Obyek Berjalan.
css: font styling