Mampu menata berbagai aspek halaman HTML Anda adalah keterampilan penting bagi desainer dan pengembang web. Untuk menata halaman web HTML Anda dengan warna dan ukuran font, Anda harus terbiasa dengan CSS. Untuk menargetkan ukuran font secara khusus, Anda dapat menggunakan CSS ukuran huruf Properti.

Jika Anda mencari cara untuk mengubah ukuran font HTML menggunakan CSS, kami siap membantu Anda. Mari selami dengan memulai dengan pengenalan CSS ukuran huruf Properti.

Memahami Properti ukuran font CSS

Itu ukuran huruf properti di CSS berguna ketika Anda perlu mengubah ukuran teks HTML. Anda dapat menggunakan properti ini untuk mengubah ukuran setiap bagian teks pada halaman HTML atau menargetkan elemen tertentu untuk diubah.

Menargetkan elemen tertentu biasanya disarankan karena Anda biasanya tidak ingin semuanya memiliki ukuran yang sama. Teks yang tidak mengikuti hierarki visual sulit untuk dipindai dan membedakan judul tingkat tinggi dari yang tingkat rendah.

Dalam istilah yang lebih sederhana, jangan menyalahgunakan

ukuran huruf Properti. Jika Anda ingin tajuk menonjol, ada tag tajuk HTML yang berbeda untuk itu. Lihat kami Lembar contekan dasar-dasar HTML untuk berbagai tag, atribut, dan lainnya beserta penjelasannya.

CSS ukuran huruf properti mengambil dua jenis nilai: absolut dan relatif.

Nilai panjang absolut (mis. px) diperbaiki sementara yang relatif (mis. em dan mantan) bersifat fleksibel. Misalnya, untuk unit relatif font seperti em, ukurannya biasanya ditentukan oleh ukuran font elemen induk. Namun, unit relatif font berbasis root seperti rem dipengaruhi oleh ukuran font elemen root ().

Masing-masing memiliki pro dan kontra, tetapi pada intinya menjaga agar tetap fokus, kami tidak akan membahasnya di artikel ini.

Cara Mengubah Ukuran Font Elemen HTML di CSS

Anda dapat mengubah ukuran font teks HTML dengan menggunakan beberapa sintaks CSS standar.

Pertama, tentukan pemilih (teks yang ingin Anda ubah) dan buka beberapa kurung kurawal. Selanjutnya, masukkan ukuran huruf properti diikuti oleh titik dua, tentukan ukuran spesifik yang Anda inginkan untuk menyajikan teks HTML Anda, dan tutup dengan titik koma.

Berikut sintaksnya:

pemilih CSS {
 ukuran font: nilai;
}

Untuk memahami konsep dengan lebih baik, tinjau boilerplate HTML berikut yang memiliki beberapa baris kode tambahan (judul dan paragraf):

Ini judul pertama saya

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jika Anda ingin mengubah ukuran font elemen paragraf, Anda harus memilihnya (melalui kelas, tag, atau id) dan, menggunakan CSS ukuran huruf properti, tetapkan nilai khusus dengan unit pilihan Anda. Dalam contoh kita, kita akan menggunakan piksel (px).

P {
 ukuran font: 18px;
}

Meskipun CSS sebaris umumnya tidak disarankan dalam proyek besar, Anda juga dapat menggunakannya untuk mengubah ukuran teks HTML. Mengambil catatan dari kode CSS eksternal di atas, kita dapat mengimplementasikan hal yang sama sebaris seperti:

Ini judul pertama saya

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Teks di P Tag HTML sekarang akan memiliki ukuran khusus baru.

Terkait: Tip dan Trik Penting CSS yang Harus Diketahui Setiap Pengembang

Memecahkan Masalah Kesalahan Saat Mengubah Ukuran Font HTML di CSS

Sementara seluruh proses mengubah ukuran teks dalam CSS mungkin tampak mudah, mungkin tidak selalu berjalan persis seperti yang Anda harapkan. Jika Anda mengalami masalah, mulailah dengan memeriksa apakah Anda menyimpan perubahan ke file Anda (juga, pastikan Anda menautkan lembar CSS Anda ke file HTML Anda). Jika ya, coba gunakan metode sebaris, lalu segarkan halaman.

Jika berhasil, mungkin ada masalah dengan kode CSS Anda. Coba gunakan !penting tag, dan jika berhasil, pasti ada beberapa kode yang bertentangan. Parsing kode CSS Anda baris demi baris untuk mencoba dan menangkap kesalahan itu.

10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Butuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya

Tentang Penulis