Teks dan Huruf text dan font

Dalam tutorial ini, kita akan membahas cara menggunakan CSS untuk mengatur tampilan teks dan huruf dalam halaman web Anda. Ini mencakup pemformatan teks, jenis huruf (font), ukuran huruf, warna teks, dan banyak lagi.

1. Memilih Teks

Anda dapat memilih elemen HTML tertentu untuk diubah tampilannya dengan menggunakan selector CSS. Contoh:

/* Mengubah semua teks pada halaman */
p {
  /* Properti CSS di sini */
}

/* Mengubah teks dengan class "judul" */
.judul {
  /* Properti CSS di sini */
}

2. Pemformatan Teks Dasar

Beberapa properti CSS yang berguna untuk pemformatan teks adalah:

  • font-family: Mengatur jenis huruf (font) yang akan digunakan. Contoh: font-family: Arial, sans-serif;
  • font-size: Menentukan ukuran huruf. Contoh: font-size: 16px;
  • font-weight: Mengatur ketebalan huruf. Contoh: font-weight: bold;
  • text-align: Mengatur perataan teks. Contoh: text-align: center;


3. Warna Teks

Anda dapat mengubah warna teks dengan properti color. Contoh:

/* Mengubah warna teks menjadi merah */
p {
  color: red;
}

4. Menambahkan Bayangan Teks (Text Shadow)

Anda dapat memberikan efek bayangan pada teks dengan properti text-shadow. Contoh:

/* Menambahkan bayangan hitam ke teks */
p {
  text-shadow: 2px 2px 4px #000;
}

5. Mengatur Spasi Antar Huruf (Letter Spacing) dan Spasi Antar Kata (Word Spacing)

Anda dapat mengatur jarak antar huruf dan antar kata dengan properti letter-spacing dan word-spacing. Contoh:

/* Meningkatkan spasi antar huruf */
p {
  letter-spacing: 2px;
}

/* Meningkatkan spasi antar kata */
p {
  word-spacing: 5px;
}

6. Membuat Teks Tercetak Tebal (Text Bold)

Anda dapat membuat teks menjadi tebal dengan menggunakan tag <strong> dalam HTML atau properti font-weight: bold; dalam CSS.

7. Memanfaatkan Google Fonts

Untuk menambahkan jenis huruf yang berbeda, Anda dapat menggunakan layanan seperti Google Fonts. Pilih jenis huruf yang Anda inginkan, dan ikuti petunjuk untuk mengintegrasikannya ke dalam proyek web Anda.

Ini adalah beberapa konsep dasar dalam mengatur teks dan huruf dalam CSS. Anda dapat menggabungkan properti-properti ini untuk mencapai tampilan teks yang Anda inginkan dalam halaman web Anda. Selalu ingat untuk menjalankan uji coba untuk memastikan tampilan teks yang sesuai dengan kebutuhan desain Anda.

PREVIOUS
NEXT