Catatan: Halaman ini terkait dengan perubahan jenis font, ukuran, dan warna pada halaman web. Untuk Microsoft Word, lihat halaman kami tentang cara mengubah warna font, ukuran, atau ketik Word.

Dokumen ini berisi instruksi tentang cara mengubah font dan warnanya pada halaman web. Sintaks yang tepat bergerak maju adalah menggunakan Cascading Style Sheets bersama dengan kelas atau pemilih ID daripada atribut gaya inline atau tag font, yang sudah usang. Meskipun, perlu dicatat bahwa kedua metode ini masih berfungsi dengan sebagian besar browser Internet.

Untuk melanjutkan, pilih metode yang ingin Anda pelajari atau baca setiap bagian.

Jika Anda berencana mengubah wajah font dan warnanya hanya sekali di halaman web, Anda perlu mengubah atributnya di tag elemen. Dengan menggunakan atribut style, Anda dapat menentukan wajah dan warna font dengan keluarga font, warna, dan ukuran font dengan ukuran font, seperti yang ditunjukkan pada contoh di bawah ini.

Kode contoh

Teks ini memiliki font Courier, adalah Blue, dan 20px.

Hasil

Teks ini memiliki font Courier, berwarna Biru, dan berukuran 20px.

Menggunakan CSS untuk satu halaman atau lebih

Fon khusus untuk satu halaman

Di bagian kepala halaman web Anda, Anda dapat memasukkan kode di antara tab untuk mengubah tampilan teks Anda dalam berbagai elemen. Kotak biru berikutnya berisi contoh kode yang, begitu dipanggil, akan mengubah wajah font Anda menjadi Kurir dan mewarnainya merah. Seperti yang Anda lihat, kami telah mendefinisikan nama kelas sebagai "kebiasaan."

 .custom {font-family: Courier; warna merah; ukuran font: 20px; } 

Setelah ditentukan, gaya ini dapat diterapkan ke sebagian besar elemen di halaman Anda dengan melampirkan "kustom" kelas untuk mereka. Kotak berikut menunjukkan dua baris kode dan hasil masing-masing.

Contoh

Seluruh kalimat ini berwarna merah dan Kurir

Hanya kata TEST berwarna merah dan Kurir.

Hasil

Seluruh kalimat ini berwarna merah dan Kurir.

Hanya kata TEST berwarna merah dan Kurir.

Font khusus untuk banyak halaman

Mengimpor file CSS eksternal bisa sangat bermanfaat karena memungkinkan pengguna untuk mengubah aturan untuk beberapa halaman secara bersamaan. Bagian berikut menunjukkan contoh untuk membuat file CSS dasar yang mengubah font dan warnanya untuk sebagian besar elemen. File ini dapat dimuat ke lebih dari satu halaman web, bahkan seluruh situs.

Menggunakan editor teks dasar apa pun, menyimpan teks berikut sebagai file .css akan menyiapkannya untuk diimpor.

 @charset "utf-8";
.courier {font-family: Courier; warna: # 005CB9; } 

Setelah teks sebelumnya ditempatkan ke dalam file .css (kami telah menamai milik kami basic.css ), Anda dapat menautkannya dari halaman lain menggunakan baris yang mirip dengan contoh berikut.

Tip: Pengguna dapat mengubah atribut elemen pada halaman dengan mengubah kode pada file .css yang diimpor.

Solusi tag font

Meskipun sudah usang, tag HTML masih dapat digunakan dan mungkin perlu digunakan dengan beberapa layanan online. Saat menggunakan tag FONT, Anda harus menyertakan atribut wajah, yang menjelaskan font yang akan digunakan. Pada contoh di bawah ini, kami menggunakan font Courier dan kode warna heksadesimal # 005CB9, yang merupakan biru tua.

Kode contoh

 Contoh font khusus. 

Hasil