Desain tipografi yang baik adalah bagian penting dari situs web yang sukses. CSS memberi Anda kendali besar atas tampilan teks pada halaman web halaman web yang Anda buat. Ini termasuk kemampuan untuk mengubah warna font apa pun yang Anda gunakan.
Warna font dapat diubah menggunakan style sheet eksternal, style sheet internal , atau dapat diubah menggunakan style inline dalam dokumen HTML. Praktik terbaik mendikte Anda harus menggunakan style sheet eksternal untuk gaya CSS Anda. Lembar gaya internal, yang merupakan gaya yang ditulis langsung di "kepala" dokumen Anda, umumnya hanya digunakan untuk situs kecil satu halaman. Gaya sebaris harus dihindari karena mereka mirip dengan tag "font" lama yang kita tangani bertahun-tahun yang lalu. Gaya inline membuatnya sangat sulit untuk mengelola gaya font karena Anda perlu mengubahnya pada setiap contoh gaya sebaris.
Dalam artikel ini, Anda akan belajar cara mengubah warna font menggunakan style sheet eksternal dan gaya yang digunakan dalam tag paragraf. Anda dapat menerapkan properti gaya yang sama untuk mengubah warna font pada setiap tag yang mengelilingi teks, termasuk tag
.Menambahkan Styles untuk Mengubah Warna Font
Untuk contoh ini, Anda harus memiliki dokumen HTML untuk markup halaman Anda dan file CSS terpisah yang dilampirkan ke dokumen itu. Dokumen HTML kemungkinan akan membuat sejumlah elemen di dalamnya. Yang kami khawatirkan untuk tujuan artikel ini adalah elemen paragraf.
Berikut adalah cara mengubah warna font teks di dalam tag paragraf menggunakan style sheet eksternal Anda.
Nilai warna dapat dinyatakan sebagai kata kunci warna, nomor warna RGB, atau angka warna heksadesimal.
- Tambahkan atribut gaya untuk tag paragraf:
- p {}
- Tempatkan properti warna dalam gaya. Tempatkan titik dua setelah properti itu:
- p {color:}
- Kemudian tambahkan nilai warna Anda setelah properti. Pastikan untuk mengakhiri nilai itu dengan titik koma:
- p {color: black;}
Paragraf di halaman Anda sekarang akan menjadi hitam.
Contoh ini menggunakan kata kunci warna - "hitam". Itu adalah salah satu cara untuk menambahkan warna dalam CSS, tetapi sangat membatasi. Menggunakan kata kunci untuk "hitam" dan "putih" sangatlah mudah karena kedua warna tersebut sangat spesifik, tetapi apa yang terjadi jika Anda menggunakan kata kunci seperti "merah", "biru", atau "hijau"? Tepatnya warna merah, biru, atau hijau apa yang akan Anda dapatkan? Anda tidak dapat menentukan warna warna mana yang Anda inginkan dengan kata kunci. Inilah sebabnya mengapa nilai heksadesimal sering digunakan sebagai pengganti kata kunci warna.
p {color: # 000000; }
Gaya CSS ini juga akan mengatur warna paragraf Anda menjadi hitam, karena kode hex # 000000 diterjemahkan menjadi hitam. Anda bahkan bisa menggunakan singkatan dengan nilai hex dan menulisnya hanya # 000 dan Anda akan mendapatkan hal yang sama.
Seperti yang telah kami sebutkan, nilai hex bekerja dengan baik ketika Anda membutuhkan warna yang tidak hanya hitam atau putih. Berikut ini contohnya:
p {color: # 2f5687; }
Nilai hex ini akan mengatur paragraf ke warna biru, tetapi tidak seperti kata kunci "biru", kode hex ini memberi Anda kemampuan untuk mengatur warna biru yang sangat spesifik - kemungkinan yang dipilih oleh perancang ketika mereka membuat antarmuka untuk situs ini. Dalam hal ini, warnanya akan menjadi warna biru kisaran menengah, seperti batu tulis.
Akhirnya, Anda dapat menggunakan nilai warna RGBA untuk warna font juga. RGCA sekarang didukung di semua browser modern, sehingga Anda dapat menggunakan nilai-nilai ini dengan sedikit khawatir bahwa itu tidak akan didukung di browser web, tetapi Anda juga dapat mengatur penggantian mudah.
p {color: rgba (47,86,135,1); }
Nilai RGBA ini sama dengan warna biru batu tulis yang ditentukan sebelumnya. 3 nilai pertama mengatur nilai Merah, Hijau, dan Biru dan angka terakhir adalah pengaturan alfa. Ini diatur ke "1", yang berarti "100%", jadi warna ini tidak akan memiliki transparansi. Jika Anda mengaturnya ke angka desimal, seperti .85, itu akan menerjemahkan ke opasitas 85% dan warnanya akan sedikit transparan.
Jika Anda ingin antipeluru nilai warna Anda, Anda akan melakukan ini:
p {
warna: # 2f5687;
warna: rgba (47,86,135,1);
}
Sintaks ini menetapkan kode hex pertama. Ini kemudian menimpa nilai itu dengan nomor RGBA. Ini berarti bahwa browser yang lebih lama yang tidak mendukung RGBA akan mendapatkan nilai pertama dan mengabaikan yang kedua. Browser modern akan menggunakan yang kedua per cascade CSS.