CSS Text

CSS menyediakan banyak properti untuk mengubah tampilan teks di halaman web. Anda dapat mengontrol berbagai aspek teks, seperti ukuran, jenis font, warna, perataan, dan banyak lagi.

1. Mengubah Ukuran Teks (font-size)

Untuk mengubah ukuran teks, Anda dapat menggunakan properti font-size. Ukuran dapat ditentukan dalam berbagai unit, seperti px, em, atau rem.

p {
  font-size: 20px;
}

2. Mengubah Jenis Font (font-family)

Untuk mengubah jenis font, Anda dapat menggunakan properti font-family. Anda bisa menggunakan font sistem atau font khusus yang diimpor melalui layanan seperti Google Fonts.

p {
  font-family: 'Arial', sans-serif;
}

3. Mengubah Warna Teks (color)

Untuk mengubah warna teks, Anda dapat menggunakan properti color. Warna dapat ditentukan dalam format nama warna, hex, rgb, atau rgba.

p {
  color: blue;
}

4. Mengatur Berat Font (font-weight)

Untuk mengubah berat font (apakah teks tebal atau normal), Anda bisa menggunakan properti font-weight.

p {
  font-weight: bold;
}

5. Mengubah Jarak Antar Huruf (letter-spacing)

Properti letter-spacing digunakan untuk mengubah jarak antar huruf dalam teks. Anda dapat mengatur nilai positif untuk memperbesar jarak, atau nilai negatif untuk memperkecil jarak.

p {
  letter-spacing: 2px;
}

6. Mengatur Jarak Antar Kata (word-spacing)

Properti word-spacing digunakan untuk mengubah jarak antar kata dalam teks. Anda bisa menambah atau mengurangi jarak antar kata.

p {
  word-spacing: 5px;
}

7. Mengubah Teks Menjadi Kapital atau Kecil (text-transform)

Untuk mengubah teks menjadi kapital (huruf besar semua), huruf kecil, atau kapitalisasi pertama dari setiap kata, Anda bisa menggunakan properti text-transform.

p {
  text-transform: uppercase;
}

8. Mengatur Perataan Teks (text-align)

Properti text-align digunakan untuk mengatur perataan teks dalam elemen. Anda bisa memilih left, right, center, atau justify.

p {
  text-align: center;
}

9. Mengatur Ketinggian Baris Teks (line-height)

Properti line-height digunakan untuk mengatur jarak vertikal antar baris teks dalam elemen. Nilai yang lebih besar akan memberi lebih banyak ruang antara baris teks.

p {
  line-height: 2;
}