Properti Teks

Properti Teks ✍️

Selain font, CSS memiliki banyak property khusus untuk mengatur cara teks ditampilkan — perataan, dekorasi, transformasi, hingga jarak antar huruf dan baris.

text-align — Perataan Teks

Mengatur perataan horizontal teks di dalam elemennya:

.kiri   { text-align: left; }    /* default untuk LTR */
.tengah { text-align: center; }
.kanan  { text-align: right; }
.penuh  { text-align: justify; } /* rata kanan-kiri (seperti koran) */

<h1 style="text-align: center;">Judul di Tengah</h1>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Teks ini akan rata di kedua sisi.</p>

text-decoration — Dekorasi Teks

Menambah atau menghapus dekorasi teks:

a { text-decoration: none; }          /* hapus garis bawah link */
.garis-bawah { text-decoration: underline; }
.garis-atas  { text-decoration: overline; }
.coret       { text-decoration: line-through; }

Bisa mengontrol warna dan gaya garisnya:

.garis-merah {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy; /* solid | dashed | dotted | wavy | double */
}

/* Shorthand */
.garis-lengkap {
  text-decoration: underline dotted blue;
}

text-transform — Transformasi Huruf

Mengubah besar-kecil huruf tanpa mengubah HTML:

.kapital-semua { text-transform: uppercase; }  /* SEMUA KAPITAL */
.kecil-semua   { text-transform: lowercase; }  /* semua kecil */
.kapital-awal  { text-transform: capitalize; } /* Setiap Kata Kapital */
.normal        { text-transform: none; }       /* sesuai aslinya */

<h2 style="text-transform: uppercase;">judul ini jadi kapital semua</h2>
<!-- Tampil: JUDUL INI JADI KAPITAL SEMUA -->

line-height — Jarak Antar Baris

Mengatur jarak vertikal antar baris teks. Nilai yang direkomendasikan untuk keterbacaan body text adalah 1.5–1.8:

p {
  line-height: 1.6;   /* 1.6x dari font-size — paling umum */
}

h1 {
  line-height: 1.2;   /* heading lebih rapat */
}

/* Juga bisa pakai px atau em */
.padat   { line-height: 20px; }
.longgar { line-height: 2em; }

letter-spacing — Jarak Antar Huruf

Mengatur jarak antar karakter (tracking):

.rapat   { letter-spacing: -0.05em; } /* merapatkan */
.normal  { letter-spacing: 0; }
.longgar { letter-spacing: 0.1em; }   /* merenggangkan */
.besar   { letter-spacing: 0.3em; }   /* efek dekoratif */

Sering digunakan untuk judul dan label:

.label-kategori {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: #6b7280;
}

word-spacing — Jarak Antar Kata

.rapat   { word-spacing: -4px; }
.longgar { word-spacing: 8px; }

text-indent — Indentasi Awal Paragraf

p {
  text-indent: 2em; /* menjorok ke dalam di baris pertama */
}

white-space — Penanganan Whitespace

Mengontrol bagaimana spasi dan baris baru dalam teks ditangani:

.satu-baris  { white-space: nowrap; }    /* paksa satu baris, tidak wrap */
.normal      { white-space: normal; }    /* default: wrap otomatis */
.pertahankan { white-space: pre; }       /* pertahankan spasi dan enter */
.pre-wrap    { white-space: pre-wrap; }  /* pertahankan + auto wrap */

Contoh umum — memotong teks panjang dengan ...:

.potong-teks {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* tampilkan ... di akhir */
  max-width: 200px;
}

text-shadow — Bayangan Teks

/* text-shadow: offset-x offset-y blur-radius color */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Bisa lebih dari satu bayangan */
.judul-keren {
  text-shadow:
    1px 1px 0 #999,
    2px 2px 0 #888,
    3px 3px 6px rgba(0,0,0,0.2);
}

Ringkasan Property Teks

💡 Tips: Untuk keterbacaan teks yang optimal: gunakan line-height: 1.6–1.8 untuk paragraf, font-size: 16px–18px untuk body text, dan warna teks #1f2937 atau #374151 (bukan hitam murni #000) agar lebih nyaman di mata. 👀