BisaSabi

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 {         width : 300 px ;         height : 300 px ;         background-col

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 {         background-color : red ;     } </ style > Hasilnya jika kita menggunakan CSS Jika kita ingin merubah ukuran backgrou

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 class cabor lebih spesifik untuk dibaca oleh CSS. ol #Olahraga li {     color : red ; } ol #Olahrag

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 maka obj

Halo teman-teman kali ini saya akan berbagi mengenai Selector dalam css yaitu digunakan untuk memilih elemen mana dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila kita ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi. Buatlah html seperti biasa lalu buatlah list seperti dibawah <ul>: (Unordered List) Jenis list yang berbentuk poin - poin, Unordered List atau UL sendiri juga sering disebut dengan Nama Bulet List karena bentuknya yang berupa titik lingkaran. <li>: digunakan untuk menampilkan daftaran yang berurutan ke bawah. <ol>: (ordered list) merupakan elemen HTML untuk menampilkan daftar (list) dalam bentuk butir-butir melalui nomor secara berurutan. Nomor urut dapat berbentuk urutan angka desimal maupun daftar berbentuk urutan abjad. Untuk penjelasan setelah membuat list ada pada bagian

Hallo teman-teman kali ini saya akan berbagi mengenai CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi. Pertama-tama buatlah html sederhana dengan paragraf, link css dan link random saja untuk uji coba seperti dibawah ini. body: Background Color berguna untuk memberi warna di belakang teks yang diterapkan pada elemen HTML. Warna latar pada CSS akan menempati keseluruhan bagian elemen HTML yaitu mulai dari konten itu sendiri, padding sampai dengan wilayah border namun tidak termasuk margin.    Background Image untuk menetapkan gambar sebagai background elemen HTML. Properti ini menerima masukan berupa URL tempat file gambar tersebut berada. Background Repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara

Halo teman-teman pada kesempatan ini saya akan berbagi materi yang telah saya pelajari. Materi ini berjudul Text Styling yaitu gaya teks halaman web menyertakan teks, dan mengubah tampilannya dapat memberikan tampilan yang lebih unik pada halaman web. Tanpa mengubah HTML di bawahnya, CSS dapat digunakan untuk mengubah ukuran teks , font , ketebalan ,  perataan dalam paragraf, dan lainnya. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi. Pertama-tama buatlah html sederhana dengan paragraf, link css dan link random saja untuk uji coba seperti dibawah ini. h1: font size berguna untuk memperbesar ukuran font color berguna untuk memberi warna text transform berguna untuk merubuh teks menjadi huruf kapital secara keseluruhan teks decoration berguna untuk memberi garis word spacing berguna untuk memberi jarak pada tiap kata p: teks align berguna untuk menempatakan rata kanan pada paragraf secara keseluruhan teks indent berguna

Halo teman-teman kali ini saya akan membawakan materi tentang font styling yaitu adalah metode yang digunakan dalam CSS yang memungkinkan kalian untuk memperindah atau mengubah huruf sesuai keinginan kalian. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi. Buat terlebih dahulu html seperti dibawah. h1: Font family  adalah properti CSS yang dapat mengubah jenis font suatu text. Kenapa ada beberapa jenis font, karena nantinya pada sistem akan terbaca font tahoma terlebih dahulu baru geneva dan seterusnya secara berurut. Font size pada CSS merupakan properti yang digunakan untuk mengatur ukuran besar huruf pada suatu elemen HTML. F ont style digunakan untuk mengatur agar teks miring. Font variant  digunakan untuk mengatur tampilan huruf agar menampilkan efek Small-cap. Small-cap merupakan huruf kapital yang berukuran kecil p: Line height pada CSS merupakan properti yang digunakan untuk memberi ruang spasi dan jarak antara b

Halo teman-teman pada kesempatan ini saya akan membawakan materi tentang CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Bahasa sehari-hari css bisa dibilang untuk membuat style atau gaya pada suatu website. Berikut materi yang akan saya bagi kepada kalian. 1. Embed Penulisan CSS secara internal atau embedded adalah salah metoda dalam menata gaya pada halaman HTML. Penulisan CSS secara internal dilakukan dengan menempatkan kode CSS di dalam bagian tag <head> pada halaman HTML.               - <style>: Untuk membungkus style yang akan kita kreasikan dengan css.               - h1: Untuk membungkus style pada bagian h1 yaitu hello warga bumi.               - p: Untuk membungkus style pada bagian p yaitu 2 paragraf yang sudah ditentukan. < style >         h1 { color :...;             font-size :...px;