Cara Mengatur Format Text dengan CSS [Dengan Contoh]

Di artikel kali ini saya ingin membahas cara mengatur format teks secara keseluruhan dengan menggunakan CSS.

Sebelumnya saya telah menulis juga tag element html untuk teks serta mengatur style font dengan css.

Dua artikel sebelumnya spesifik membahas tentang tag elemen dan style font saja. Tapi, artikel ini membahas formatting teks secara keseluruhan menggunakan CSS.

Dengan menguasai tutorial ini kamu bisa mengganti align teks, mengatur besar kecil huruf kapital, mengatur jarak antar baris teks, dll.

Lebih jelasnya simak tabel css property untuk formatting text:

Property	Keterangan
color	Mengganti warna huruf
text-align	Mengganti align (rata teks paragraf)
text-decoration	Menambah dekorasi spesifik
text-indent	Menambah jarak horizontal align teks
text-overflow	Mengatur jika teks melebihi area yang telah ditentukan. Misal ukuran kotak 100px x 100px tapi teksnya melebihi area itu. Maka teks bisa dihidden.
text-shadow	Mengatur shadow / bayangan teks
text-transform	Mengatur besar kecilnya huruf
direction	Mengatur direction / arah penulisan (kanan ke kiri atau sebaliknya)
letter-spacing	Mengatur jarak horizontal antar karakter
line-height	Mengatur jarak vertical antar baris teks
unicode-bidi	Memberikan style khusus seperti membalik teks
vertical-align	Mengatur vertical align antar elemen
white-space	Mengatur bagaimana white-space ditampilkan
word-spacing	Menambah atau mengurangi spasi antar kata

Cara Menggunakan Text Property CSS

Sebelum saya membahas detail cara menggunakan masing-masing teks property css dengan jelas. Silahkan coba dulu implementasi untuk semua kodenya supaya tau gambaran hasilnya.

File belajar.html saya menggunakan tag paragraf ditambah dengan class html.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Teks Formatting HTML CSS</title>
	<link rel="stylesheet" type="text/css" href="belajar_style.css">
</head>
<body>
	<p class="color">Paragraf edit color</p>
	<p class="text-align">Paragraf edit text-align</p>
	<p class="text-decoration">Paragraf edit text-decoration</p>
	<p class="text-indent">Paragraf edit text-indent</p>
	<p class="text-overflow">Paragraf edit text-overflow</p>
	<p class="text-shadow">Paragraf edit text-shadow</p>
	<p class="text-transform">Paragraf edit text-transform</p>
	<p class="direction">Paragraf edit direction</p>
	<p class="letter-spacing">Paragraf edit letter-spacing</p>
	<p class="line-height">Paragraf edit line-height</p>
	<p class="unicode-bidi">Paragraf edit unicode-bidi</p>
	<p class="vertical-align">Paragraf edit vertical-align</p>
	<p class="white-space">Paragraf edit white-space</p>
	<p class="word-spacing">Paragraf edit word-spacing</p>
</body>
</html>

Saya menulis css eksternal dengan membuat file belajar_style.css.

.color{ color: red;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.text-align{ text-align: center;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.text-decoration{ text-decoration: underline;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.text-indent{ text-indent: 400px;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.text-overflow{ 
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden;
  text-overflow: clip; 
  border: 1px solid #000000;
}

.text-shadow{ text-shadow: 2px 2px red;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.text-transform{ text-transform: uppercase;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.direction{ direction: rtl;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.letter-spacing{ letter-spacing: 5px;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.line-height{ line-height: 200px;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.unicode-bidi{ unicode-bidi: bidi-override; direction: rtl;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.vertical-align{ vertical-align: 40px;
border: 1px solid black;
padding: 20px;
width: 300px;
}

.white-space{ white-space: nowrap;
border: 1px solid black;
padding: 20px;
width: 50px;
}

.word-spacing{ word-spacing: 30px ;
border: 1px solid black;
padding: 20px;
width: 300px;
}

Hasilnya adalah:

Paragraf edit color red

Paragraf edit text-align center

Paragraf edit text-decoration underlain

Paragraf edit text-indent 400px

Paragraf edit text-overflow

Paragraf edit text-shadow

Paragraf edit text-transform uppercase

Paragraf edit direction kanan ke kiri

Paragraf edit letter-spacing 5px

Paragraf edit line-height 20px

Paragraf edit unicode-bidi

Paragraf edit vertical-align

Paragraf edit white-space

Paragraf edit word-spacing

Sengaja saya bikin scrolling supaya artikel ini tidak terlalu panjang.

Value property color

Color digunakan untuk mengganti warna text atau huruf. Nilai color bisa diisi dengan kode warna html seperti kode HEX, RGB, CMYK atau yang lainnya.

Value property text-align

text-align adalah property untuk mengedit align atau format rata sebuah teks. Bisa rata kanan, kiri atau tengah. Format penulisannya:

text-align:value

value diganti dengan nilai dibawah ini:

Value	Keterangan	Contoh
right	Rata kanan	Teks Rata kanan
left	Rata kiri	Teks Rata kiri
justify	Rata kanan-kiri	Teks Rata kanan-kiri, teksnya harus banyak supaya tahu efeknya. Kalau cuma teksnya dikit nanti seperti cuma rata kiri saja.
center	Rata tengah	Teks Rata tengah

Value property text-decoration

text-decoration adalah properti untuk memberi efek garis di teks, baik garis bawah, tengah atau atas.

text-decoration:value

Valuenya adalah:

Value	Keterangan	Contoh
overline	Garis atas	Teks Garis atas
line-through	Coretan tengah	Teks Coretan tengah
underline	Garis bawah	Teks Garis bawah

Bisa juga dikombinasikan misalnya text-decoration: underline overline; nanti hasilnya akan menjadi seperti ini.

Value property text-indent

text-indent adalah properti css untuk menentukan jarak baris pertama dalam paragraf terhadap sisi paling kiri atau kanan (tergantung jenis bahasanya, kalau arab ya dari kanan ke kiri).

Supaya lebih jelas, lihat gambar dibawah:

Dalam gambar tersebut saya menggunakan properti text-indent:200px. Kamu bisa mengisinya dengan satuan cm, px, em atau %.

Value property text-overflow

text-overflow digunakan untuk mengatur style apabila panjang teks melebihi area yang ditentukan. Ada 2 value yang biasa digunakan, yaitu:

Value	Keterangan	Contoh
clip	Default, huruf teks langsung kepotong	Teks Default, huruf teks langsung kepotong
ellipsis	Ada penyambung titik titik (…)	Teks Ada penyambung titik titik (…)

Supaya kelihatan efeknya kita harus mengkombinasikan dengan properti: white-space: nowrap; width: 100px; overflow: hidden;

Value property text-shadow

text-shadow digunakan untuk memberikan bayangan pada teks. Format penulisan propertinya adalah:

text-shadow: h-shadow v-shadow blur-radius color

Keterangan:

h-shadow menentukan nilai posisi horisontal (sumbu x)
v-shadow menentukan nilai posisi vertikal (sumbu y)
blur-radius menentukan tingkat ketebalan shadow (blur atau tidak)
color menentukan warna bayangan

Contoh saya memberi nilai text-shadow:3px 7px 12px green; maka hasilnya menjadi:

Ini contoh kalau ada shadow

Value property text-transform

text-transform digunakan untuk menentukan besar kecil kapital teks. Dengan properti ini kita bisa mengatur semuanya menjadi huruf kecil atau besar dalam suatu kalimat.

text-transform:value

Value	Keterangan	Contoh
uppercase	Huruf besar semua	Teks Huruf besar semua
lowercase	Huruf kecil semua	Teks Huruf kecil semua
capitalize	Huruf besar diawal kata	Teks Huruf besar diawal kata

Value property direction

direction adalah properti untuk menentukan arah penulisan. Bisa kiri ke kanan atau kanan ke kiri. Defaultnya adalah ltr yaitu kiri ke kanan, karena mayoritas orang di dunia menggunakan ini.

Sedangkan untuk kanan ke kiri menggunakan value rtl, seperti menulis tulisan arab. Contohnya direction:rtl

Teks Tulisan dari kanan ke kiri.

Ingat, direction itu beda dengan align ya. Kalau align hanya posisi rata kanan atau kiri, bukan arah penulisan. Ini hasilnya dengan teks yang sama tapi menggunakan align="right"

Teks Tulisan dari kanan ke kiri.

Letak titiknya beda kan?

Value property letter-spacing

letter-spacing untuk mengatur jarak antar karakter. Valuenya berupa angka dengan satuan px, em atau yang lain.

letter-spacing: nilaiangka

Contohnya:

Jarak	Kode	Hasilnya
10px	`letter-spacing:10px`	Teks Tulisan dari kiri ke kanan
5px	`letter-spacing:5px`	Teks Tulisan dari kanan ke kiri
-5px	`letter-spacing:-5px`	Teks Huruf besar diawal kalimat

Value property line-height

line-height digunakan untuk mengatur jarak antar baris. Nilainya juga angka dengan satuannya ditulis juga.

Jarak	Kode	Hasilnya
normal	Ukurannya normal / tidak diotak atik	Teks Ini contoh penggunaan line height. Nilai propertinya sesuai dengan nilai di kolom kedua ya.
1.6	1.6x dari ukuran normal (rekomendasi)	Teks Ini contoh penggunaan line height. Nilai propertinya sesuai dengan nilai di kolom kedua ya.
75%	75% dari ukuran normal (lebih kecil)	Teks Ini contoh penggunaan line height. Nilai propertinya sesuai dengan nilai di kolom kedua ya.
240%	240% lebih besar dari ukuran standard	Teks Ini contoh penggunaan line height. Nilai propertinya sesuai dengan nilai di kolom kedua ya.

Value property unicode-bidi

unicode-bidi adalah properti css untuk membalikkan huruf tiap kata. Value yang digunakan adalah bidi-override.

Contohnya saya memberikan properti direction: rtl; unicode-bidi: bidi-override;

Ini hasilnya jika pakai direction rtl dan bidi-override

Teks diatas berbunyai: Ini hasilnya jika pakai direction rtl dan bidi-override.

Value property vertical-align

vertical-align digunakan untuk mengatur posisi teks secara vertikal. Nilai propertinya adalah:

Jarak	Kode	Hasilnya
baseline	Ada di standard baris	Teks Ada di standard baris
text-top	Ada di atas	Teks Ada di atas
text-bottom	Ada di bawah	Teks Ada di bawah
sub	Seperti subscript	Teks Seperti subscript
super	Seperti superscript	Teks Seperti superscript

Value property white-space

white-space adalah properti css untuk mengatur ruang kosong dalam suatu paragraf.

Ada tiga value yang bisa digunakan, yaitu nowrap, normal dan pre.

Biar tidak bingung, saya beri contoh kode html:

<p style="white-space: normal;">
	Ini contoh teks normal 1.
	Ini contoh teks normal 2.
	Ini contoh teks normal 3.
	Ini contoh teks normal 4.
</p>
<p style="white-space: nowrap;">
	Ini contoh teks nowrap 1.
	Ini contoh teks nowrap 2.
	Ini contoh teks nowrap 3.
	Ini contoh teks nowrap 4.
</p>
<p style="white-space: pre;">
	Ini contoh teks pre 1.
	Ini contoh teks pre 2.
	Ini contoh teks pre 3.
	Ini contoh teks pre 4.
</p>

Hasilnya:

Ini contoh teks normal 1. Ini contoh teks normal 2. Ini contoh teks normal 3. Ini contoh teks normal 4.

Ini contoh teks nowrap 1. Ini contoh teks nowrap 2. Ini contoh teks nowrap 3. Ini contoh teks nowrap 4.

Ini contoh teks pre 1. Ini contoh teks pre 2. Ini contoh teks pre 3. Ini contoh teks pre 4.

Value property word-spacing

word-spacing adalah properti css untuk mengatur jarak antar huruf. Ingat ya ini antar huruf bukan antar kata. Nilainya diisi menggunakan angka dengan satuannya.

Misal: word-spacing:20px

Itu tadi adalah cara mengatur format teks dengan css. Tidak semua property harus digunakan. Gunakan ketika dibutuhkan saja ya.

CSS Format Teks