Belajar css Format Teks

Dengan style css, text pada halaman dapat diformat dan diatur sedemikian rupa sehingga tampilan bacaan/text pada halaman web menjadi menarik, enak dan nyaman untuk dibaca.


css: Format Font

Pengaturan text dengan style css menggunakan properti-properti yang meliputi :

• color
• text-align
• text-decoratin
• text-transform
• text-indent

Properti-properti diatas dapat dijelaskan sebagai berikut.

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; }

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; }

.

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.

ini judul

ini sub judul

text tercoret

text berkelip

ini sebuah link tanpa dekorasi .
.

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%; }
.

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.

back to top.