p {
padding-left: 10px;
text-align: justify;
}
Pada contoh di atas, kita menggunakan property margin-bottom pada tag < h1> untuk memberikan jarak antara teks dengan elemen di bawahnya. Selain itu, kita juga menggunakan property text-align untuk mengatur alignment pada teks, yaitu center pada tag < h1> dan justify pada tag < p>. Selain itu, kita juga menggunakan property line-height untuk mengatur jarak antara baris pada tag < h1>.
Contoh Pembelajaran Typography CSS
Misalkan kita ingin membuat sebuah halaman web yang berisi artikel tentang teknologi. Untuk membuat tampilan teks pada artikel tersebut lebih menarik dan mudah dibaca oleh pengguna, kita dapat menggunakan teknik typography CSS. Berikut adalah contoh pembelajaran typography CSS untuk halaman web artikel tentang teknologi tersebut:
1. Menentukan Font Family CSS
Pertama-tama, kita harus menentukan jenis huruf yang akan digunakan pada artikel tersebut. Karena artikel tersebut berisi tentang teknologi, kita dapat menggunakan jenis huruf modern seperti Open Sans atau Lato. Kita dapat menambahkan font family CSS pada body untuk menentukan jenis huruf yang akan digunakan pada seluruh halaman web.
body {
font-family: 'Open Sans', sans-serif;
}
2. Ukuran Font CSS
Setelah menentukan jenis huruf yang akan digunakan, kita juga harus menentukan ukuran huruf yang tepat agar teks pada artikel mudah dibaca oleh pengguna. Kita dapat menentukan ukuran font CSS pada tag < h1> dan tag < p>.
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.5;
}
Pada contoh di atas, kita menentukan ukuran font 36px pada tag < h1> dan 18px pada tag < p>. Selain itu, kita juga memberikan property margin-bottom pada tag < h1> untuk memberikan jarak antara teks dengan elemen di bawahnya, dan memberikan property line-height pada tag < p> untuk mengatur jarak antara baris pada teks.
3. Warna Font CSS
Selain menentukan jenis huruf dan ukuran huruf, kita juga harus menentukan warna teks yang akan digunakan pada artikel tersebut. Kita dapat menentukan warna font CSS pada tag < h1> dan tag < p>.
h1 {
color: #333333;
}
Follow us on
