Cara menggunakan merubah ukuran font bootstrap

Question

Dalam tutorial Belajar CSS kali ini kita akan membahas Cara Mengubah Ukuran Font HTML dengan CSS. Property CSS yang akan kita gunakan adalah font-size.

Table of Contents Show

Mengenal Property font-size
Mengatur Ukuran Font
Mengatur Ketebalan Font
Mengatur Font Style
Mengatur Jenis Font
Menggunakan Font dari Google
Apa Selanjutnya?
Apakah sistem grid pada bootstrap bersifat responsive?
Apa itu Bootstrap 4?

Mengenal Property font-size

Untuk mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size. Properti font-size cukup sederhana dan ditulis seperti contoh berikut ini:

p {
   font-size: 14px;
}

Dengan menulis kode CSS diatas, semua teks di dalam tag akan memiliki font dengan ukuran 14 pixel.

Yang membuat menarik (dan juga memusingkan) adalah CSS menyediakan banyak “satuan ukuran” teks yang bisa dipilih, dimulai dari pixel seperti contoh diatas, keyword seperti small, medium, large, ukuran satuan persen, em, dan juga ukuran lain seperti cm, mm, pt, dan pica.

Ukuran satuan cm, mm, pt dan pica berasal dari media cetak seperti koran dan majalah. Satuan ini cocok untuk media yang bersifat pasti (dimana kita bisa menentukan sendiri ukuran kertas yang akan digunakan). Namun satuan ukuran tersebut tidak cocok di dalam media elektronik seperti web. Karena media yang digunakan oleh pengunjung web bisa bermacam-macam mulai dari smartphone dengan lebar layar 2 inchi sampai dengan monitor desktop 20 inchi atau lebih. Satuan ukuran cm, mm, pt dan pica menjadi tidak relevan, sehingga jarang digunakan.

Dalam contoh diatas, untuk paragraf pertama dengan class=”satu” saya membuat ukuran text sebesar 100%. Karena tag <body> yang berfungsi sebagai parent element tidak memiliki ukuran text, maka ukuran 100% jatuh kepada base text size web browser yang berukuran 16pixel. Paragraf kedua saya buat berukuran 16px sebagai perbandingan.

Untuk paragraf ketiga, saya membuat ukurannya sebesar 80%. Sehingga ukuran teks menjadi 80%*16px=12.8px.

Di dalam paragraf ketiga, terdapat tag yang juga memiliki ukuran font sebesar 80%. Namun karena parent elemen dari tag adalah tag , maka ukuran akhir fontnya di dapat dari perhitungan 80%*12.8px=10.24px. Saya sengaja mengubah warna font menjadi biru untuk menandakan bagian tag yang jika diperhatikan berukuran lebih kecil dibandingkan tag ketiga, walaupun ukuran teks sama-sama di set sebesar 80%.

Contoh kode CSS dan HTML diatas hampir sama dengan contoh yang kita gunakan dalam contoh satuan persen. Namun perhatikan bahwa saya mendefenisikan ukuran font untuk tag <body> sebesar 14px, sehingga tag lain yang menggunakan satuan em akan menyesuaikan ukuran dengan patokan base font 14px.

Karena satuan em akan menggunakan parent element sebagai rujukan ukuran font, maka ukuran tag <body> sebesar 14px akan menjadi ukuran dasar untuk semua tag. Dengan menggunakan cara seperti ini saya dapat dengan mudah mengubah ukuran font untuk seluruh halaman dengan tetap mempertahankan ukuran proporsional nya. Lebih jauh lagi, konsep ini juga menjadi salah satu dasar pembuatan layout responsive (Responsive Web Design)

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Pada tutorial sebelumnya, kita sudah belajar gimana cara mengatur teks dengan CSS seperti mengatur alignment, spacing, transform, dan sebagainya.

Kali ini kita akan membahas tentang properti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

4 yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.

Ada beberapa properti yang akan kita bahas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

5 untuk mengatur ukuran font;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

6 untuk mengatur ketebalan font;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

7 untuk mengatur gaya font;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

8 untuk mengatur jenis font;

Mari kita mulai..

Mengatur Ukuran Font

Untuk mengatur ukuran font, kita bisa menggunakan properti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

5. Properti ini dapat kita beri nilai dengan satuan

p {
  font-weight: bold;
}

0 (piksel),

p {
  font-weight: bold;
}

1 (persentase),

p {
  font-weight: bold;
}

2,

p {
  font-weight: bold;
}

3, dan lain-lain.

Contoh:

p {
  font-size: 18px;
}

Artinya:

Kita akan mengatur ukuran font untuk semua elemen

p {
  font-weight: bold;
}

4 sebesar

p {
  font-weight: bold;
}

5.

Secara default ukuran font untuk elemen

p {
  font-weight: bold;
}

4 adalah

p {
  font-weight: bold;
}

7. Ini bisa kita ubah sesuai selera.

Selain menggunakan angka, ada juga nilai bawaan yang sudah tersedia seperti:

```
p {
  font-weight: bold;
}
```
8 untuk ukuran normal (16px);
```
p {
  font-weight: bold;
}
```
9 untuk ukuran kecil;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

0 untuk ukuran besar;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

1 untuk ekstra besar;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

2 untuk ekstra-ekstra besar;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

3 untuk teks yang lebih kecil dari

p {
  font-weight: bold;
}

9;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

5 untuk teks yang dua kali lebih kecil dari

p {
  font-weight: bold;
}

9;

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

7, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada contoh ini, kita mengatur ukuran font untuk elemen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

8 adalah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

9. Kamu bisa lihat sendiri hasilnya.

Lalu ukuran font pada paragraf pertama adalah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

0 yang artinya lebih besar dari ukuran normal (

p {
  font-weight: bold;
}

7).

Kemudian pada paragraf kedua, kita tidak mengatur ukuran font-nya. Sehingga akan menggunakan ukuran normal, yakni

p {
  font-weight: bold;
}

7.

Kemudian paragraf terakhir kita beri ukuran font-nya dengan

p {
  font-weight: bold;
}

9.

Sangat mudah bukan.

Silahkan coba eksperimen di inspect elemen, ubahlah ukuran font-nya dari sana.

Mengatur Ketebalan Font

Untuk mengatur ketebalan font, kita bisa menggunakan properti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

6. Properti ini dapat kita berikan nilai berupa angka ukuran ketebalan atau nilai konstan yang sudah ada.

Contoh nilai-nilai yang valid:

```
body {
	font-family: roboto;
}
```
5 untuk ketebalan yang tipis;
```
p {
  font-weight: bold;
}
```
8 untuk ketebalan normal;
```
body {
	font-family: roboto;
}
```
7 untuk membuat font lebih tabal;
```
body {
	font-family: roboto;
}
```
8 untuk membuat font lebih tebal lagi;

body {
	font-family: roboto;
}

9 sampai

blockquote {
	font-style: italic;
}

0 rentang angka ketebalan.

Contoh penggunaan:

p {
  font-weight: bold;
}

Artinya:

Kita akan mengatur ketebalan font semua elemen

p {
  font-weight: bold;
}

4 dengan font yang lebih tebal.

Mari kita coba latihan!

Buatlah file HTML baru dengan nama

blockquote {
	font-style: italic;
}

2, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada paragraf pertama, kita mengatur ketebalan font-nya dengan

body {
	font-family: roboto;
}

5, akan tetapi hasilnya normal.

Mengapa?

Ini karena font yang digunakan tidak memiliki font dengan ketebalan tipis atau

body {
	font-family: roboto;
}

5.

Coba ganti jenis font-nya, misalnya pakai roboto.

Tambahkan CSS berikut:

body {
	font-family: roboto;
}

Pastikan font

blockquote {
	font-style: italic;
}

5 sudah terinstal di komputermu.

Maka hasilnya akan seperti ini:

Ketebalan font pada paragraf pertama akan lebih tipis, karena font Robotopunya ketebalan

body {
	font-family: roboto;
}

5.

Mengatur Font Style

Properti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

7 digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah:

```
p {
  font-weight: bold;
}
```
8 – teks normal;
```
blockquote {
	font-style: italic;
}
```
9 – teks miring (italic);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

0 – teks miring seperti italic;

Contoh:

blockquote {
	font-style: italic;
}

Artinya:

Kita akan mengatur } } semua elemen

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Font Style</title> <style> blockquote { font-style: italic; font-size: larger; color: dodgerblue; cite { font-size: small; font-style: normal; color: fuchsia; </style> </head> <body> <h1>Contoh Font Style</h1> <blockquote> "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup". <cite>~ Jeff Ross</cite> </blockquote> </body> </html>

1 dengan style font miring.

Biar lebih jelas, mari kita coba latihan.

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

2, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada contoh ini, kita mengatur font style untuk elemen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

1 menjadi

blockquote {
	font-style: italic;
}

9 dan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

5 menjadi

p {
  font-weight: bold;
}

8.

Mengatur Jenis Font

Untuk mengatur jenis font, kita bisa gunakan properti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

8. Properti ini bisa kita isi dengan nama font dan juga nama family dari font.

Secara umum ada lima jenis family font:

Sans Serif – Font tanpa tanduk;
Serif – Font yang ujungnya punya tanduk;
Monospace – Font dengan ukuran space yang sama;
Cursive – Font seperti tulisan tangan;
Fantasy – Font dengan bentuk yang menarik.

Contoh:

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

Hasilnya:

Font yang dipakai akan menggunakan default font yang dipakai pada sistem.

Selain menggunakan nama family, kita juga bisa menggunakan nama font-nya langsung.

Mari kita coba!

Buatlah file HTML baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Style</title>
    <style>
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Style</h1>
    <blockquote>
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        <cite>~ Jeff Ross</cite>
    </blockquote>
</body>
</html>

8, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

Setelah itu, buka dengan browser.

Maka hasilnya:

Coba perhatikan pada kode CSS untuk elemen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Weight</title>
    <style>
        h1 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Weight</h1>
    <p class="light">Font Weight berfungsi untuk Menentukan Ketebalan Font</p>
    <p class="bold">Ini adalah contoh paragraf dengan font-weight bold</p>
</body>
</html>

8.

h1 {
	font-family: Arial, Helvetica, sans-serif;
}

Pada kode CSS ini, kita menggunakan tiga font, yakni

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

0,

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

1, dan

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

2.

Jika di komputer kita tidak ada font

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

0, maka font

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

1 yang akan dipakai. Begitu juga jika tidak ada font

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

1, maka font

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

2 yang akan dipakai.

Selain menggunakan font yang sudah terinstal di komputer, kita juga bisa menggunakan font yang ada di internet. Contohnya seperti Google Font.

Mari kita pelajari..

Menggunakan Font dari Google

Untuk menggunakan font dari Google Font, kita harus mengimpor font-nya terlebih dahulu dengan tag

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

7 di HTML atau kata kunci

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

8 di CSS.

Contoh: dengan tag

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

7 di HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

0

Contoh: dengan kata kunci

<h1 style="font-family: sans-serif">Font Sans</h1>
<h1 style="font-family: serif">Font Serif</h1>
<h1 style="font-family: monospace">Font Monospace</h1>
<h1 style="font-family: cursive">Font Cursive</h1>
<h1 style="font-family: fantasy">Font Fantasy</h1>

8 di CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

1

Biar lebih paham, mari kita coba latihan.

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

1, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

2

Pada contoh ini kita belum mengimpor font dari Google.

Maka tampilannya akan seperti ini:

Font yang digunakan adalah font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

2 yang ada di komputer.

Sekarang mari kita coba tambahkan font dari Google.

Silahkan buka font berikut:

Permanent Marker
Caveat

Setelah itu, klik Select this style.

Setelah itu, kita akan mendapatkan kode untuk mengimpor font ke HTML.

Silahkan copy kode tersebut, kemudian taruh di dalam tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

3 kode kita.

Sehingga sekarang kodenya menjadi seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Font Size</title>
  <style>
    h1 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  </style>
</head>
<body>
  <h1>Contoh Font Size</h1>
  <p class="font-big">Ini adalah paragraf dengan ukuran font besar</p>
  <p>Ini adalah paragraf dengan ukuran font normal</p>
  <p class="font-small">Ini adalah paragraf dengan ukuran font kecil</p>
</body>
</html>

3

Maka hasilnya:

Mantap, sekarang font yang digunakan adalah font dari Google.

Apa Selanjutnya?

Kita sudah belajar mengatur font dengan properti

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

4, sebenarnya masih ada lagi properti yang belum kita bahas seperti

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

5,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

6,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Font Family</title>
    <style>
        h1 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    </style>
</head>
<body>
    <h1>Contoh Font Family</h1>

    <p>Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    </p>
</body>
</html>

7, dan sebagainya.

Yang sudah kita bahas di atas, adalah yang paling sering dipakai. Sisanya silahkan lakukan eksperimen sendiri di inspect element.

Apakah sistem grid pada bootstrap bersifat responsive?

Menariknya lagi, Bootstrap bersifat responsive berkat grid system yang digunakan. Sistem grid pada bootstrap menggunakan rangkaian containers, baris, dan kolom untuk menyesuaikan bentuk layout dan konten website kamu.

Apa itu Bootstrap 4?

Apa itu Bootstrap 4? Bootstrap adalah framework CSS untuk membuat tampilan web. Bootstrap menyediakan class dan komponen yang siap dipakai, sehingga kita tidak perlu menulis kode CSS dari nol.

kode bootstrap