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 properti ukuran font CSS.
Jika Anda mencari cara untuk mengubah ukuran font HTML menggunakan CSS, kami siap membantu Anda. Mari selami dengan memulai dengan pengenalan properti ukuran font CSS.
Memahami Properti ukuran font CSS
Properti font-size 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 properti font-size. Jika Anda ingin tajuk menonjol, ada tag tajuk HTML yang berbeda.
Properti ukuran font CSS mengambil dua jenis nilai yaitu absolut dan relatif.
Nilai panjang absolut (yaitu px) tetap sedangkan nilai relatif (misalnya em dan ex) 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 (<html>).
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 syntax CSS standar.
Pertama, tentukan pemilih (teks yang ingin Anda ubah) dan buka beberapa kurung kurawal. Selanjutnya, masukkan properti font-size diikuti dengan titik dua, tentukan ukuran spesifik yang Anda inginkan untuk menyajikan teks HTML Anda, dan tutup dengan titik koma.
Berikut syntax :
CSS selector {
font-size: value;
}
Untuk memahami konsep dengan lebih baik, tinjau boilerplate HTML berikut yang memiliki beberapa baris kode tambahan (judul dan paragraf):
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Simple HTML Page</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>This is my first heading</h1>
<p>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.</p>
</body>
</html>
Jika Anda ingin mengubah ukuran font elemen paragraf, Anda harus memilihnya (melalui kelas, tag, atau id) dan, menggunakan properti ukuran font CSS, tetapkan nilai khusus dengan unit pilihan Anda. Dalam contoh kita, kita akan menggunakan piksel (px).
p {
font-size: 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:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Simple HTML Page</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>This is my first heading</h1>
<p style=”font-size:18px”>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.</p>
</body>
</html>
Teks dalam tag HTML p sekarang akan memiliki ukuran kustom baru.