Dalam Tutorial Teks CSS kali ini, kita akan mempelajari Cara Mengatur Rata Teks HTML dengan CSS. Properti CSS yang akan kita bahas adalah: text-align.
Mengatur Rata Teks dengan Property: text-align
Untuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center.
Perintah text-align: justify digunakan untuk membuat text rata kiri dan kanan. Namun efek justify ini perlu menjadi catatan. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil. Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah.
Tutorial Cara Mengatur Rata Teks dengan CSS
Dalam tutorial kali ini saya akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag <p>. Masing-masing paragraf ini memiliki kode CSS text-align yang 'ditempelkan' menggunakan class selector.
Berikut adalah contoh penggunaan property text-align:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Rata Teks CSS</title>
<style type="text/css">
.left { text-align: left;}
.right { text-align: right;}
.center { text-align: center;}
.justify { text-align: justify;}
</style>
</head>
<body>
  <h2>Belajar Rata Teks CSS: text-align</h2>
 Â
  <h3>Text Align: Left</h3>
  <p class="left">Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
  eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
  posuere laoreet. Eam facilis omittantur at, usu efficiantur
  neglegentur delicatissimi et, in per vero splendide
  persequeris.<p>
 Â
  <h3>Text Align: Right</h3>
  <p class="right">Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
  eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
  posuere laoreet. Eam facilis omittantur at, usu efficiantur
  neglegentur delicatissimi et, in per vero splendide
  persequeris.<p>
 Â
  <h3>Text Align: Center</h3>
  <p class="center">Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
  eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
  posuere laoreet. Eam facilis omittantur at, usu efficiantur
  neglegentur delicatissimi et, in per vero splendide
  persequeris.<p>
 Â
  <h3>Text Align: Justify</h3>
  <p class="justify">Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
  eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
  posuere laoreet. Eam facilis omittantur at, usu efficiantur
  neglegentur delicatissimi et, in per vero splendide
  persequeris.<p>
</body>
</html>
Dalam tutorial belajar CSS kali ini kita telah membahas Cara Mengatur Rata Teks HTML dengan CSS. Penggunaan fitur text-align ini bisa menjadi salah satu fitur untuk mempercantik hasil desain web.
Kalau ganti backround website gimana gan?
pakai ".background-image" atau kalau pakai warna ".background-color"
Makasih gan, websitenya sangat membantu terutama untuk pemula.
Ditunggu ebook css versi lengkapnya gan.
Siap gan…
Mudah2an 1 atau 2 minggu lagi sudah selesai eBook CSSnya :)
misalnya saya membuat sebuah biodata saya dan saya memasukkan berbagai informasi dengan menggunakan tabel, terus supaya tabel yang berisi informasi itu berubah tempat gmn ya ? contohnya jika saya mau tabel nya jd di tengah.
iya gan kalo tabel cara mindahinnya gimana? saya udah tulis properti text-align:center di tag body, tapi kok tabelnya ga pindah
Kalau ini kan aline horizontal, kalo yang vertikal gimana bos…?
Misalnya aku mau bikin text berjalan dg panjang text area nya 400px, dan tinginya 50px tapi posisi teksnya pingin di posisi vertikalnya pas tengah ( di posisi 25px ).
Ditunggu balasanya, Thank's!
Untuk mengatur posisi secara vertikal memang cukup susah, karena tidak ada property CSS yang khusus untuk itu. Yang sering dipakai adalah line-height. Untuk kasus ini bisa ditest dengan menambahkan property line-height: 50px (nilainya bisa disesuaikan tergantung kebutuhan).
Bro kalau sudah belajar Html/css bagusnya belajar ap dulu? Javascript / php ?
tolong bantuannya
Boleh yang mana saja, tapi saya lebih mengarahkan ke PHP karena programmingnya sedikit lebih mudah dibandingkan JavaScript.
Sangat membantu sekali gan, semoga artikel ini selalu update buat pembelajaran para pemula:)
Sangat berguna buat saya yang masih pemula dan lagi belajar html dan css ini. Tapi apa ada solusi agar tulisan tetap rata kanan dan kiri tetapi jarak spasi setiap katanya bisa sama? Mohon bantuannya, terima kasih.
Setahu saya tidak bisa…
Untuk paragraf yang diset sebagai rata kanan dan kiri, otomatis ruang yang tersisa memang harus disebar di spasi antar kata, sehingga jaraknya bisa beda-beda. Ini juga berlaku untuk aplikasi pengolah kata seperti microsoft word.
Tapi sekedar saran, untuk media online seperti web, tidak umum dipakai paragraf dengan rata kiri dan kanan (justify). Sebaiknya pakai rata kiri saja, kerena akan lebih mudah dibaca. Boleh lihat2 tampilan layout web berita online yang besar2 seperti kompas.com, detik.com, hampir semuanya menggunakan rata kiri saja.
Bapak yang baik hati. Boleh minta tolong kah? Artikel di blog saya jadi rata kiri setelah saya edit html nya supaya di tiap artikel terdapat iklan nya, padahal keseluruhan artikel saya pake rata tengah semua. Tapi setelah saya sisipi iklan jadi rata kiri. Rata kiri nya di bawah iklan. Mohon bantuan nya master. Apa yg harus saya edit
Kalau ngatur spasi di justify gimna mas. Agar tidak terlalu lebar spasinya.
Setahu saya tidak bisa, karena spasi itu harus beda2 untuk menyesuaikan panjang kata di setiap baris.
Tapi sedikit tips mengenai design dan user experience, sebaiknya tidak menggunakan justify untuk halaman web. Karena meskipun terlihat rapi, teks menjadi susah dibaca. Silahkan lihat web2 besar seperti kompas, detik, atau tirto, semuanya tidak ada yang tampil secara justify.
thanks min
Mantap gan, tapi bisa nggak ya kalo sudah diubah ke teks justify. Jarak spasinya rapih gitu, kadang di artikel saya ada kata yang terlalu jauh spasinya.
Untuk artikel online saya tidak sarankan di justify, kerena teks akan jadi susah dibaca. Silahkan cek web2 besar seperti kompas, detik, atau tirto, semuanya rata kiri. Memang terlihat kurang rapi, tapi lebih user friendly.
sangat responsif. nice!
rata kiri emg gk rapih, sempet pgn rbh jd rata kiri kanan. tpi pas baca komen agan, "web besar sperti detik, kompas,dll rata kiri lbh user friendly". langsung gk jadi deh.
mksh masukanny hu..
bang, materi css grid emang belum ada ya?
Untuk saat ini masih belum tersedia nih…
punya saya di kasih text-align: center supaya rata kanan kiri, tapi ada gambarnya di sebelahnya. bagaimana caranya agar text memenuhi home page, gambanya pindah ke bawah bang?
pakai float