Panduan Memformat Teks di CSS

Saat mendesain situs web, memformat teks merupakan aspek penting dalam membuat antarmuka yang menarik dan mudah dibaca.

CSS menyediakan beberapa properti yang memungkinkan Anda menyesuaikan berbagai elemen teks, termasuk warna font, ukuran, keluarga, perataan, spasi, dan lainnya.

Di bawah ini adalah panduan mendetail tentang setiap properti pemformatan teks, bersama dengan contoh untuk setiap properti.

 

Warna huruf

Parameter: Nilai warna, yang dapat berupa nama warna(misalnya, red), kode hex(misalnya, "#FF0000"), nilai RGB(misalnya, "rgb(255, 0, 0)"), atau nilai RGBA(misalnya, "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Ukuran huruf

Parameter: Nilai ukuran, yang dapat berupa piksel(mis., "16px"), satuan em(mis., "1em"), satuan rem(mis., "1.2rem"), satuan lebar viewport(mis., "10vw"), unit ketinggian viewport(misalnya, "5vh"), atau unit lainnya.

h1 {  
  font-size: 24px;  
}  

 

Keluarga Fon

Parameter: Daftar jenis font, ditentukan dalam urutan pilihan. Anda dapat menentukan nama font(misalnya, Arial) atau menyertakan nama font yang berisi karakter khusus dalam tanda kutip ganda(misalnya, " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Berat dan Gaya Font

Parameter font-weight: normal(default), bold, bolder, lighter, atau nilai numerik dari 100 hingga 900.

Parameter font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Dekorasi Teks

Parameter: "none"(default), "underline", "overline", "line-through"  atau kombinasi nilai yang dipisahkan oleh spasi.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Perataan Teks

Parameter: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Tinggi Baris dan Margin

Tinggi baris parameter: Nilai numerik atau persentase ukuran font saat ini.

Margin parameter: Nilai pengukuran, seperti piksel(px), satuan em(em), satuan rem(rem), dll.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Tata Letak Teks Multikolom

Parameter: Bilangan bulat positif atau "auto"(default).

.container {  
  column-count: 2;  
}  

 

Ubah Warna Teks di Hover

Tidak ada parameter khusus, hanya menggunakan pseudo-class :hover.

a:hover {  
  color: red;  
}  

 

Perubahan Warna Teks pada Status(aktif, dikunjungi)

Tidak ada parameter khusus, hanya gunakan pseudo-classes :active  dan :visited.

a:visited {  
  color: purple;  
}  

 

Kami harap penjelasan dan contoh di atas telah membantu Anda memahami cara menggunakan dan menyesuaikan properti pemformatan teks di CSS untuk membuat antarmuka teks yang menarik dan menarik secara visual di situs web Anda.