BisaSabi

Halo teman-teman kali ini saya akan membawakan materi CSS Reset adalah kumpulan aturan CSS yang digunakan untuk menghapus pemformatan default elemen HTML browser, menghilangkan potensi inkonsistensi antara browser yang berbeda. Mudahnya adalah Seperangkat aturan dalam menuliskan perintah CSS yang tujuannya adalah untuk me-reset atau mengatur semua elemen HTML agar tampil seragam di berbagai web borwser. Dengan CSS Reset, kalian dapat mengatur desain web agar tampak seragam di berbagai web browser. Tentunya untuk mengurangi beragam masalah yang ditimbulkan oleh web browser nantinya.  “Jika Anda tidak menentukan semua parameter default CSS di style sheet Anda, browser akan menggunakan parameter defaultnya,” kata Rand-Hendriksen di blognya. “Dan karena browser yang berbeda memiliki parameter yang berbeda, situs Anda pada akhirnya akan terlihat berbeda tergantung pada browser apa yang Anda gunakan.” Pertama buat html sederhana seperti ini. < body >     < div ...

Halo teman-teman pada kesempatan kali ini saya akan membawakan materi mengenai Box Model sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai box. Pada bagian Box Model juga memiliki beberapa bagian yaitu: 1. Padding adalah ruang kosong atau space antara satu konten dengan konten yang lainnya. Dengan              padding, tampilan website akan lebih teratur dan lebih menarik. 2. Border adalah property CSS untuk menentukan lebar, corak dan juga warna garis tepi pada elemen         HTML yang paling ringkas. Dengan menggunakan property border CSS, semua sisi, baik sisi atas,         kanan, bawah dan kiri menggunakan lebar, corak dan warna garis yang sama. 3. Box Sizing adalah css property yang digunakan untuk merubah kalkulasi dalam menguk...

Halo kali ini saya akan membawakan materi menginai magin CSS adalah digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Materi kali ini dibagi menjadi 5 bagian yaitu: 1. Cara menggunakan Magin 2. Overlapping Margin 3. Negatif Margin 4. Auto Margin 5. Shorthand Margin Buat html div sederhana seperti dibawah dengan menggunakan class pada masing-masing div 1. Cara Menggunakan Margin < body >     < div class = "pertama" >MERAH</ div >     < div class = "kedua" >HIJAU</ div > </ body > Beri Style pada masing-masing div yang diberi class .pertama {     width : 500 px ;     height : 200 px ;     background-color : red ;     margin-top : 100 px ;     margin-right : 50 px ;     margin-bottom : 100 px ;     margin-left : 200 px ; }     .kedua {     width : 500 px ;     height : 200 px ;   ...

Halo teman-teman pada kesempatan ini saya akan membawakan materi tentang dimensi dan Overflow pada CSS, sebelum memulainya kita harus mengetahui dulu apa itu Dimensi dan Overflow yaitu Dimensi adalah Ukuran CSS (Dimensi) atribut memungkinkan kalian untuk mengontrol tinggi dan lebar dari elemen, sedangkan Overflow adalah properti yang dapat kita gunakan untuk menentukan suatu konten apakah nantinya konten akan ditambahkan scrollbar ketika konten yang terdapat pada elemen tidak cukup muat. Terdapat 4 nilai dari properti overflow yaitu : visible, hidden, scroll dan auto. Berikut contoh materi yang akan saya contohkan. Buat html seperti dibawah lalu diberi class pada masing2 div < body >     < div class = "pertama" >         < div class = "kedua" >Hello warga bumi</ div >     </ div > </ body > Beri style pada masing2 class. < style >         .pertama {         w...

Halo teman-teman kali ini saya akan membahas mengenai CSS Layout adalah teknik untuk mengatur tata letak sebuah halaman web dengan menggunakan kode CSS. Berikut materinya. Buatlah html sepeti dibawah, lalu div digunakan untuk mengelompokkan elemen atau bermacam-macam tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan ID atau Class dari CSS. Selanjutnya ada span digunakan untuk menciptakan inline agar memudahkan dalam pemberian gaya tampilan oleh CSS. Tampilan dari elemen ini adalah bersifat inline, yang artinya ditempatkan di dalam elemen induk secara sejajar dengan isi. Ini adalah tampilan jika sudah dijalankan. Dalam 1 file html kita beri style CSS seperti dibawah. < style >     .link {         background-color : pink ;     }     .main-contain {         background-color : lightgreen ;     }     .main-contain span {         bac...

Hello teman-teman kali ini saya akan membahas mengenai Spesifikasi CSS yaitu setiap selektor memiliki tempat dalam susunan atau hirarki yang lebih spesifik. Jadi setiap selector yang ingin dituju memiliki selector dan element yang lebih banyak maka itu lah yang akan terbaca oleh CSS. Buatlah html sederhana seperti ini dan jangan lupa untuk menggunakan link CSS. < h1 >Hello Warga Bumi</ h1 >     < ol id = "Olahraga" >        < h3 >Daftar Cabor</ h3 >        < li >Futsal</ li >        < li class = "cabor" >Baminton</ li >        < li >Sepak bola</ li >     </ ol > Setelah itu beri styling pada id Olahraga dan class cabor ol #Olahraga li {     color : red ; } .cabor {     color : green ; } Maka yang terbaca oleh CSS adalah id Olahraga Pada styling cabor kita tambahkan elemen dan id, menjadikan cl...

Halo teman-teman kali ini saya akan membawakan materi mengenai Pseudo Class adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak 'terlihat' (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain. Pertama buatlah html sederhana seperti dibawah Setelah itu kita melakukan styling pada bagian header. Pada bagian ini adalah styling default dari html. Jika kalian tahan klik pada bagian "Hello Warga Bumi" maka yang terjadi seperti dibawah. Pada class "hello" kita beri warna pink, Lalu pada bagian class "hello:hover" diberi ukuran font size,color dan font-family. .hello {     color : pink ; } .hello:hover {     font-size : 30 px ;     color : aqua ;     font-family : arial ; } Hover pada CSS adalah suatu fungsi yang hanya berjalan apabila kursor berada diatas suatu objek tertentu. Bisa dibilang kalau kalian meletak kursor kalian pada styling yang diberi hover ma...