TUGAS BOXES 1. Percobaan 1
Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan 75% dari width dan height yg ada dengan background abu abu, perbedaan width dan height ini menjadi terlihat seperti gambar disamping. 2. percobaan 2
Analisa : style pada elemen td min width dan min height diatur 150px dan 200px, isi elemen ini adalah gambar, sedangkan pada elemen td dengan class description min width 450px dan max width 650px. Fungsi min width dan max width adalah menentukan besar minimal dan maksimal sebuah elemen jika ukuran yang tampil di browser diperkecil atau diperbesar, maka jika melewati min width atau max width, dia tidak akan berubah ke ukuran browser, tapi tetap di ukuran min dan max dari elemen tersebut.
3. percobaan3
Analisa : , style pada elemen p diatur min height dan max height, fungsi ini sama dengan percobaan sebelumnya, tetapi disini digunakan untuk tinggi bukan lebar.
4. Percobaan4
Analisa : elemen p.one style overflow di hidden, sedangkan elemen p.two style overflow adalah scroll, style ini digunakan sepaket dengan penggunaan max height, jadi jika tinggi melebihi batasan maximal, jika menggunakan menu overflow:scroll maka akan tampil scroll untuk menggulir isi dari elemen ke atas/bawah, jika tidak menggunakan style ini, maka setelah melewati batasan max dari tinggi yang ditetapkan, isi tidak bisa digulir ke atas/bawah.
5. Percobaan5
Analisa : elemen p.one menggunakan style border-width:2px; yang berarti ukuran dari border pada elemen p.one adalah 2px. Elemen p.two menggunakan style border-width:thick; fungsinya sama tetapi ukurannya adalah tebal, sedangkan elemen p.three menggunakan style border-width:1px 4px 12px 4px; yang berarti besar border pada atas 1px, kanan 4px, bawah 12px, dan kiri 4px.
6. Percobaan6
Analisa : setiap elemen p dengan class yang berbeda, style yang digunakan juga berbeda, style tsb adalah sbg berikut-solid = seperti pada paragraf pertama , dotted = seperti pada paragraf kedua, dashed = seperti pada paragraf ketiga, double = seperti pada paragraf ke empat, groove = seperti pada paragraf ke lima, ridge = seperti pada paragraf ke enam, inset = seperti pada paragraf ke tujuh, outset = seperti pada paragraf ke delapan.
7. Percobaan7
Analisa : setiap elemen p yang berbeda class akan diterapkan warna dan jenis style border yang berbeda, p.one keseluruhan warna sama, p.two warna ditetapkan atas kanan bawah dan kiri berbeda, dan p.three menggunakan style dotted dengan 1 warna yg sama.
8. Percobaan8
Analisa : style yg digunakan tiap elemen dengan class yang berbeda adalah beda, untuk elemen p, padding tidak diatur, elemen p.contoh padding diatur untuk semua posisi 10px, p.contoh2 padding diatur atas bawah 10px dan kanan kiri 25px, sedangkan elemen p.contoh3 padding ditetapkan berbedabeda tiap posisi, atas 10px kanan 15px bawah 2px dan kiri 25px. Padding sendiri adalah batasan antara isi atau konten terhadap wadah atau container nya.
9. Percobaan9
Analisa : style margin ditetapkan berbeda beda untuk setiap elemen yang berbeda class, sama seperti percobaan 8,tetapi yang di ubah di percobaan 9 adalah margin, margin sendiri adalah batasan luar dengan wadah atau kontainer sebuah elemen.
10. Percobaan10
Analisa : , setiap elemen p yg ada ditetapkan width, padding dan border yg sama, tetapi elemen p dengan class example margin ditetapkan 10px auto 10px auto.
11. Percobaan11
Analisa : elemen li menggunakan style display:inline yang berarti setiap list akan berjajar dibaris yang sama bukan di kolom yg sama tetapi baris yg berbeda beda. Sedangkan elemen li dengan class coming-soon style menggunakan display:none yang berfungsi untuk menghilangkan elemen tsb didalam list.
12. Percobaan12
Analisa : , style yang digunakan untuk tiap elemen p dengan class yang berbeda walaupun sama sama menggunakan garis tepi berupa gambar. Pada elemen p.one, gambar akan melebar dngan sendirinya sesuai wadah elemen. Sedangkan pada elemen p.two, gambar akan membulat.
13. Percobaan13
Analisa : setiap elemen p dengan class yang berbeda menggunakan style box-shadow yang berbeda, p.one mengatur shadow akan berada pada atas kiri, karena ditetapkan -5px untuk top dan -5px untuk right. P.two shadow berada pada kanan 5px dan bawah 5px dan 5px sebagai blurnya. P.three juga sama, p.four tidak ditetapkan kiri dan kanan tetapi hanya blur yg ditetapkan, dan p.five menggunakan style inset yang berarti box-shadow akan berada di dalam elemen p.five.
14. Percobaan14
Analisa : style yang digunakan untuk elemen p adalah border-radius, ini berfungsi untuk mengubah setiap corner menjadi round sesuai dengan ukuran yang ditetapkan.
15. Percobaan15
Analisa : style tiap elemen p dengan class yang berbeda akan di ubah border radiusnya, untuk-p.one , menggunakan style border-top-left-radius: 80px 50px yg berarti radius dari kiri atas ke kanan adalah 80px dan 50px untuk kiri atas ke bawah.-p.two, menggunakan style border-radius : 1em 4em 1em 4em / 2em 1em 2em 1em; yang berarti pengaturan disebelah kiri tanda / adalah untuk mengatur round atas dan bawah sedangkan di sebelah kanan tanda / adalah untuk mengatur kanan dan kiri round border tersebut.-p.three ukuran border radius disamakan dengan width dan height menimbulkan efek bulat pada border tersebut.
