Ukuran Font

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 19 dari 76.

Dalam CSS, property font-size digunakan untuk mengatur ukuran teks di dalam elemen HTML.

Berikut beberapa satuan umum yang digunakan untuk menentukan ukuran font:

Pixels (px): Satuan absolut yang menentukan ukuran font dalam piksel. Ini adalah satuan yang paling sederhana dan umum digunakan untuk mengatur ukuran font.

Ems (em): Satuan relatif yang didasarkan pada ukuran font elemen induk. Misalnya, jika elemen induk memiliki ukuran font 16px, maka 1em sama dengan 16px, 2em sama dengan 32px, dan seterusnya.

Rem (rem): Satuan relatif yang didasarkan pada ukuran font elemen root (<html>). Satuan ini memberikan konsistensi yang lebih baik di seluruh dokumen karena tidak terpengaruh oleh ukuran font elemen induk.

Persentase (%): Unit relatif yang didasarkan pada ukuran font elemen induk, mirip dengan em. Misalnya, jika elemen induk memiliki ukuran font 16px, maka 100% sama dengan 16px, 150% sama dengan 24px, dan seterusnya.

Contohnya:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Dalam contoh ini, ukuran font semua elemen <p> (paragraf) diatur ke 16px, semua judul <h1> diatur ke 2.5em (yang akan relatif terhadap ukuran font elemen induknya), ukuran font dasar dokumen diatur ke 1.4rem, dan semua elemen dengan class small-text memiliki ukuran font 80% (yang akan relatif terhadap ukuran font elemen induknya).

Tantangan

Mudah

Kamu diberi dokumen HTML dengan heading (<h1>), paragraf (<p>), dan division (<div>). Tugasmu adalah menggunakan property font-size untuk mengatur gaya elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h1>. Atur font-size menjadi 32px.
Tulis aturan CSS yang menargetkan elemen <p>. Atur font-size menjadi 1.2em.
Tulis aturan CSS yang menargetkan elemen <div>. Atur font-size menjadi 120%.

Coba sendiri

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>