Memahami CSS Positioning

Properti position berfungsi untuk memanipulasi lokasi dari sebuah element. static: adalah nilai default, element akan mengikut page flow. Property left/right/top/bottom/z-index tidak akan berefek. relative: element position akan tetap mengikut flow dari document, seperti static. Namun sekarang property left/right/top/bottom/z-index akan berefek. absolute: element dikeluarkan dari document flow. fixed: sama seperti absolute. Namun context posisi relatif terhadap … Read more

Sharing is caring:

Latihan CSS Dasar

Mari kita latihan dengan mengembangkan webpage menjadi lebih informatif dengan teori yang sudah dipelajari dari modul sebelumnya. Disarankan anda mencoba dahulu sebelum mengcopy dari html dan css yang disediakan. Berikut screen capture hasil akhir dari latihan. Buka file index.html, ubah bagian <section> kedua menggunakan html berikut Untuk css, tambahkan css berikut Property baru pada modul … Read more

Sharing is caring:

Perbedaan Class dan ID

ID harus Unik Satu element hanya bisa memiliki 1 ID Satu page hanya bisa memiliki 1 ID ID memiliki manfaat lain, yaitu dapat diakses melalui # pada URL. Contoh: www.example.com#comments, browser akan mencari element dengan ID comments dan halaman akan discroll otomatis ke element tersebut. Class tidak Unik Satu element dapat memiliki lebih dari 1 … Read more

Sharing is caring:

Background Image

Web tanpa image tentu terasa flat. Pada modul ini kita akan menambahkan background image pada element <section> kedua. Untuk menggunakan image, kita gunakan fungsi url() pada property background. Dimana link_image dapat berupa local file atau internet file. Ubah class #product-title seperti dibawah: background-repeat: no-repeat; mencegah image diulang pada area kosong. background-size: cover; image akan di … Read more

Sharing is caring: