Belajar CSS Part 3: Text Styling, Font & Color

Setelah memahami CSS Selector & Specificity di Part 2, sekarang kita akan masuk ke topik penting lainnya dalam CSS: Text Styling, Font & Color.

Di Part 3 ini, kamu akan belajar tentang:

• Cara mengubah warna teks
• Menata font menggunakan CSS
• Text alignment dan styling lainnya

Mengubah Warna Teks dengan CSS

Untuk mengubah warna teks, kita menggunakan properti color.

p {
  color: red;
}

• p → adalah selector, artinya semua elemen <p> (paragraf) akan dikenakan aturan ini.

• color → adalah properti CSS untuk mengatur warna teks.

• red → adalah nilai (value) dari properti tersebut. Di sini, warna teks akan menjadi merah.

Jadi, semua teks yang berada di dalam tag <p> akan berubah menjadi warna merah.

Beberapa nilai warna yang umum digunakan:

• red, blue, green (nama warna)
• #ff0000 (hexadecimal)
• rgb(255, 0, 0) (RGB)
• rgba(255, 0, 0, 0.5) (RGBA – dengan transparansi)

Menata Font dengan CSS

1. Font Family

Untuk mengubah font, gunakan properti font-family.

Properti ini bisa berisi:

• Nama font utama (misalnya Arial)

• Font cadangan (fallback) jika font utama tidak tersedia

• Jenis font umum seperti serif, sans-serif, atau monospace

body {
  font-family: Arial, sans-serif;
}
h1 {font-family: "Times New Roman", serif;}

• body → semua teks di halaman memakai Arial

• h1 → judul memakai Times New Roman

• Jika font tidak tersedia → browser otomatis pakai font cadangan

Beberapa contoh font keluarga:

• Arial, Verdana, Times New Roman
• Google Fonts: Roboto, Open Sans

2. Font Size

Untuk mengubah ukuran font, gunakan properti font-size.

Satuan Ukuran Font

Selain px (pixel), ada beberapa satuan yang sering dipakai:

• px → ukuran tetap (contoh: 32px)

• em → relatif terhadap elemen induk

• rem → relatif terhadap ukuran font utama

• % → dalam persentase

h1 {
  font-size: 32px;
}
h2 {font-size: 24px;}
p {font-size: 16px;}

• h1 → ukuran paling besar (32px)

• h2 → lebih kecil dari h1 (24px)

• p → ukuran standar teks paragraf (16px)

Dengan font-size, kita bisa membuat tampilan teks lebih rapi dan mudah dibaca.

3. Font Weight

Gunakan font-weight untuk mengatur ketebalan font.

Nilai yang Bisa Digunakan pada Font Weight

Beberapa nilai yang sering dipakai:

• normal → ketebalan standar

• bold → teks tebal

• lighter → lebih tipis

• bolder → lebih tebal

• 100 – 900 → angka ketebalan (semakin besar, semakin tebal)

h1 {
  font-weight: bold;
}
p {font-weight: bold;}
.normal {font-weight: normal;}

• h1 → teks judul dibuat tebal

• p → teks paragraf Tebal

• class .normal → bisa dipakai ulang untuk membuat teks normal jika selector menggunakan bold

4. Font Style

Gunakan font-style untuk mengatur gaya font seperti italic.

Nilai pada Font Style

Beberapa nilai yang bisa digunakan:

• normal → huruf biasa

• italic → huruf miring

• oblique → miring juga, tapi sedikit berbeda dari italic

em {
  font-style: italic;
}
.miring {font-style: italic;}

• Tag <em> membuat sebagian teks miring

• Class .miring membuat satu paragraf penuh miring

• font-style membantu memberi penekanan pada teks

Text Alignment dan Styling Lainnya

1. Text Align

Untuk mengatur posisi teks, gunakan properti text-align.

Nilai pada Text Align

Beberapa nilai yang sering digunakan:

• left → rata kiri

• center → rata tengah

• right → rata kanan

• justify → rata kanan-kiri

h2 {
  text-align: center;
}
.kanan {text-align: right;}
.justify {text-align: justify;}

• h2 → judul rata tengah

• .kanan → paragraf rata kanan

• .justify → paragraf rata kanan-kiri agar rapi

2. Text Decoration

Untuk memberi garis bawah atau menebalkan teks, gunakan text-decoration.

Nilai pada Text Decoration

Beberapa nilai yang sering digunakan:

• none → tanpa garis

• underline → garis bawah

• overline → garis di atas teks

• line-through → teks dicoret

a {
  text-decoration: underline;
}
.tanpa-garis {text-decoration: none;}
.coret {text-decoration: line-through;}

• a → link diberi garis bawah

• .tanpa-garis → menghilangkan dekorasi teks

• .coret → membuat teks dicoret

Catatan: text-decoration tidak menebalkan teks. Untuk menebalkan teks gunakan: font-weight: bold;

3. Text Transform

Untuk mengubah kapitalisasi teks, gunakan text-transform.

Nilai pada Text Transform

Beberapa nilai yang sering digunakan:

• uppercase → semua huruf besar

• lowercase → semua huruf kecil

• capitalize → huruf pertama setiap kata besar

• none → tanpa perubahan

h1 {
  text-transform: uppercase;
}
.kecil {text-transform: lowercase;}
.kapital {text-transform: capitalize;}

• h1 → semua huruf jadi besar

• .kecil → teks diubah menjadi huruf kecil

• .kapital → huruf awal tiap kata menjadi besar

text-transform hanya mengubah tampilan, bukan teks aslinya di HTML.

Text Shadow

Kamu bisa menambahkan bayangan pada teks dengan properti text-shadow.

Penjelasan:

• 2px (horizontal) → bayangan bergeser ke kanan

• 2px (vertical) → bayangan bergeser ke bawah

• 4px (blur) → tingkat blur (semakin besar = semakin kabur)

• rgba(0, 0, 0, 0.3) → warna bayangan (hitam transparan)

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.glow {text-shadow: 0 0 8px blue;}

Penjelasan Contoh:

• h1 → bayangan realistis di kanan bawah

• .glow → efek cahaya di sekitar teks

• text-shadow bisa dipakai untuk efek elegan atau dramatis

Kesalahan Umum dalam Text Styling

• Ukuran font tidak konsisten
• Penggunaan warna teks yang tidak kontras
• Menambahkan terlalu banyak dekorasi pada teks

Ringkasan CSS Part 3

• CSS memungkinkan pengaturan font dan warna teks secara fleksibel
• Text alignment dan styling lainnya dapat meningkatkan keterbacaan
• Gunakan properti CSS dengan bijak untuk desain yang lebih baik

Lanjutan Materi

Di CSS Part 4, kita akan membahas:

• Box Model – Margin, Border, Padding, Content
• Pengaturan dimensi dan layout elemen HTML

Lanjut ke: Belajar CSS Part 4