CSS Dasar

Masih melanjutkan dari file css dan html modul sebelumnya. Pada modul ini kita akan membuat button dengan menggunakan CSS. Buka file css lalu copy css berikut. Penambahan ada dibagian .main-nav-item-button a dan .main-nav-item-button a:hover. Sementara untuk file html, tambahkan class main-nav-item-button pada link Mulai Berlangganan. Cukup dengan menambahkan warna background, dan memberikan round border, kita … Read more

Melanjutkan dari modul sebelumnya, disini kita akan menambahkan styling untuk tag a href. Buka file css dan copy css berikut. Yang perlu diperhatikan adalah class .main-nav-item a dan .main-nav-item a:hover. Element <a href> Class .main-nav-item a untuk mengatur agar a href tidak memiliki garis bawah dan berwarna whitesmoke. Element a href berguna sebagai link yang … Read more

Sebelum memulai tutorial, silakan copy file html berikut. Penambahan kode dari modul sebelumnya adalah section header untuk menu. Display property adalah property untuk mengatur bagaimana element akan ditampilkan oleh browser. Jika file atas dibuka dibrowser, menu dari element <ul> akan disusun kebawah. Hal ini disebabkan ul adalah block type element, dimana property display bernilai default … Read more

Mari kita pahami dulu element html dapat dikategorikan dalam 2 tipe, yaitu block level element, contoh: div, h1 inline level element, contoh: a Block element secara default akan memiliki 100% width terhadap container. Sementara inline element memiliki width sesuai contentnya. Saat mengatur width block level element (misalnya div), perlu dipahami property box-sizing. Untuk lebih jelasnya, … Read more