Tutorial Belajar CSS: Cara Mengatur Rata Teks HTML dengan CSS (text-align)

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>

Tutorial Belajar CSS - Contoh Cara Mengatur Rata Teks HTML dengan CSS (text-align)

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.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

25 Comments

  1. Skillet Valentine
    06 Sep 15
    • Nabhan Rasya
      11 Apr 21
  2. penyimak
    23 Oct 15
    • Andre
      23 Oct 15
  3. candra
    10 Nov 15
  4. Obi
    25 Aug 16
  5. Tomo Koeswoyo
    06 Nov 17
    • Andre
      07 Nov 17
  6. efendy
    03 Sep 18
    • Andre
      05 Sep 18
  7. Raul Ganteng
    16 Jun 19
  8. Rooswati
    17 Jul 19
    • Andre
      17 Jul 19
  9. Sandi
    05 Apr 20
  10. Den
    26 Apr 20
    • Andre
      27 Apr 20
  11. ivan
    06 May 20
  12. Fauzan Efriyan
    18 Jun 20
    • Andre
      18 Jun 20
  13. aldi
    02 Aug 20
  14. Nori Nofandi
    03 Sep 20
    • Andre
      04 Sep 20
  15. ProfAl
    09 Jul 22
    • Anonymous
      06 Oct 22

Add Comment