Percobaan 1 : Mengatur Width Dan Height
Analisa : Terlihat di atas kalau width dan height dari tag <p></p> dan <div></div> berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color yang berbeda seperti di atas
Percobaan 2 : Membatasi Lebar Minimal dan Maksimal Dengan Min-Width dan Max-Width
Analisa : Min-Width dan Max-Width berguna untuk membatasi ukuran minimum dan maksimum lebar setiap bagian dari kode HTML sesuai dengan value yang diinputkan. Berguna apabila web diakses di bidang yang memiliki resolusi layar atau luas layar yang berbeda. Misalnya, kalo ditampilkan di desktop maka lebarnya akan berbeda (akan mencapai max-width) saat ketika web dibuka di mobile device (mencapai min-width.
Percobaan 3 : Membatasi Tinggi Minimal dan Maksimal Dengan Min-Width dan Max-Width
Analisa : Min-Height dan Max-Height berguna untuk membatasi ukuran minimum dan maksimum tinggi setiap bagian dari kode HTML sesuai dengan value yang diinputkan. Berguna apabila web diakses di bidang yang memiliki resolusi layar atau luas layar yang berbeda. Misalnya, kalo ditampilkan di desktop maka lebarnya akan berbeda (akan mencapai max-height) saat ketika web dibuka di mobile device (mencapai min-height)
Percobaan 4 : Menerapkan Overflow
Analisa : Bisa dilihat di atas di bagian artikel pertama bacaannya tidak tampil penuh karena lebar bidang yang sudah ditentukan baginya tidak cukup untuk menampung sisa bacaannya sehingga kalimat sisanya disembunyikan karena value hidden dari property overflow yang diberikan. Sementara di artikel yang kedua kita melihat ada navigasi scroll untuk melihat kalimat bacaan yang tidak terlihat karena tidak cukupnya bidang yang menampungnya. Terjadi karena peran dari value scroll dari property overflow.
Percobaan 5 : Ukuran Lebar Garis Tepi Analisa : Value dari property border-width bisa diisi dengan berbagai cara seperti dengan nilai dalam satuan pixel, dengan pernyataan thick (tebal) setara dengan sekitar 3-4px atau thin (tipis) setara dengan 1-2px. Atau dengan memasukkan nilai dalam satuan pixel dengan 4 nilai dengan cara membaca searah dengan arah jarum jam secara berurutan (atas, kanan, bawah, kiri.
Percobaan 6 : Menerapkan Border Style
Analisa : Contoh di atas merupakan berbagai value dari property border-style dengan berbagai value dalam bentuk pernyataan (solid, dashed, dotted, dll)
Percobaan 7 : Menerapkan Warna Pada Garis Tepi Analisa : Berbagai cara penerapan value dari property border-style bisa dilihat contoh kode di atas
Percobaan 8 : Padding Analisa : Padding berarti memberi jarak konten dari garis atau batas tepi penampungnya (Memberi jarak dari dalam bidang penampung). Bisa dimasukkan dalam nilai satuan pixel (px) atau persen (%).
Percobaan 9 : Margin
Analisa : Margin berarti memberi jarak antara bidang satu dengan bidang lainnya. Seperti contoh di atas.
Percobaan 10 : Mengatur Posisi Konten
Analisa : Value auto dari margin yang diberikan diatas berguna untuk mengatur secara otomatis (seimbang) antara arah yang berlawanan.
Percobaan 11 : Mengatur Display Analisa : Bisa dilihat kalau kata LAYANAN tampil dalam browser. Ini dikarenakan property display yang diberi value none (display: none;) yang berarti tidak akan ditampilkan di browser. Sedangkan value inline membuat tampilan list dari tag <li></li> yang biasanya akan berjajar ke bawah pun akan menjadi sejajar (inline).
Percobaan 12 : Garis Tepi Berupa Gambar Analisa : Border-image mampu membuat garis tepi dari gambar dengan contoh penulisan di atas. Value setelah url link dari gambar merupakan value tambahan jadi meskipun tidak dituliskan juga tidak apa-apa. Terlihat juga di atas border-image ini menggunakan metode adaptasi browser yag diawali dengan moz (Mozilla) webkit (Chrome).
Percobaan 13 : Mengatur Box-Shadow
Analisa : Contoh di atas merupakan property untuk memberikan bingkai sebuah bidang (box-shadow) yang bisa berupa bayangan atau sebuah pancaran cahaya sesuai dengan value yang diberikan. Jarak bias, kepadatan warna dll juga bisa diatur seperti contoh di atas.
Percobaan 14 : Mengatur Border Radius Analisa : Value biasanya dalam satuan pixel (px) atau em untuk menentukan lengkung dari sudut suatu bidang (kode HTML) yang merupakan fungsi dari border-radius.
Percobaan 15 : Bentuk Elips
Analisa : Berbagai contoh penerapan dari border-radius seperti di atas kita lihat kalau semakin besar value yang diberikan bidang tersebut bisa menjadi sebuah bentuk lingkaran. Tugas 1 :
Tugas 2 :