Cara Mengubah Warna Font Website Dengan CSS

Cara Mengubah Warna Font Website Dengan CSS – CSS memberi Anda kontrol atas tampilan teks di halaman web yang Anda buat dan kelola. Dalam panduan ini, kami menunjukkan kepada Anda cara mengubah warna font di CSS menggunakan kata kunci warna, kode warna heksadesimal, atau nomor warna RGB.

Cara Mengubah Warna Font Website Dengan CSS

Nilai warna dapat dinyatakan sebagai kata kunci warna, nomor warna heksadesimal, atau nomor warna RGB. Untuk pelajaran ini, Anda perlu memiliki dokumen HTML untuk melihat perubahan CSS dan file CSS terpisah yang dilampirkan ke dokumen itu.

Jika anda belum mengenal CSS maka anda bisa membaca artikel berikut :

Menggunakan keyword Warna untuk Mengubah Warna Font

Untuk mengubah warna teks untuk setiap paragraf dalam file HTML Anda, buka style sheet eksternal dan ketik p {}. Tempatkan properti warna dalam gaya diikuti oleh titik dua, seperti p {color:}. Kemudian, tambahkan nilai warna Anda setelah properti, akhiri dengan titik koma. Dalam contoh ini, teks paragraf diubah menjadi warna hitam:

p {
color: black;
}

Menggunakan Nilai Heksadesimal untuk Mengubah Warna Font

Menggunakan kata kunci warna untuk mengubah teks menjadi merah, hijau, biru, atau beberapa warna dasar lainnya tidak akan memberi Anda ketepatan yang mungkin Anda lihat saat membuat corak yang berbeda dari warna-warna tersebut. Untuk itulah nilai heksadesimal.

Style CSS ini dapat digunakan untuk mewarnai paragraf Anda menjadi hitam karena kode hex # 000000 diterjemahkan menjadi hitam. Anda bahkan dapat menggunakan singkatan dengan nilai hex tersebut dan menuliskannya sebagai # 000 dengan hasil yang sama.

p { 
  color: #000000; 
}  

Nilai hex berfungsi dengan baik saat Anda membutuhkan warna yang tidak hanya hitam atau putih. Misalnya, kode heksa ini memberi Anda kemampuan untuk menetapkan bayangan biru yang sangat spesifik — biru seperti batu tulis tingkat menengah:

p { 
  color: #2f5687;
}

Hex bekerja dengan mengatur nilai RGB (red,green,blue) dari suatu warna secara terpisah dengan nilai basis enam belas. Itu sebabnya mereka mengandung huruf A sampai F selain angka 0 sampai 9.

Setiap warna, merah, hijau, dan biru, menerima nilai dua digitnya sendiri. 00 adalah nilai serendah mungkin, sedangkan FF adalah yang tertinggi. Warna dicantumkan dalam urutan RGB dalam hex, jadi dua digit pertama mewakili nilai merah dan seterusnya.

Menggunakan Nilai Warna RGBA untuk Mengubah Warna Font

Terakhir, Anda dapat menggunakan nilai warna RGBA untuk mengedit warna font. RGCA didukung di semua browser modern, sehingga Anda dapat menggunakan nilai-nilai ini dengan keyakinan bahwa ini akan bekerja untuk sebagian besar pemirsa, tetapi Anda juga dapat mengatur penggantian dengan mudah.

p { 
  color: rgba(47,86,135,1);
}

Tiga nilai pertama mengatur nilai Merah, Hijau, dan Biru dan angka terakhir adalah pengaturan alpha untuk transparansi. Pengaturan alpha diatur ke 1 berarti 100 persen, jadi warna ini tidak memiliki transparansi. Jika Anda menyetel nilai itu ke angka desimal, seperti 0,85, itu berarti 85 persen opasitas dan warnanya akan sedikit transparan.

Jika Anda ingin antipeluru nilai warna Anda, salin kode CSS ini:

p {
  color: #2f5687;
  color: rgba(47,86,135,1);
}  

Sintaks ini menetapkan kode hex terlebih dahulu dan kemudian menimpa nilai itu dengan nomor RGBA. Ini berarti bahwa browser lama yang tidak mendukung RGBA akan mendapatkan nilai pertama dan mengabaikan nilai kedua.

Penting untuk diingat bahwa properti warna berfungsi pada elemen teks HTML apa pun di CSS. misalnya, mengubah semua warna tautan Anda. Contoh ini akan membuat tautan Anda menjadi hijau cerah:

a {
color: #16c616;
}

Ini berfungsi dengan banyak elemen sekaligus. Anda dapat mengatur setiap level judul secara bersamaan. Misalnya, ini akan menyetel semua elemen judul Anda menjadi warna biru tengah malam:

h1, h2, h3, h4, h5, h6 {
color: #020833;
}

Menghasilkan nilai hex atau RGBA untuk warna Anda tidak selalu mudah. Sebagian besar perancang web akan menggunakan program pengeditan gambar, seperti Photoshop atau GIMP, untuk menghasilkan kode yang tepat.

Cara Lain untuk Menata Halaman HTML

Warna font dapat diubah dengan style sheet eksternal, atau gaya sebaris dalam dokumen HTML. Namun, praktik terbaik mengharuskan Anda menggunakan lembar gaya eksternal untuk style CSS Anda.

Style sheet internal, yang merupakan gaya yang ditulis langsung di “head” dokumen Anda, biasanya hanya digunakan untuk situs web kecil satu halaman. Gaya sebaris harus dihindari karena mirip dengan tag “font” lama yang kita tangani bertahun-tahun yang lalu. Gaya sebaris tersebut menyulitkan pengelolaan gaya font karena Anda harus mengubahnya di setiap contoh gaya sebaris.

0 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like