Transcript for:
Belajar CSS Dasar dengan Eko Kurniawan

Halo teman-teman selamat datang di kelas CSS nah ini adalah kelas pertama untuk roadmap kelas CSS ya dimulai dari pertama kita akan bahas tentang CSS dasar Oke Sebelum kita mulai kita kenalan dulu ya jadi Nama saya adalah Eko Kurniawan saat ini kerja sebagai technical arsitek di salah satu e-commerce terbesar di Indonesia nah saya sendiri sudah kerja lebih dari 12 tahun ya dan biasanya di sela-sela kesibukan saya bekerja Saya juga biasa menyempatkan diri berbagai konten soal program ya di website programmer zaman now atau di youtube channel programmer zaman now Oke kalau teman-teman ingin diskusi secara langsung dengan saya teman-teman bisa kontak saya lewat telegram atau jangan lupa juga follow sosial medianya programmer zamanau ya ada di Linkin Facebook Instagram YouTube telegram channel ada juga di tiktok atau kalau dari perusahaan teman-teman butuh konsultasi teman-teman juga bisa email ke email pribadi saya oke sebelum teman-teman mengikuti kelas ini pastikan teman-teman sudah mengikuti kelas-kelas saya sebelumnya yang pertama pastikan teman-teman sudah belajar kelas saya tentang http nah Selain itu pastikan juga teman-teman sudah mengikuti kelas saya tentang html jadi di sana ada html dasar dan juga html Oh form ya nah jadi pastikan teman-teman sudah mengikuti semua kelas ini Nah kalau sudah semua Nah kita akan langsung masuk ya materi selanjutnya berarti teman-teman perlu belajar CSS Yuk kita mulai Oke Sebelum kita mulai kita akan buat Project terlebih dahulu ya nah jadi teman-teman silakan akan bikin folder namanya adalah belajar CSS dasar nanti teman-teman silakan buka ya foldernya menggunakan Visual Studio code atau teks editor apapun yang teman-teman gunakan Oke kita akan coba buat Oke saya akan buat di sini ya sebuah folder namanya adalah belajar CSS dasar Nah selanjutnya saya akan buka menggunakan Visual Studio code Nah di sini ya Nah sekarang Kita bisa mulai ya belajarnya untuk mempermudah saat kita belajar CSS Ya silakan teman-teman instal sebuah extension ya namanya adalah live preview nah ini linknya teman-teman bisa buka di sini instal ya Atau teman-teman bisa cari ya di Visual Studio code nanti teman-teman cari ketika namanya la e live review ya Nah kita akan coba di sini teman-teman bisa Klik di bagian extension di sini teman-teman car namanya live preview seperti ini oke nah Ini ada live preview ya ini adalah extension baru ya dari e Microsoft jadi teman-teman nanti tinggal instal nanti ini keuntungannya apa keuntungannya adalah nanti kita bisa lihat ya hasil dari eh kode kita kode html kita itu langsung di Visual Studio code nah sebelumnya di kelas html saya mengajarkan teman-teman menggunakan live server ya karena waktu itu belum e ada in untuk live preview Nah kalau sekarang teman-teman bisa gunakan live preview jadi nanti saat kita bikin sebuah file contohnya kita bikin misalnya di sini eh hello.html lalu kita buat misalnya html hello world nah di bagian kanan di sini ini ada tombol preview di mana saat kita klik ya nanti dia akan bisa di preview di mana nanti akan dijalankan dalam ee web server Jadi kalau teman-teman nanti klik nah di sebelah kanan akan ada ya nanti dia buka ee Ini adalah local host ya 127001 portnya 3.000 Lalu ada hello.html nah enaknya adalah saat kita tambahkan contohnya di sini gitu ya perubahannya dia akan langsung terlihat perubahannya nah seperti ini jadi nanti kita akan belajarnya langsung menggunakan ini biar nanti kelihatan langsung hasilnya di sini Sebelum kita mulai kita kenalan dulu dengan CSS Oke CSS itu apa CSS itu adalah singkatan dari cascading style seat ya Jadi ini adalah singkatannya cascading style seats html itu digunakan untuk membuat struktur konten web secara semantik Jadi sebelumnya kita sudah pernah belajar html ya Nah Jadi intinya struktur konten web itu dibuat menggunakan HTML jadi strukturnya itu memang dibuat menggunakan TML Tapi berarti hanya struktur kontennya saja CSS itu digunakan untuk memberi style atau gaya ya dan juga layout atau tata letak pada konten html kita sebelumnya Kalau kita cuma buat kode html saja mungkin tampilannya kurang menarik jadi saat kita lihat ya cuma isinya teks aja gitu ya posisinya hanya dari atas ke bawah dan seterusnya Jadi kurang menarik Nah dengan menggunakan CSS ini kita bisa memberikan style atau gaya atau juga layout tata letak yang bagus ya pada konten yang sudah kita buat menggunakan HTML nah contohnya misalnya kita bisa menggunakan CSS untuk mengubah misal saja fontnya colornya size-nya ukurannya ya dan masih banyak yang lainnya jadi semua konten yang sudah kita bikin di html itu kita bisa tambahkan style atau layout menggunakan CSS Oke jadi apa itu CSS CSS adalah bahasa yang digunakan untuk mendeskripsikan Bagaimana sebuah konten yang sudah dibuat menggunakan HTML itu ditampilkan ke pengguna secara visual nah setiap browser itu biasanya punya standar masing-masing ketika menampilkan dokumen html-nya jadi misalnya di browser apa menggunakan fontnya apa Ukurannya berapa dan apa gitu ya permasalahannya adalah kalau misalnya tiap browser itu biasanya punya beda-beda pengaturan tampilan Nah Oleh karena itu direkomendasikan kalau teman-teman teman mau mengatur tampilan ya kita bisa menggunakan CSS jadi dengan menggunakan CSS kita bisa membuat browser itu menampilkan dokumen html-nya dengan cara yang sama yang sesuai dengan kita minta menggunakan CSS Jadi kalau di CSS kita nanti kita bilang Oke tolong fontnya ukurannya 20 pikel warnanya merah misalnya ee panjangnya sekian lebarnya sekian Nah dengan seperti itu nanti kita buka menggunakan browser apapun tampilannya akan tetap sama CSS itu adalah bahasa yang berbasis rule atau aturan Nah kita akan mendefinisikan rule atau juga aturan ya jadi aturan-aturannya itu didefinisikan ya untuk elemen yang terdapat di dokumen html yang kita buat jadi kalau nanti teman-teman bikin aturan yang ternyata elemennya tidak ada di html-nya maka tidak akan terlihat efeknya gitu ya jadi efeknya masih tidak kelihatan jadi teman-teman harus benar pilih komponen Mana yang mau ditambahkan Style ya menggunakan CSS membuat rule atau aturan di CSS biasanya dimulai dengan menyebutkan elemen yang nanti akan dipilihnya jadi elemen Mana yang mau teman-teman ubah gayanya ya lalu diikuti dengan kurung kurawal buka diakhiri dengan kurung kurawwa tutup ya tapi di tengah-tengahnya nanti teman-teman definisikan aturan-aturannya aturan-aturannya tersebut biasanya didefinisikan menggunakan ya propertinya apa ya titik du nilainya atau value-nya apa lalu diakhiri dengan titik koma seperti itu Nah ini adalah contohnya jadi misalnya ini contohnya jadi kita harus Sebutkan di sini elemennya ya ini adalah selektornya istilahnya itu ya Nah di sini elemennya contohnya H1 jadi artinya semua tag H1 di html gitu ya kalau kita tambahkan kurung kowal buka kurung kowal tutup nah di dalamnya sini ini adalah aturannya aturannya berisi properti dan juga value-nya nah properti setinya contoh ada properti yang namanya color ya atau warna kita bilang di sini colornya adalah red atau merah berarti nanti H1 ini warnanya akan berubah menjadi merah lalu ada properti namanya font size ya Ukuran dari fontnya nah contohnya di sini kita bilang 20 PX atau istilahnya PX itu adalah piksel jadi nanti ukurannya sekitar 20 piksel contohnya di sini ada H2 berarti kita ingin membuat aturan untuk elemen H2 lalu di sini contohnya aturannya color nya blue jadi di sini nanti warnanya menjadi biru lalu font size-nya 15 pikel jadi sintx untuk CSS kurang lebih formatnya akan seperti ini jadi kita select dulu ya istilahnya itu adalah selector ya menseleksi elemen Mana yang mau kita pilih lalu kita definisikan menggunakan kurung kurawal buka kurung kurawal tutup di dalamnya kita definisikan aturan-aturannya aturan-aturannya itu terdiri dari key atau properti dan di sini adalah value-nya Nah jadi ini ini adalah CSS oke sekarang pertanyaannya Bagaimana cara menambahkan CSS ke file html yang sudah kita buat terdapat tiga cara untuk menambahkan CSS ke html yang sudah kita buat Cara yang pertama adalah cara internal Lalu ada cara eksternal dan yang ketiga adalah cara Inline cara internal itu di mana css-nya Nanti disimpan di dalam file ya yang sama dengan html-nya jadi internal itu di gabung antara CSS dan juga html-nya nah kita bisa menggunakan tag yang namanya adalah style jadi kita tinggal buat tag namanya style kita masukkan saja isi dari css-nya di dalam style tersebut nah Biasanya sih style Itu disimpan di bagian head ya lalu yang cara yang kedua adalah cara eksternal nah di mana css-nya disimpan di dalam file yang berbeda dengan html Nah nanti biasanya nama file-nya adalah CSS jadi kita bikin file yang isinya adalah file CS CSS nah lalu kita bisa ambil file CSS tersebut ya menggunakan HTML ya dengan cara menggunakan tag yang namanya link nanti kita akan demokan cara yang terakhir adalah cara Inline nah di mana CSS Nanti disimpan dalam atribute Styles ya pada tag HTML nah ini pernah kita lakukan di kelas html ya Jadi teman-teman nanti Saat bikin eh tag atribute di html-nya teman-teman bisa tambahkan atributnya adalah Styles lalu tinggal masukkan kode css-nya ya cara Ini adalah cara yang paling gampang tapi tidak direkomendasikan sebenarnya jadi cara ini tidak akan kita praktikkan lagi ya kita akan Fokusnya ke yang internal dan juga eksternal Oke kita akan coba yang internal Jadi kalau internal teman-teman bikin nanti tag style lalu di sini adalah isi css-nya nah jadi ini contohnya H1 kita ubah H2 kita ubah misalnya gitu ya nanti otomatis semua H1 dan H2 di html ini ukur ee sor style-nya ya gayanya n itu akan berubah seperti ini Oke kita akan coba langsung praktiikkan Oke saya akan tutup dulu yang ini saya akan buat file baru di sini namanya adalah internal dulu ya internal html titik html Oke kita akan buat html di sini Oke selanjutnya kita akan Coba bikin dulu H1 misalnya di sini belajar CSS H2 belajar CSS internal Oke kita akan coba tampilkan ya Nah kurang lebih kan hitam semua ya kita perkecil dulu nah ini Oke di dalam head kita bisa tambahkan tag yang namanya style nah di dalamnya kita bisa tambahkan kode css-nya contohnya misalnya saya mau ubah H1 colornya menjadi Red selesai Nah kita lihat warnanya sekarang berubah menjadi Red ya ini kelebihan lalu contoh nya saya mau ee font size-nya itu misalnya menjadi 20 PX ya 20 pikel nah ini berubah ya Jadi agak lebih kecil nah contohnya misalnya saya mau bikin lagi untuk H2 untuk H2 colornya mau saya jadikan blue ya atau biru lalu font size-nya Saya mau jadikan 15 pikel Nah kita bisa lakukan seperti ini Jadi ini cara internal jadi kita langsung Bikinnya di dalam html-nya Oke Cara yang kedua adalah cara eksternal nah di mana Kita perlu bikin dulu sebuah file Nah di sini adalah file CSS contohnya saya bikin namanya hello.css lalu kita akan tambahkan semua kode CSS di sini Oke kita akan buat terlebih dahulu ya jadi saya akan buat file baru di sini namanya hello.css oke di sini saya akan copy tadi yang semuanya ini saya copy Saya pastti di sini Nah ini isinya ya Hello CSS Oke selanjutnya kita akan buat file Nah jadi kita buat yang contohnya sternal html nah teman-teman kalau mau ambil ya file CSS tadi kita bisa gunakan link link rail-nya adalah style sheet ya lalu di sini harp-nya lokasi file css-nya di mana contohnya di sini Hello CSS Oke kita akan coba oke di sini saya akan membuat file baru namanya sternal titik eh html saya akan coba perbesar ya takut ee kurang besar kita buat html di sini Oke kita akan buat H1 lagi belajar CSS lalu e H2 belajar CSS eksternal Oke kalau kita tampilkan ini kan hasilnya sama ya seperti sebelumnya jadi belum berubah Nah kita bisa tambahkan link contohnya di sini nah rel-nya adalah style seet nah lalu di sini HPnya adalah hello. CSS nah selesai akhir nah hasilnya seperti ini kurang lebih nah jadi kita sudah melakukan dua cara ya Yang pertama adalah menggunakan internal langsung dan yang kedua adalah eksternal seperti ini nah saat ini nanti selanjut-selanjutnya kita coba yang internal dulu ya karena lebih gampang biar tidak kita ee perlu membuat file-file lagi gitu ya jadi kita akan coba nanti di internal aja caranya tapi kenyataannya saat nanti kita bikin ee aplikasi web biasa si Kebanyakan orang akan menggunakan eksternal karena bisa saja satu file CSS itu bisa digunakan oleh lebih dari satu file html seperti itu sekarang kita bahas tentang comand ya atau komentar saat kita membuat kode CSS kadang kita ingin menyisipkan komentar komentar adalah kode yang tidak berdampak apapun terhadap kode CSS kita istilahnya itu adalah dihiraukan oleh web browsernya ketika membaca kode CSS kita nah biasanya kode ini kita masukkan ya untuk menambahkan komentar ke kode CSS kita untuk membuat komentar kita harus Mengawali dengan tanda ya E dengan karakter slash bintang lalu dimasukkan isi komentarnya di sini lalu diakhiri dengan bintang slash isi komentar di ini teman-teman boleh satu baris boleh lebih dari satu baris itu tidak masalah jadi komentar itu bisa multiaris Oke kita lihat contohnya misalnya jadi saya di sini mau menambahkan komentar tinggal slash bintang ini adalah komentar satu baris misalnya kalau teman-teman mau lebih dari satu baris bisa tinggal slash bintang komentarnya masukkan lalu di sini tinggal ditutup dengan diakhiri dengan bintang slash seperti itu Jadi ini adalah komentar Oke kita akan coba praktiikkkan Jadi misalnya yang sebelumnya kita akan coba buka yang internal ya Oke ini kalau kita tampilkan hasilnya seperti ini kalau teman-teman coba tambahkan komentar slash bintang Seperti ini bintang slash ini adalah komentar satu baris misalnya nah lihat tidak ada efek apapun termasuk kalau teman-teman mau tambahkan lebih dari satu baris ini adalah komentar multibaris ya tidak terbatas jadi ini tidak ada efeknya sama sekali ke kode html ataupun CSS yang kita buat jadi seperti ini caranya nah tapi ingat ya komentar ini cuma berlaku di bagian css-nya kalau komentar di html tidak seperti ini ya kita sudah pernah bahas di kelas html cara membuat komentar nah tapi kalau teman-teman mau menambahkan komentar di CSS caranya adalah seperti ini sekarang kita bahas tentang ID selain menggunakan atau memilih elemen ya atau selecttornya menggunakan HTML tag Kita juga bisa memilih elemen menggunakan ID ya di css-nya untuk menggunakan ID kita perlu menggunakan Crash di depannya ya jadi di depannya Crash lalu dilanjut dengan id-nya apa kita tahu ya kalau di html dalam satu halaman itu ID cuma boleh satu jadi kalau teman-teman bikin ID di a ya di dalam dokumen itu cuma boleh ada satu a tersebut Nah kita bisa pilih ya ID mana yang mau kita tambahkan style-nya kita langsung sebut aja menggunakan e Crash lalu id-nya apa seperti itu oke contohnya misalnya kita akan bikin di sini contohnya ada sebuah elemen dengan ID judul seperti ini Nah kalau teman-teman pengin contohnya Saya mau menambahkan style khusus untuk judul ini saja kan di sini misalnya H1 ini H1 Saya tidak mau ke semua h satu saya penginnya judul saja Misalnya seperti itu Nah kita bisa seleksi menggunakan ini Crash judul seperti ini nah jadi kita bisa lakukan seperti ini jadi nanti ini otomatis yang dipilih adalah elemen yang memiliki ID judul maka ini yang dapat Oke kita akan coba Oke saya akan buat file baru namanya adalah id.html kita akan buat di sini HTML id di sini contohnya H1 misalnya ya ini adalah judul H1 lagi ini adalah bukan judul misalnya kalau kita misalnya tambahkan style lalu H1 langsung gitu ya colornya adalah red misalnya eh font size-nya adalah Misalnya 30 piksel kalau kita lihat kita preview maka semuanya akan kan berubah Nah kita tidak mau kita maunya yang ini saja Misalnya ya Nah kita bisa di sini tambahkan contohnya Ini adalah id-nya judul Nah selanjutnya ini kita bisa ganti yang tadinya H1 artinya menseleksi semuanya kita ganti menjadi Crash judul seperti ini otomatis ini hanya menseleksi yang judul saja yang id-nya judul nah ini dapat ya ini adalah judul dia berubah menjadi merah ya kalau yang lainnya itu tidak tidak berubah jadi kalau teman-teman ganti contohnya size-nya ukurannya jadi 40 piksel gitu ya atau 50 piksel Nah lihat yang berubah cuma yang judul saja jadi yang H1 yang lain ya yang tidak memiliki ID itu tidak akan terseleksi oleh selecttor ini ya nah jadi seperti ini Oke sekarang kita bahas tentang class kadang-kadang ada kasus kita ingin menambahkan style CSS ke Beberapa elemen tag yang ternyata jenisnya itu berbeda misalnya ada H1 ada H2 paragraf dan lain-lain kalau kita harus bikin aturannya per tag maka akan menyulitkan kita karena kita harus buat semuanya satu persatu padahal isinya sama di html Untungnya ada atribut namanya adalah kass dan di CSS kita bisa menambahkan aturan ke kelas dengan nama tersebut Nah untuk menambahkan aturan ke kelas kita bisa gunakan awalan nya adalah titik Jadi kalau ke ID awalannya adalah Crash kalau misalnya ke k itu awalannya adalah titik oke kita lihat contohnya contohnya misalnya kita punya di sini H1 H2 dan P Nah kita mau bikin style untuk semuanya Nah kita bisa gunakan kelas tahu di sini nama kelasnya contohnya red misalnya nah nama kelasnya red jadi kita nanti tinggal bikin di sini titik red kalau nama kelasnya di sini misalnya Cho ya berarti titik cheko seperti itu jadi sesuaikan dengan nama kelasnya seperti ini Jadi ini red berarti kita buat red artinya nanti siapapun yang memiliki class atribut isinya adalah red maka Aturan ini akan digunakan contohnya di sini color-nya menjadi Red jadi nanti di sini clelass red maka semuanya di sini akan menjadi Red ya untuk colornya Oke kita akan coba Oke saya akan buat di sini nama fileennya adalah k.html kita buat html-nya Oke selanjutnya di sini misalnya saya punya H1 ya ini adalah title misalnya H2 ini adalah subtitle eh dan P ini adalah isi artikel misalnya kalau kita lihat ya Ini hasilnya hitam semua kalau teman-teman bikin style misalnya untuk semuanya H1 gitu ya ya colornya menjadi Red lalu teman-teman bikin H2 colornya red lalu P colornya red maka ini akan menyulitkan Kenapa karena terlalu banyak apalagi kalau di bawahnya ada banyak sekali ya padahal Semuanya sama Nah kalau semuanya sama kita bisa gunakan yang namanya kas jadi di sini kita gunakan kelas Lalu nama kelasnya bebas ya nama kelasnya contohnya di sini misalnya merah seperti ini Lalu di sini berarti kita gunakan nama kelas yang sama merah lalu ini nama kelas yang sama merah nah karena ini namanya sama kita bisa bikin Aturan ini saya hapus aturannya contohnya Titik Merah seperti ini jadi diawali dengan titik kalau class contohnya di sini colornya adalah red hasilnya semuanya sekarang menjadi merah ya atau red Nah jadi seperti ini kalau teman-teman mau eh bikin ya fiturnya untuk class jadi untuk ke Beberapa elemen yang memang tag-nya bisa berbeda-beda kalau id kan problemnya nya ID itu cuma boleh Satu ya di dalam satu file html kalau misalnya kelas boleh Beberapa elemen teman-teman menggunakan kelas yang sama Oke CSS itu juga mendukung yang namanya multiple class nilai dari atribut class itu sebenarnya bisa menggunakan beberapa nilai caranya kita bisa tambahkan spasi lalu Sebutkan nama kelasnya jadi kalau teman-teman mau ada dua kelas contohnya di dalam atribut kelas tinggal teman- teman gunakan kelas Lalu nilai pertama spasi nilai kedua spasi nilai ketiga dan seterusnya misal kita bikin di sini sebuah kelas baru ya aturan kelas baru di sini namanya upper l di sini kita ubah teks transform teks transform itu untuk mengubah teks ya contohnya di sini saya ubah menjadi upper casase semua jadi nanti huruf besar semua nah contohnya saya mau yang e H1 dan H2 itu jadi upupper nah sedangkan yang paragraf itu tidak mau jadi cukup eh bawaan aslinya saja Nah kita bisa sebutkan contohnya untuk e H1 kelasnya red spasi upper Jadi nanti dia akan menggunakan Style yang ada red di sini dan juga style yang upper di sini jadi dua-duanya akan dapat jadi kita sebutkan yang pertama dan yang kedua jadi kita bisa lakukan seperti itu Oke kita akan coba Oke problemnya kalau kita cuma menggunakan satu ya Satu ee aturan di sini Jadi kalau teman-teman oke Saya mau di sini teks eh transform-nya menjadi upper case Nah semuanya ikut menjadi huruf upper case atau kapital dari mulai H1 H2 dan P nah saya misalnya tidak mau yang P ini gitu ya jadi yang P ini saya penginnya ya dia tetap huruf biasa aja gitu ya jadi jangan kapital semua nah dibanding saya lakukan seperti ini saya bisa bikin kelas baru contohnya titik upper ya lalu di sini teks transform-nya saya ganti menjadi upper casase Nah selanjutnya Ketika saya butuh Oke H1 Saya butuh upper casase Nah di sini selain merah saya tambahkan spasi upper Nah lihat dia menjadi upper case lalu oke saya juga yang ini yang H2 contohnya butuh upper juga nah yang H2 sekarang menjadi uppercease nah sedangkan yang P saya cuma butuh merahnya tidak butuh uppernya maka dia tetap seperti ini jadi seperti teks yang ada di sini nah jadi ini adalah penggunaan kelas ya di CSS jadi ini juga ee mungkin nanti ketika teman-teman bikin ee web penggunaan kelas itu bakal banyak sekali digunakan sekarang kita bahas tentang selector nah sebelumnya kita sudah tahu ya cara memilih elemen yang akan ditambahkan aturan di css-nya yaitu menggunakan tag-nya atau id-nya atau juga kassasnya memilih elemen di CSS itu kita bilang namanya adalah selektor nah Sebenarnya ada banyak sekali jenis selektor ya dan kita akan bahasnya Nanti secara bertahap ya di materi masing-masing nah di materi ini kita akan bahas tentang yang namanya simple selector Oke simple selektor ini adalah selektor yang memilih elemen berdasarkan nama ya atau tag-nya atau id-nya atau klasnya kalau kita ingin membuat selecttor untuk Beberapa elemen kita bisa gunakan tanda koma ya seb sebagai pemisahnya Oke contohnya misalnya ya sebelumnya kita sudah coba yang namanya type selector jadi type selector adalah melakukan seleksi elemen berdasarkan tag html-nya nah sebelumnya sudah kita lakukan jadi teman-teman Sebutkan di sini tag html-nya ya contohnya H1 lalu kita masukkan aturannya di sini Jadi ini adalah tag selector jadi memilih elemen berdasarkan tag-nya atau nama Tag nya Nah detailnya teman-teman bisa baca di sini di dokumentasinya jadi ini namanya adalah type selector selanjutnya adalah ID selector ini juga sudah pernah kita praktikkan sebelumnya ID selector melakukan seleksi elemen berdasarkan id-nya jadi kita sebutkan di sini id-nya Nah untuk ID selector itu diawali dengan tanda Crash jadi kita memilih elemen berdasarkan ID elemennya jadi ini adalah ID selector nah ini juga sudah pernah kita praktiikkan ya Nah selanjutnya ada yang class selector nah class selector melakukan seleksi elemen berdasarkan nama kelasnya ini juga sudah pernah kita praktikkan ya jadi caranya menggunakan titik Lalu di sini adalah nama kelasnya seperti itu Jadi untuk titik itu berarti nama kelasnya oke nah yang terakhir adalah selector list jadi selector list itu melakukan seleksi Beberapa elemen sekaligus menggunakan pemisahnya adalah koma teman-teman bisa gabungkan gitu ya mau pakai tag mau pakai ID mau pakai e clel itu bebas Jadi intinya kita bisa langsung ke beberapa contoh misalnya H2 H1 title Saya mau color-nya menjadi Red Nah kita bisa lakukan seperti ini jadi teman-teman bisa gunakan pemisah koma Jadi kalau sama semua misalnya teman-teman bisa gunakan seperti ini Oke karena semuanya sudah kita praktiikkkan selain ini jadi kita akan coba praktiikkkan yang selector list ya Oke kita coba praktikkan Oke Jadi sebelumnya misalnya ya kita akan coba buat file di sini nama filennya adalah selector tik html jadi di sini kita buat html dulu Oke jadi misalnya ada H1 H2 ada P kalau kita tampilkan misalnya Ini hasilnya hitam semua nah saya akan buat style nah biasanya kan kita H1 gitu ya Eh colornya adalah red seperti itu ya lalu kita buat lagi saya copy dulu di sini H2 lalu saya buat lagi P seperti ini Padahal isinya sama color color dan juga color nah ini kita bisa gabung saja Misalnya ya jadi kita bisa gabung misalnya jadinya H1 koma H2 koma p lalu colornya adalah red Nah kita bisa lakukan seperti ini Jadi digabung jadi kalau teman-teman butuh Semuanya sama gitu ya teman-teman tinggal Sebutkan selecttor pertama selecttor kedua ketiga dan seterusnya tinggal tambahkan koma saja selecttornya tidak hanya menggunakan tag teman-teman kalau mau pakai contohnya oke di sini saya mau ada kelas E merah gitu ya itu bisa atau misalnya ada ID title itu juga bisa nah kita bisa lakukan seperti ini jadi nanti kalau di bawah sini gitu ya teman-teman nanti ada misalnya H3 gitu ya ini contoh Nah ini kan ee warnanya hitam ya lalu kita tambahkan di sini id-nya adalah title maka dia ikut merah juga nah atau teman-teman e bikin yang lainnya misalnya span ini contoh misalnya ya tapi teman-teman di sini tambahkan eh kelasnya merah maka dia ikutan warna merah juga Karena di sini ya dapat tururannya sama jadi seperti ini kalau teman-teman mau bikin lebih dari satu ee kombinasi ya jadi kita bisa gunakan selector list Nah ini baru simple selector Sebenarnya masih banyak ya selector yang lain kita akan bahas di materi selanjutnya Oke kita akan bahas sekarang yang namanya kombinator selector ya kombinator selecttor itu adalah sesuatu yang menjelaskan relasi antar selektornya terdapat empat jenis selecttor untuk kombinator ini yang pertama adalah desendant selector ya Atau dia menggunakan space spasi Lalu ada Child selector ya dia menggunakan tanda e lebih dari seperti ini ya Lalu ada adjustent sibling selector menggunakan plus Lalu ada general sibling selector dia menggunakan tanda cacing seperti ini ya Oke kita akan coba semuanya ya oke yang pertama adalah descendant selector descendant select adalah selektor untuk memilih elemen anak dari elemen yang dipilih jadi misalnya teman-teman mau miliih elemen-elemen anaknya dari elemen yang dipilih nah contohnya misalnya kita bisa gunakan Div lalu spasi ya jadi gunanya penggunakannya menggunakan spasi lalu p gambar Ini artinya ya kita memilih semua tag p yang terdapat di dalam elemen dif jadi semua p di dalam Div itu kita pilih Nah jadi seperti itu jadi elemennya Div nah tapi yang kita pilih itu semuanya yang p yang di dalam Div contohnya kita punya Div ini berarti kita pilih yang P berarti artikel di dalamnya ada P ini dipilih Kenapa ini dipilih karena P ini ada di dalam Div nah ini juga dipilih Kenapa karena P ini ada di dalam Div yang ini ini tidak dipilih Kenapa tidak dipilih karena P ini tidak ada di dalam Div jadi cuma p yang ada di dalam Div saja Oke kita akan coba Oke kita buat di sini ya jadi Ee kita akan buat kombinator nama file-nya Oke kita akan coba di sini misalnya saya akan buat dulu ya e berarti di sini div-nya dulu lalu saya bikin lagi misalnya artikel misalnya lalu P lalu di sini ini nanti harusnya dipilih tapi kalau yang P di sini gimana ini juga dipilih karena dia ada di dalam Div ya Nah kalau ini di luar Div jadi ini tidak dipilih harusnya ya nah jadi kita coba misalnya Oke misalnya di sini kita e Div ya lalu P seperti ini colornya adalah red Oke kita akan coba lihat hasilnya Nah Lihat ini dipilih karena ini adalah ini ya lalu juga ini dipilih karena ini juga nah seperti ini tapi ini tidak dipilih Kenapa karena ini tidak ada di dalam Div jadi ini adalah descendent selector jadi penggunaannya menggunakan spasi selanjutnya ada Child selector Child selector adalah selector yang memilih Child atau anak dari elemen yang dipilih jadi ini harus langsung anaknya Jadi bukan yang di dalamnya tapi anaknya langsung contohnya kalau kita gunakan gambar ini ya Jadi ini Div lebih dari P jadi P ini eh sori ini adaah tanda Child ya Child selector artinya Saya mau ambil semua p yang anak langsung dari Div anak langsung itu maksudnya adalah yang langsung di atasnya adalah atau parent-nya itu adalah si Div ini nah contohnya Kalau yang di sini ini kan Div artickle p p yang di sini ini tidak dipilih Kenapa tidak dipilih karena P ini parentnya adalah Artik jadi P ini adalah child-nya ya jadi anaknya dari si artikel jadi P ini orang tuanya adalah si artikel ini nah jadi ini tidak dipilih Jadi kalau yang Child ini beneran harus langsung ya Jadi P itu harus punya parentnya atau orang tuanya adalah Div dan Div itu harus punya child-nya atau anaknya adalah si P ini Oke contohnya yang ini dipilih Kenapa ini dipilih karena ini chat langsung dari di dan parent-nya berarti langsung di ini tidak dipilih Kenapa karena memang memang dia tidak memiliki parent Div Oke kita akan coba Oke kalau kita ganti ini menjadi Child selecttor kita lihat ya kita ganti Nah Lihat ini tidak merah ini merah ini tidak merah jadi yang ini tidak dipilih seperti itu Jadi yang dipilih cuma yang ini saja Oke selanjutnya ada adjacent sibling selector nah adjacent sibling selector digunakan untuk memilih elemen setelah elemen yang dipilih jadi kita pilih Div lalu P berarti kita memilih p yang setelah Div jadi istilahnya itu sibling itu adalah saudara ya Jadi yang sejajar atau saudaranya Nah jadi eh sibling di sini itu adalah e elemen yang memang harus memiliki parent yang sama ya Nah gambar di samping contohnya kalau kita Div plus P Artinya kita memilih elemen p yang di dia adalah saudara dari Div jadi sebelahnya Div gitu ya jadi anggap aja ini adik kakak Jadi adik kakak misalnya dia harus punya orang tua atau parent yang sama nah contohnya kalau seperti ini kita tahu di sini ada Div kalau di dalam sini otomatis dia tidak dipilih Kenapa karena ini bukan saudaranya ya bukan siblingnya melainkan ini anak-anaknya jadi semua p di sini tidak dipilih nah tapi p yang dipilih adalah yang sejajar dengan Div ini artinya saudaranya yaitu P ini atau P ini nah tapi karena kita pakainya kalau misalnya di sini adalah adjacent sibling jadi memang hanya saudaranya saja tapi cuma satu jadi contohnya di sini kalau di Nah di sini yang dipilih berarti P ini yang saudaranya karena e p ini dia parentnya adalah body Div juga parentnya adalah body jadi yang dipilih cuma P ini p yang kedua di sini tidak dipilih ya kalau adjacent sibling itu cuma yang dipilih memang hanya satu elemen setelahnya ya nah jadi seperti ini Oke kita akan coba jadi di sini kalau saya punya P2 di sini ya Nah kalau saya ganti di sini menjadi misalnya plus seperti ini ya Nah maka di sini yang diambil adalah satu saudara setelahnya makanya yang dipilih cuma ini aja nah ini yang dipilih ya jadi p yang ini yang dipilih nih jadi yang ini tidak dipilih termasuk semua anak-anaknya di sini tidak dipilih juga nah jadi di sini adalah adjustent sibling selector oke yang terakhir itu adalah general sibling selector Nah kalau ini pokoknya semua saudaranya dipilih jadi beda seperti yang tadi Kalau yang tadi ini ya adjacent itu memang satu aja yang dipilih setelahnya Tapi kalau ini ini semuanya yang satu saudara satu saudara artinya parentnya sama contohnya kalau kita misalnya gunakan ini Div ya dan di sini P artinya semua saudaranya ya yang P itu akan diambil seperti itu jadi contohnya kalau di sini ini ada Div l di sini ada P ada p maka 2 P ini akan diambil Nah karena dia adalah saudaranya dan dia parentnya adalah body Oke kita akan coba Jadi ini kalau kita ganti ya menjadi tanda cacing seperti ini Nah Lihat merah semua ya Jadi ini dipilih ini dipilih nah gimana kalau saya p-nya di atas sini nah ini tidak dipilih Kenapa tidak dipilih karena ini sebelumnya jadi kita harus bilang dulu ini Div dan ini adalah saudara-saudara setelahnya seperti itu Nah jadi kita lakukannya seperti ini jadi kalau di e p-nya itu di ada di ee ininya ya di sebelumnya Nah maka dia tidak dipilih Jadi Yang dipilih itu cuma yang setelah-setelahnya saja Nah jadi kita lakukan seperti ini Jadi ini adalah kombinator selecttor ya Jadi ada banyak jenisnya oke Oke selanjutnya masih ada selecttor yang lainnya ya namanya adalah atribut selector jadi CSS juga mendukung selecttor menggunakan atribut yang terdapat di tag HTML yang kita buat terdapat banyak cara menggunakan atribut selecttor ini Nah kita akan bahas sambil bertahap oke yang pertama adalah kita bisa menggunakan kurung kotak lalu nama atributnya ya Jadi ini adalah atribut selecttornya contohnya misalnya seperti ini kalau kita lakukan seperti ini ya Artinya kita menseleksi ya semua elemen a yang dia memiliki target kalau tidak memiliki target ya atribut target maka tidak akan terseleksi nilainya apa Bebas apapun ya Jadi boleh Apapun Yang penting dia ada atribut targetnya Oke kita akan coba Oke misalnya kita buat di sini ya Ee atribut misalnya html kita buat Oke kita akan buat a misalnya ya lalu kita akan buat di sini akan satu atribut baru Sori e a nah ini kita kosongkan dulu ini contoh satu ya lalu di sini kita tambahkan target misalnya ya lalu Diana contohnya di sini targetnya Blank lalu kita buat 2 3 4 nah tapi misalnya yang ini tidak ada targetnya kita hapus nih isi targetnya ini juga kita hapus isi target nya oke kalau kita buka hasilnya kurang lebih seperti ini ya contoh satu contoh satu contoh satu contoh satu kita akan coba tambahkan misalnya saya mau yang a semua gitu ya jadi yang tag a Semua colornya menjadi Red Nah lihat semuanya karena memang kita pilih yang a saja Oke kalau saya mau A tapi dia punya target target lihat ya yang ada targetnya yang ini ya contoh satu dan ini contoh dua misalnya nya ini contoh tig dan ini contoh 4emp Nah lihat contoh 1 dan 3 saja yang merah artinya Apa artinya yang memang memiliki target kalau yang lain kan tidak punya target makanya dia tidak muncul seperti itu Oke gimana kalau saya Beneran pengen ya seleksi elemennya tapi yang punya atributnya itu punya value-nya Nah kita bisa gunakan kurung kotak atribut sama dengan nah ini nilainya apa seperti itu artinya kalau nilainya sama maka dia akan terseleksi kalau nilainya beda dia tidak akan terseleksi contohnya kalau seperti ini ya A target Blank artinya semua elemen a yang memiliki atribut target yang nilainya und Blank Jadi kalau tidak seperti itu otomatis tidak akan terseleksi Oke kita akan coba misalnya jadi ini yang contohnya saya ini kan Blank contohnya Ini saya ganti yang kedua ini menjadi Sal misalnya ya seperti ini Nah ini kan tetap terseleksi ya dua-duanya sat dan 3 tapi kalau saya ubah saya mau yang target tapi yang Blank saja seperti ini maka yang terseleksi cuma yang contoh satu contoh satu ini contoh 2 3 dan 4 itu tidak terseleksi contoh tig pun dia tidak terseleksi karena nilainya bukan Blank ya melainkan self Nah jadi seperti itu Oke selanjutnya ada ya depannya tanda cacing seperti ini ya sebelum sama dengannya Nah kalau kita lakukan seperti ini contohnya P lalu title ya tanda cacing sama dengan belajar artinya Apa artinya gambar di samping ini artinya memilih semua elemen p yang memiliki atribut title ya yang terdapat di dalam kata di sini ada dalam e kata belajarnya jadi semua p ya ya elemen p yang dia punya triribute title dan di dalamnya ada kata belajar ingat ya ini beneran harus kata belajar kalau digabung Contohnya seperti ini belajar pemograman gabung seperti ini maka dia tidak dapat jadi cuma yang belajar Nah ini yang dapat nih ya tapi kalau belajar pemrograman karena dia bergabung ya Nah dia tidak akan dipilih Nah kita akan coba Oke kita akan buat lagi misalnya di sini saya bikin E P misalnya ya belajar Sori belajar oh ini ini dipilih misalnya ya lalu saya bikin P lagi ini tidak dipilih Misalnya ini saya akan tambahkan title misalnya belajar pemrograman lalu ini title lagi belajar tapi digabung ya pemrograman Oke kalau kita buat menggunakan P misalnya colornya nya red ini kan kena semua ya antara paragraf yang pertama dan paragraf yang kedua Tapi kalau saya tambahkan Oke ini dia punya atribut title ini juga tetap kena semua tapi saya bilang eh dia atributnya ya harus misalnya belajar ini tidak kena Kenapa karena ini nilainya belajar pemrograman dan ini belajar pemrograman Jadi bukan belajar Oke Ternyata saya penginnya itu cuma ngambil pokoknya di dalamnya ada kata belajarnya nah nah artinya ini dapat nih tapi ini tidak dapat Kenapa karena ini kalau digabung belajar pemrograman ya Jadi tidak ada kata belajar jadi ini saya bisa tambahkan tanda charching di depannya nah seperti ini nah dapat yang ini ini dipilih seperti itu Nah jadi ada cara seperti ini juga untuk selecttor ya jadi lumayan banyak cara e untuk atribut selector Oke next-nya ada tanda garis seperti ini ya Eh pipe istilahnya itu Nah kalau kita lakukan seperti ini contohnya kita lakukan seperti ini ya title pipe sama dengan belajar Nah gambar di samping artinya memilih semua elemen p yang memiliki atribut title yang memiliki value belajar atau belajar yang diikuti dengan karakter Dash seperti ini e Sorry bukan Dash ya strip ya Nah seperti ini jadi pokoknya yang ada kata belajar atau belajar diikuti dengan strip seperti itu jadi contohnya kalau kita seperti ini yang kalau belajar pemrograman dapat ya karena dia ada belajarnya ya atau yang belajar strip nah pemrograman ini juga dapat seperti itu Nah Oke kita akan coba Jadi kalau ini kita ada yang ketiga misalnya lalu kita bilang ini belajar strip pemrograman Nah Lihat ini tidak dipilih ya kalau menggunakan seperti ini tapi kalau kita gunakan tanda pipe seperti ini Nah lihat nah dia dapat ya ini yang merah ya Nah kita coba ini dipilih sor nah nah sekarang pertanyaannya loh kok yang belajar pemogramannya tidak dipilih gitu ya Nah kenapa karena memang value-nya ini belajar pemrograman Jadi Yang dipilih itu cuma ee harus beneran isinya cuma belajar aja jadi contohnya kalau ini belajar aja nah seperti ini Ini baru dipilih jadi pokoknya kalau pipe seperti ini dia itu harus belajar atau belajar strip apapun di belakangnya bebas seperti itu Nah jadi kayak belajar atau Ya belajar strip contohnya nah ini bebas belakangnya mau apapun nah tapi kalau yang digabung seperti ini atau yang ada spasinya itu tidak dipilih Oke kita lanjut ya masih banyak nih yang menggunakan atribut selector Oke next nya ada tanda seperti ini ya nah jadi kalau kita lakukan contoh seperti ini title ya lalu belajar Nah Artinya kita memilih semua elemen P ya atau tag p yang memiliki atribut title yang memiliki value dimulai dengan belajar jadi memang awalannya depannya harus belajar Nah kita bisa lakukan seperti ini Jadi ini kayak ee penanda kalau ini dimulai dengan value nah belakang nya bebas mau apa aja ya nah jadi kalau Contohnya seperti ini belajar spasi pemrograman dipilih karena depannya belajar belajar saja juga dipilih belajar strip pemrograman juga dipilih karena depannya belajar Nah kalau ini pemrograman belajar ini tidak dipilih Kenapa karena depannya bukan belajar melainkan pemrograman Oke kita coba Oke kita akan coba misalnya ya ini kita buat lagi ini misalnya pemograman ar seperti ini Nah kita akan ganti ya Ini nah lihat jadi yang belajar dipilih ini juga belajar pemrograman dia dipilih gitu ya Ini juga dipilih ini tidak dipilih karena belajarnya ada di belakang jadi kita bisa gunakan seperti ini Oke ada juga tanda dolar ya Nah kalau kita lakukan seperti ini title lalu dolar sama dengan belajar arti nya kita memilih semua elemen p yang memiliki atribut title yang memiliki value diakhiri Jadi kalau ini diakhiri jadi diakhiri dengan belajar jadi kalau di belakangnya itu belajar baru dipilih Nah kita coba ya Nah contohnya kalau seperti ini belajar pemrograman tidak dipilih karena depannya yang belajar belakangnya pemrograman kalau ini belajar dipilih Kenapa karena kan belakangnya juga pasti belajar lalu kalau ini tidak dipilih dan ini dipilih karena belakangnya adalah belajar Oke kita coba ya jadi ini saya ganti Misalnya menjadi dolar ya sori dolar nah ini nah lihat ini dipilih ya Dan ini juga dipilih seperti itu Oke selanjutnya ada tanda bintang Seperti ini Nah kalau kita bikin seperti ini contohnya title bintang sama dengan belajar ya Artinya kita memilih semua elemen p yang memiliki atribut title yang mengandung kata belajar Nah kalau ini bebas belajarnya mau di mana aja pokoknya ada kata belajarnya ya mau ada spasinya mau tidak gitu ya tetap akan dipilih Yang penting ada kata belajarnya ya Jadi ada belajarnya ya mau ada spasi atau tidak itu akan diambil Oke kita coba Jadi misalnya kalau saya tidak peduli di mana pun lokasi belajarnya dan apakah dia gabung sama kata lain atau tidak Gitu ya kita bisa gunakan bintang Seperti ini Nah Lihat ini semuanya dipilih jadi belajar dipilih yang digabung dipilih Yang ini dipilih dan yang di belakang juga dipilih seperti itu ya Oke gimana kalau kita ee pengin memilih pakai atribut saja tidak peduli Apakah tag-nya apapun itu gitu ya Nah kita juga sebenarnya bisa gitu ya jadi teman-teman bisa lakukan atribut selector tanpa tag Contohnya seperti ini langsung aja kurung kotak title bintang sama dengan belajar jadi kita pilih semua elemen apapun berarti ya Nah tanpa peduli tag-nya apa yang penting dia punya atribute title dan isinya ada belajarnya seperti itu atau teman-teman tambahkan di dalam kelas juga boleh contohnya di sini kelas artikel jadi saya mau e ambil semua kelas artikel tapi dia punya title Belajar seperti ini ini juga boleh enggak masalah jadi atribut itu tidak wajib teman-teman menyebutkan tag-nya atau bahkan tidak wajib tag teman-teman juga bisa digunakan di kelas atau b kan di ID seperti itu ya Oke kita coba ya jadi contohnya Ini misalnya ini kan P semua ya nah saya mau Oke saya enggak apa dulu deh di sini misalnya ada span gitu ya Eh span ini contoh span tapi di sini ada eh title misalnya pemrograman Belajar seperti ini ini kan tidak dipilih ya nah saya mau semuanya deh enggak peduli tag-nya apapun nah saya tinggal hapus ini tag-nya Nah lihat contohnya semuanya akan terpilih ya span pun akan terpilih Nah jadi ini adalah atribut selector jadi teman-teman juga bisa melakukan seleksi elemen ya berdasarkan atributnya Oke sekarang kita bahas tentang color ya atau warna color merupakan rule di CSS untuk mengubah warna biasa digunakan pada teks ya Nah CSS itu mendukung banyak cara menggunakan color Nah kita bisa lihat di sini dokumentasinya jadi saya sarankan teman-teman ee baca dokumentasi lengkapnya ya tentang color ini karena banyak banget cara untuk membuat color Nah kita akan sambil baca di sini Jadi ini adalah color ya Nah ini contohnya kita bisa Sebutkan nama colornya ini contohnya ya Rebecca Purple ini nama colornya atau nama warnanya atau kita menggunakan kode hex ya di sini ini contoh kode hexnya nya hasilnya seperti ini atau kita bisa gunakan RGB hsl hsla atau hwb jadi ada banyak format warna sebenarnya ya Nah teman-teman kalau bingung apa itu RGB gitu ya hsl teman-teman bisa Googling aja J nanti di sana ada format warna ya jadi format warna itu kita bisa gunakan beberapa format warna seperti ini nah cara penggunaannya sederhana jadi kita sebutkan color ya titik du lalu di sini value-nya value-nya bisa teman-teman gunakan nama ya atau hex-nya atau RGB atau yang lain-lain Nah jadi teman-teman bisa ya Oke kita akan coba misalnya ya Jadi sebelumnya kan kita sudah coba E menggunakan color red misalnya nah kita akan coba misalnya dari mulai menggunakan eh color name gitu ya nanti gunakan e RGB dan lain-lain oke nah sekarang pertanyaannya warna color itu apa aja sih gitu ya nah jadi Sebelumnya kan kita pernah mengguna an color red ya Nah selain red itu html mendukung banyak nama color atau nama warna kita bisa lihat di halaman web ini daftar warna apa saja yang didukung oleh html dan teman-teman kalau pengin lihat detail warnanya seperti apa kita bisa lihat di halaman ini ini adalah color names jadi nama-nama warna ya nama-nama color nah seperti ini jadi teman-teman bisa gunakan namanya contohnya Indian red namanya tidak cas Sensitif ya Jadi teman-teman mau misalnya eh ikuti menggunakan huruf kecil semua itu juga boleh sebelumnya kita menggunakan red jadi warnanya akan seperti ini ini adalah kode hex-nya kalau teman-teman menggunakan kode hex ya atau ini rgb-nya kalau teman-teman menggunakan kode RGB jadi ini adalah html yang e Sori warna yang didukung oleh html ini yang merah ya jadi banyak banget noh ada salmon eh Dark salmon dan lain-lain atau yang warna pink Nah ada banyak juga Pink gitu ya hot pink Deep pink dan lainl lain atau Ada orange nah ini ya banyak atau ada yellow yellow juga banyak ya Purple dan banyak masih banyak yang lainnya ke bawah teman-teman Tinggal pilih aja warna yang teman-teman mau gunakan nanti tinggal sebutkan namanya di sini ya Oke kita akan coba misalnya ya nah jadi simpelnya teman-teman cukup gunakan nanti eh di sini nama propertinya adalah color lalu di sini nama warnanya jadi teman-teman tinggal Sebutkan nama-nama warnanya sesuai dengan dengan nama-nama yang tadi di website-nya Oke kita akan coba buat ya file baru namanya adalah color.html kita akan buat html di sini Oke kita akan buat misalnya dari mulai H1 misalnya ya ini title lalu H2 ini subtitle P Misalnya ini kel misal ya Oke kita akan buat di sini kita akan e preview dulu nah hasilnya hitam semua default-nya Nah kita akan buat di sini eh style Oke saya mau ubah yang H1 ya colornya Misalnya menjadi pink seperti ini maka ini berubah menjadi pink lalu misalnya saya mau ubah yang H2 ya color-nya Misalnya Green Nah kita bisa lakukan seperti ini nih contohnya yang P Saya mau ganti color-nya ya Misalnya menjadi ee ini ya Misalnya Oh ya E blue aja blue seperti ini nah hasilnya menjadi warna biru seperti ini nah jadi kita bisa lakukan seperti ini jadi cukup gunakan color otomatis dia akan mengubah si warna teksnya Nah ini baru nama ya nah gimana kalau kita menggunakan format yang lain Oke jadi selain menggunakan color name atau warna colornya CSS juga mendukung color menggunakan format hex RGB dan juga hsl nah contohnya kalau teman-teman mau teman-teman bisa menggunakan website ini untuk eh mencari gambar e Sori mencari warna ya Nah teman-teman bisa gunakan ini misalnya jadi teman-teman bisa buka colorpicker.me misalnya nanti di sini teman-teman tinggal cari aja kira-kira warna yang e teman-teman mau gunakan ya nanti teman-teman bisa lihat contohnya di sini saya mau ke yang biru nah ini kelihatan ya di background-nya berubah ya Nah di sini ada kodenya ini hex code-nya Nah kita bisa gunakan hex code ini ya atau RGB ini ya atau hsl ini Nah teman-teman tinggal gunakan aja yang teman-teman butuhkan Nah jadi ini lebih ini ya lebih dinamis ya jadi kita bisa ee mau gunakan warna yang mana Contohnya seperti ini contohnya saya akan copy yang hex code ini misalnya ya Nah nanti kita akan coba ee buat di sini misal ya Nah ini saya akan ubah tadinya kan pink ya kita akan coba menjadi hex eh sorry ini belum dicopy nah seperti ini Nah lihat ya jadi Ungu Seperti ini Nah kita coba sekarang yang warna hijau yang ini saya pakainya RGB nah ini yang hijaunya dari RGB yang ini Nah Lihat lalu ini saya mau yang pink misalnya Oke ini yang pakai hsl Saya copy nah hasilnya seperti ini jadi pilihan warnanya teman-teman tinggal Tentukan aja gitu ya Kebanyakan orang sebenarnya menggunakan ini ya hex atau juga RGB nah tapi ya baik lagi tergantung teman-teman lebih suka menggunakan yang mana sekarang kita bahas tentang teks CSS itu bisa digunakan untuk mengubah properties atau juga format untuk teks ya atau tulisan contohnya sebelumnya kita sudah menggunakan color untuk mengubah warna si teksnya nah selain color Sebenarnya masih banyak yang bisa kita ubah dari properties atau juga format teks Oke kita akan bahas sambil berjalan ya karena banyak sekali ya ya untuk teks ini yang pertama kita bahas tentang text alignment text alignment digunakan untuk mengubah rata tulisan kita bisa mengubah rule yang e Sori kita bisa menggunakan rule namanya adalah text align nah di mana memiliki beberapa nilai contohnya ada left untuk rata kiri R untuk rata kanan center untuk rata tengah justify untuk rata kanan dan juga kirinya Nah jadi kita bisa gunakan seperti ini nah detailnya teman-teman bisa baca di sini ya dokumentasi lengkapnya untuk test Line Sorry text align Jadi kalau misalnya kita start atau left maka dia akan rata kiri Contohnya seperti ini kalau end atau right maka dia akan rata kanan Center Dia rata tengah dan justify dia rata kiri dan kanan oke kita langsung coba Oke kita akan buat di sini file baru namanya adalah tex.html kita buat html Oke kita buat di sini misalnya saya akan bikin P ya lalu di sini saya akan isi e lorem Nah di sini ada auto generate enter nah saya akan coba preview nah isinya lumayan panjang nih sudahah cukup sepertinya Oke saya tambahkan lagi lorem lagi lalu saya tambahkan Lor rem lagi nah oke defaultnya kalau teman-teman perhatikan dia rata kiri ya jadi kirinya rata kanannya sih tidak terlalu rata ya jadi ngikutin Nah kita bisa ubah contohnya ya Jadi kita ubah Style ya Nah contohnya P mau kita ubah eh Text align-nya jadi saya mau Ubah menjadi default-nya kan memang lab ya Nah kalau lab berarti tidak ada yang berubah sama seperti biasanya Oke saya mau Ubah menjadi right Nah lihat dia rata kanan sekarang ya jadi di kanannya yang rata Oke saya mau yang center nah dia rata tengah seperti ini atau Oke saya maunya yang justify nah dia rata kiri dan kanan jadi teman-teman tinggal pilih aja mau seperti apa nah nah ini contohnya Saya mau rata kiri deh atau justify sih enggak apa-apa ya justify contohnya rata kiri dan kanan Oke jadi kita bisa lakukan seperti ini Oke next-nya ada teks decoration Tex decoration digunakan untuk menambah garis dekorasi ke teksnya Nah kita bisa menggunakan aturan atau rule-nya atau propertinya namanya adalah text decoration Nah kita bisa lihat di sini contohnya nah text decoration ya ada contohnya di sini kalau teman-tan perhatikan jadi text decoration gitu ya itu sebenarnya SH hand jadi shth itu adalah singkatan dari beberapa e properti ada text decoration Line text decoration color Tex decoration Style ya dan text decoration thickness Nah kita bisa lihat contohnya di sini yanya di sini text decoration underline maka dia akan ada garis bawahnya seperti ini Lalu di sini underl doted jadi garis Bawahnya pakai titik-titik seperti seperti ini ada di sini underline doted Lalu ada warnanya maka merah lalu di sini contohnya oke eh Green gitu ya warnanya lalu dia engak pakai dotted ya e dia pakainya wfi bergelombang lalu di sini underline nah formatnya seperti Apa formatnya sebenarnya teman-teman bisa baca di sini cara penggunaannya ya jadi text decoration nah seperti ini nah atau kalau teman-teman mau e lihat satu persatu teman-teman bisa lak kan menggunakan seperti ini text decoration Line jadi ini garisnya teman-teman bisa underline bawah ya atau Line throw ya Nah kita bisa lihat di sini juga kita akan coba sambil lihat nah jadi ada underline garis bawah ada operline di atas ada Line throw itu di tengah-tengah gitu ya teman-teman bisa pilih yang mana Nah selanjutnya Misalnya ini text decoration colornya jadi ini warnanya yang tadi garis itu mau diganti warna apa Lalu ada t deor style nah ini mau stylennya apa ya Ada banyak contohnya solid solid itu seperti ini garis lurus gitu ya Ada double berarti garis lurusnya dua kali Lalu ada dotted ya garis titik-titik seperti ini Lalu ada Dash gitu ya agak-agak panjang ya garis titik-titiknya Lalu ada wfi bergelombang seperti ini teman-teman tinggal pilih mau yang mana Nah jadi teman-teman bisa lihat di sini text decoration style nah atau ya yang terakhir itu ada t thickness ya ketebalannya Nah kita lihat di sini ini adalah ketebalannya contohnya di sini teman-teman text decoration thickness-nya 3 PX atau 3 pikel nah atau ini 4 rem ya nanti eh ukuran gitu ya unit seperti ini nanti kita bahas di materi sendiri yang penting ini adalah ketebalannya ya mau tebal apa Oke kita akan coba ya nah jadi ini kalau teman-teman mau gunakan satu-satu atau mau sekaligus di dalam satu properti tinggal gunakan tek De decoration seperti itu oke nah kita lihat di sini Nah ya text decoration itu yang pertama isinya adalah text decoration Line ya Nah lalu text decoration style lalu text decoration color seperti itu ya Oke kita akan coba Oke kita udah bikin ya di sini nah saya akan bikin lagi misalnya H1 Misalnya ini judul artikel Nah kita akan ubah yang h1-nya H1 misalnya saya akan tambahkan teks decoration Line Tipenya apa misalnya saya mau yang eh teman-teman mau yang e operline contohnya maka di atas gitu ya atau underline di bawah gitu ya atau Line throw ya di tengah-tengah jadi ini dicoret nah saya maunya yang di bawah misalnya ya jadi underline lalu misalnya text decoration Nah colornya warna nanya mau apa contohnya di sini ya kita bisa gunakan color seperti biasanya ya entah itu ee gunakan nama RGB gitu ya hsl bebas contohnya Saya mau ee di sini adalah blue gitu ya Nah maka dia garis bawahnya warnanya biru ya lalu teks eh decoration ya lalu di sini thickness-nya ketebalannya misalnya 5 PX ya 5 pikel nah ini tebal banget nih atau 10 PX nah ini lama lumayan tebal ya saya gunakan 5 pikel aja nah lalu misalnya text decoration style nah saya mau style-nya nah default-nya kan ee ini ya solid ya Nah seperti ini saya mau dot misalnya nah dotted nah maka dia titik-titik seperti ini atau teman-teman mau misalnya dobel maka garisnya dua atau teman-teman mau wfi bergelombang seperti ini ya nah jadi teman-teman bisa pilih mau menggunakan yang mana ini kita ee ganti Solid aja nah seperti ini Jadi ini adalah text decoration ya Jadi untuk garis jadi mau seperti yang apa Tinggal teman-teman pilih aja maunya seperti apa Oke next-nya ada text transformation text transformation digunakan untuk mengubah upper case dan juga lower case untuk text Nah defaultnya kalau kita misalnya mengetikkan tulisan maka akan ditampilkan tulisannya sama gitu ya Nah kalau teman-teman Misnya pengin ganti oke khusus untuk title Saya mau Ubah menjadi huruf besar semua misalnya nah kita bisa menggunakan aturannya adalah text transform kita bisa lihat di sini ya nilainya ada apa aja Nah yang pertama ada capitalize ya jadi capitalas itu huruf ee Sori e Huruf pertamanya ya dari tiap katanya itu pasti huruf besar contohnya di sini ya Nah Lihat huruf besar ya Nah kalau upper case maka semuanya kapital kalau lower case maka semuanya huruf kecil lalu kalau non berarti ya baik lagi ke tulisan awalnya kalau tulisan awalnya seperti itu ya seperti itu ya Nah seperti itu Jadi teman-teman tinggal pilih saja ya Oke kita akan coba Oke contohnya H1 ya saya mau ubah teks transformnya ya menjadi Eh ini capitaliz Nah lihat jadi ini ya i-nya besar j-nya besar a-nya besar Padahal di sini j-nya kecil Anya kecil atau teman-teman mau er case semua Nah jadi ini otomatis dia huruf besar semua jadi tidak ada kesalahan ketik lagi nih sekarang jadi kalau harus seperti Huruf besar semua ya ini walaupun huruf kecil semua di html-nya nanti dia ditampilkannya huruf besar semua Nah jadi ini adalah text transformation Oke next-nya kita bahas Tex spacing Tex spacing ini digunakan untuk mengatur jarak dalam teks Nah kalau ini lumayan banyak ya Ee jarak dalam teks ini yang pertama ada aturan teks indent digunakan untuk mengatur jarak di awal teks jadi kalau di awal teks teman-teman mau menambahkan jarak Biasanya kan kalau misalnya kita mengetikkan sebuah artikel gitu ya biasanya kan di depan Ada jaraknya gitu ya Nah berapa ee jaraknya di depan gitu ya di ee bagian pertama ee untuk paragraf misalnya nah teman-teman bisa gunakan teks indent Nah kita lihat di sini contohnya jadi ini adalah teks inden ya kalau ini default-nya misalnya kosong ya Nah kalau tem-teman 30% Nah lihat dia ngegeser 30%. atau ini ya ini malah kalau negatif ya dia malah e ke sini ya keluar ke sini Jadi teman-teman tinggal e gunakan teks inden Oke kita akan coba langsung misalnya nah paragraf yang di sini p-nya kita tambahkan teks inden ya Misalnya ee 50 PX Nah lihat jadi ini ada jarak ya Di di sini sekitar 50 pikel seperti itu Nah jadi kita bisa lakukan seperti ini oke next-nya Ada letter spacing nah letter spacing itu digunakan untuk jarak antar e ininya ya antar huruf nah defaultnya normal jadi seperti biasa kalau teman-teman contohnya Oke saya mau spasinya 1 piksel maka dia akan e ada jarak antar hurufnya itu 1 piksel ya atau kalau negatif berarti dia makin merapat seperti itu Oke kita coba Jadi kita contohnya Ini default-nya ya letter spacing kita tambahkan jadi 5px nah lihat jadi lumayan besar ya spacing-nya Nah atau saya jadikan -2 Nah lihat dia makin rapat Nah jadi teman-teman bisa lakukan seperti itu default-nya sih nol ya nah jadi seperti biasa Jadi teman-teman kalau mau Oke saya tambahkan e 2 piksel nah jatuhnya jadinya seperti ini ini adalah letter spacing Oke next-nya ada yang namanya line ha digunakan untuk mengatur jarak antar barisnya Nah teman-teman bisa atur Kalau lebih dari satu e baris teman-teman bisa atur default-nya adalah normal ya Jadi ini contohnya seperti ini kalau kita Oke jaraknya 2,5 Nah lihat dia jaraknya 2,5 kali dari normal ya Nah atau kalau pakai pikel ya bisa seperti ini jadi kita bisa tambahkan Di sini Line Sorry Line hag kita tambahkan misalnya E 20 piksel Nah jadi dia akan semakin naik ya Nah contohnya misalnya 30 piksel Nah lihat jadi jaraknya ya Antar barisnya dia semakin renggang Jadi teman-teman bisa atur seperti itu oke next-nya Ada word spacing digunakan untuk mengatur jarak antar katanya kalau teman-teman mau atur jarak antar katanya teman-teman bisa gunakan word spacing ini nah contohnya default-nya adalah normal ya Antar katanya kalau teman-teman mau atur jarak antar Katanya tinggal tambahkan word spacing aja jadi ini contohnya Saya mau perbesar lagi misalnya Word spacing-nya menjadi contohnya 25 pikel Nah jadi antar katanya lumayan jauh ya sekarang Nah kita bisa lakukan seperti itu oke yang terakhir untuk Tex spacing ada yang namanya white Space digunakan untuk mengatur bagaimana white Space ditampilkan Nah kita bisa lihat di sini nah contohnya di sini white space-nya ini normal ya jadi seperti ini no rep misalnya jadi tidak ada enter gitu ya jadi lurus aja terus gitu ya Nah seperti ini Nah teman-teman bisa lakukan seperti ini atau pre gitu ya Nah atau pre wap gitu ya atau preeline ada break Space gitu ya ini sebenarnya mungkin jarang digunakan ya karena biasanya kita pakai bawaan normalnya karena kalau misalnya noap nanti teksnya terusan ke samping terus ya tidak berhenti tidak ada e break-nya tidak ada enternya istilahnya itu tidak ada break otomatis Oke kita coba misalnya ya jadi di sini kita tambahkan [Musik] eh white Space misalnya di sini no ini no wap ya Nah lihat dia akan ke kanan terus jadi dia tidak pernah ke bawah sama sekali jadi mungkin ini jarang digunakan saya akan kasih komentar nah seperti ini Jadi ini adalah text spacing oke nextnya ya ada yang namanya Tex Shadow Tex Shadow itu digunakan untuk menambahkan efek bayangan pada teks untuk menambahkan t Shadow kita bisa menggunakan aturan atau rule atau properti namanya adalah Tex Shadow Nah kita bisa lihat di sini Jadi ini untuk menambahkan epek ya Nah kita bisa lakukan seperti ini jadi contohnya di sini ya Tex Shadow nah ini maksudnya apa 1 piksel 1 piksel 2 pikel Pink ini maksudnya apa Nah kita bisa baca di sini sintxnya jadi Tex Shadow pertama adalah offset X ya jadi secara X ya Nah atau X itu adalah horizontal nah e lalu y secara vertikalnya ya bayangannya lalu di sini ada blur ya apakah e bayangannya akan nge-blur atau tidak Gitu ya kalau mau blur berapa radius blurnya lalu di sini colornya warna bayangannya apa Nah makanya nilainya di sini ada empat ya Jadi teman-teman bisa lakukan atau gunakan seperti ini Oke kita akan coba ya Jadi ini adalah menambahkan efek ke dalam SI teksnya Oke contohnya di H misalnya ya biar kelihatan jelas efeknya misalnya saya akan tambahkan di sini text Shadow misalnya ee e 5 PX ya 5 PX Nah lihat dia agak ada shadow-nya ya bayangannya ke bawah cuma ini kayaknya eh karena warnanya defaultnya adalah hitam jadi kelihatannya kayak nge-blend ya nah saya coba di sini ganti color-nya e red nah ini juga teksnya masih defaultnya ngikutin dari ininya tapi nanti kita ganti lalu blur-nya misalnya 2px nah lihat dia agak ngeblur ya Nah lalu kita tambahkan di sini Black nah seperti ini Jadi ini ada efek bayangannya kayaknya sih 5 piksel terlalu jauh ya contohnya saya ganti jadi 2 piksel nah ininya Ini juga 2 pikel nah ini better ya lebih bagus Nah jadi kita bisa tambah efek bayangan Ya seperti ini Jadi teman-teman tinggal gunakan Tex Shadow Nah jadi ini adalah properti-properti ya yang bisa kita gunakan di dalam teks jadi lumayan banyak sekali ya dengan menggunakan CSS kita bisa mengubah banyak gaya ya dari HTML teksnya Oke Sebenarnya masih banyak ya yang bisa kita lakukan nah tapi eh overall sebenarnya yang sudah kita gunakan tadi itu mungkin yang banyak kita bakal nanti gunakan ya ketika membuat web Nah kalau teman-teman masih ingin melihat lebih detail tentang teks ya di CSS teman-teman saya rekomendasikan baca dua artikel ini ya untuk CSS text dan juga CSS text decoration jadi saya sarankan teman-teman boleh explore secara otodidak ya untuk dua link ini Oke sekarang kita bahas tentang font ya saat kita membuat tulisan biasanya web browser akan menggunakan default font-nya ya tiap web browser biasanya memiliki default font-nya masing-masing bahkan beda sistem operasi mungkin default font-nya akan berbeda saat kita membuat buat web baiknya kita menggunakan font yang sama ya sehingga nanti tampilan web kita itu konsisten Kalau dibuka di browser yang berbeda atau bahkan di sistem operasi yang berbeda Nah kita bisa mengatur font ya di halaman html menggunakan CSS dengan propertinya adalah font Nah kita bisa lihat di sini jadi caranya sangat gampang ya jadi kita bisa gunakan font nah font ini adalah shth ya shth itu adalah singkatan ya dari banyak properti yang lainnya nah ini contoh p aannya Nah kita bisa lihat di sini Jadi ini ada banyak banget nih ada yang namanya font Family nah ini font Family itu adalah Eh nanti nama fontnya font size ukuran dari fontnya mau berapa gitu ya Ada font stretch ya Ada font style ada font varian ada font W ada line way ha ya yang sudah pernah kita bahas ya Yang line ha Nah ini teman-teman cara format penulisannya memang bisa digabungkan contohnya kalau font teman-teman mau ubah font size-nya dan font Family bisa seperti ini gitu ya atau font misalnya font size per e Line Line hag-nya lalu font Family bisa seperti ini atau teman-teman bisa gunakan font lalu di sini font style-nya font hag-nya size dan lain-lain teman-teman bisa baca di sini nah Biar lebih gampang kita bisa gunakan per individu seperti ini ya Jadi teman-teman bisa gunakan contohnya font fam family dan lain-lain Nah kita akan bahas setelah materi selanjutnya nih Oke untuk mengubah jenis font kita bisa menggunakan properti yang namanya font Family Nah jadi ini font Family ya ini untuk mengubah nama font yang mau digunakan contohnya di sini font family-nya adalah Georgia koma Serif Jadi nanti dia eh bisa disebutkan beberapa jadi nanti kita akan pakai font-nya adalah Georgia kalau ternyata di sistem operasinya atau di web browsernya tidak tersedia maka dia akan menggunakan Serif nah termasuk yang ini Ini e gilsense misalnya kalau tidak ada dia akan menggunakan sunserif misalnya seperti itu ya oke nah menggunakan font Family sangat tergantung dengan sistem operasi yang digunakan jikalau font-nya tidak ada di sistem operasi yang digunakan maka hasilnya tidak akan sesuai dengan yang kita pilih Nah kita bisa menggunakan generic font Family yang sudah menjadi standar untuk CSS Sebenarnya ya Nah kita bisa lihat daftar generic font Family di sini nah jadi ini adalah font-font family yang generic yang harusnya ada di semua web browser atau sistem operasi Nah kita bisa lihat di sini Jadi ini adalah generic font Family yang pertama adalah Serif Serif kurang lebih tampilannya akan seperti ini ya Jadi ini contohnya e Times New Roman kalau ada atau kalau tidak ada mungkin ada konstantia dan lain-lain ya nah ini kalau pakai bahasa yang EE lain ya maksudnya ada batang gitu ya Ee mungkin bahasa Jepang Cina dan lain-lain jadi fontnya akan menggunakan kan format ini atau ada Serif contohnya ya Nah ini contohnya dia menggunakan perdana misalnya atau tipe font yang lain ada juga csif ya Nah tipe fontnya seperti ini lalu juga ada Fantasy kurang lebih tipe fontnya akan seperti ini ya Lalu ada monospace nah tipe font-nya adalah seperti ini Jadi ini adalah beberapa default font ya atau generic font nah contohnya kita akan coba nih ya menggunakan si generic font ini Oke saya akan buat sebuah file baru di sini namanya adalah font.html lalu kita buat di sini html Oke kita akan bikin P misalnya ya atau H1 dulu nah ini adalah judul lalu saya bikin P saya ketikkan lorem nah Oke kita akan lihat hasilnya seperti ini saya akan ubah misalnya untuk H1 ya Nah di sini font family-nya nah saya akan ubah ya defaultnya ini e Times New Roman ya Jadi ini adalah eh harusnya dia menggunakan ini ya menggunakan Serif ya Nah kita akan ganti menjadi sif misalnya saya akan ganti menjadi S Serif Nah lihat dia rubah ini kurang lebih menggunakan ini ya Eh verdana nih seperti ini kalau teman-teman mau ganti oke Saya mau ganti menjadi Fantasy misalnya nah kita bisa ubah contohnya ee P saya ubah ya font family-nya menjadi Fantasy nah hasilnya dia seperti ini nah jadi kalau teman-teman mau ubah ya yang memang menggunakan generic ya teman-teman bisa gunakan yang tadi Nah kalau teman-teman mau ubah sesuai dengan nama font yang memang ada di sistem operasi ya perlu diperhatikan ya pastikan nanti di sistem operasi eh user yang membuka website kita itu beneran ada fontnya kalau tidak ada nanti dia tampilannya balik lagi ke eh Serif ya Eh sorryi Sans ya Nah default-nya yang ini Oh ya Serif ya default-nya Yang ini Serif Jadi kalau teman-teman coba misalnya Nama fontnya misalnya tidak ada seperti ini Nah lihat dia balik lagi ke Serif gitu ya nah jadi pastikan font-nya harus ada Oke selanjutnya misalnya kita akan ubah font style-nya untuk mengubah style dari font kita bisa menggunakan properti yang namanya font style font style itu apa gitu ya jadi ini untuk mengubah style-nya jadi kita misisalnya ubah normal default-nya kan normal italik misalnya ya garis miring eh sorryi bukan garis miring jadi e hurufnya miring gitu ya Nah kita bisa gunakan italik atau oblik ya Nah ini juga miring juga sebenarnya ya nah jadi kita bisa gunakan oblikwe ini kemiringannya berapa gitu ya nah jadi kita bisa gunakan seperti ini Jadi ini menggunakan font style-nya nah gimana kalau mau jadi huruf tebal misalnya nah bukan menggunakan font style Nah kalau untuk ketebalan kita bisa gunakan properti yang namanya font wake ya Nah kita bisa lihat ini font WG Nah kita bisa lihat normal ini Bolt ya tebal nah ini adalah lighter lebih e lurus berarti ya ini boulder lebih tebal lagi nah seperti itu Oke kita akan coba Oke font Family di sini yang H1 Saya mau e tambahkan misalnya yang font ininya ya font style-nya misalnya italic nah lihat dia menjadi miring e lalu saya tambahkan font E wight ini menjadi bol nah ini atau boulder nah ini kayaknya udah tebalnya udah maksimal sih Ya seperti seperti ini ya Nah kalau ini Fantasy nah ini sebenarnya udah tebal sih ya font WG Bolt ya Jadi kalau kita tebalkan emang udah seperti ini tebalnya kayaknya Nah kalau misalnya kita font e style-nya italik nah dia menjadi miring Nah jadi seperti ini Jadi ini untuk merubah Style ya Oke gimana kalau kita mau mengubah ukuran dari si fontnya ya Nah kita bisa gunakan font size jadi font size ini kita bisa gunakan ya untuk mengubah ukurannya Nah kita bisa gunakan pikel gitu ya atau ukuran yang lainnya atau smaller lebih kecil gitu ya X small ya ekstra kecil atau e lebih kecil 80% misalnya dari ee huruf aslinya dan lain-lain Nah kita Nanti bahas ya tentang e unit pengukuran seperti ini nanti di materi terpisah Nah jadi ini adalah untuk mengubah S siz-nya misalnya ya untuk yang ini font size-nya itu kan default-nya adalah 100% ya nah jadi ini 100% yang default asli ya kalau saya mau naikkan Oke saya 200 misalnya ya Atau mau langsung pakai pixel misalnya misalnya seperti ini nah ini juga sama misalnya font size-nya Eh 10px misalnya nah hasilnya agak lebih kecil seperti ini Jadi ini adalah font size-nya Nah jadi teman-teman kalau mau mengubah pengaturan dari font-nya teman-teman bisa lakukan beberapa hal seperti ini Oke yang terakhir misalnya sebagai bonus nah salah satu penyedia font gratis yang bisa kita gunakan namanya adalah google font Nah kita bisa mencari font di google font lalu teman-teman bisa menggunakan CSS untuk menambahkan font yang kita mau ya lalu kita tambahkan ke halaman web kita teman-teman bisa cari ya ya font-font-nya di sini banyak font yang gratis ya Jadi teman-teman bisa gunakan nah ini ada banyak sekali fontnya teman-teman Tinggal pilih aja butuh font yang mana misalnya saya akan gunakan ini sepertinya menarik nih ya font ini nah ini nama font-nya adalah agbalumo ya nah saya bisa gunakan font ini nah cara menggunakannya Seperti apa cara menggunakannya teman-teman bisa ee copy ini misalnya ya Nah ini namanya nanti teman-teman tinggal tambahkan ya css-nya ke halaman website-nya jadi contohnya di sini nah kita bisa tambahkan link rail ya style seat lalu di sini hp-nya adalah https fonts.google api ya lalu ti.com/css tanda tanya familynya sama dengan nama yang tadi Nah Nah selanjutnya saat teman-teman bikin teman-teman Tinggal Tentukan font family-nya yang tadi nanti otomatis dia e akan digunakan si font yang ini nah jadi ini teman-teman bisa pakai yang gratis ya contohnya dari Google font tapi ingat lagi ya teman-teman baca dulu di sininya di sini ada yang namanya lcens ya jadi pastikan di sini Eh ini Eh boleh digunakan contohnya di sini Open font lisens gitu ya ya jadi kita bisa menggunakannya ya Nah bahkan untuk di digital komersial dan lain-lain jadi artinya ini gratis nih yang font yang ini nah jadi pastikan teman-teman nanti baca dulu lisensinya sebelum menggunakan nah ini contoh hasilnya jadi teman-teman kalau mau Oke kita coba misalnya Eko Kurniawan kanedi nah hasilnya kurang lebih seperti ini Oke kita akan coba ya Nah kita akan coba di sini berarti di sini ya sebelum style kita di sini saya akan tambahkan link ya lalu di sini eh railnya sty sheet Nah di sini ini kita ganti https ya slash SL font Jangan sampai salah ya Google Apis Ya tik com/css ya Eh lalu tanda tanya family sama dengan nama yang tadi misalnya agmalumo ya Nah lalu di sini contohnya Saya mau ganti font family-nya menjadi yang tadi saya gunakan nah nah lihat ini berubah sekarang fontnya nah misalnya saya mau ganti juga yang ini nah ini juga sudah berubah ya nah coba saya ganti 20 piksel biar kelihatan Nah lihat jadi seperti ini kalau teman-teman ee mau menggunakan contohnya e font yang dari Google font sekarang kita bahas tentang background CSS bisa digunakan untuk mengubah latar belakang atau namanya adalah background ya dari tiap elemen di html yang kita buat kita bisa menggunakan properti namanya background kalauot teman-tan perhatikan di sini background Itu adalah sebuah shortcut juga untuk banyak atribut ya Nah di sini ada background banyak banget nah kita akan bahas sambil berjalan ya Nah di sini ada banyak ya background-nya Nah kita akan bahas dulu Nanti background-nya yang color Ya tipenya Oke jadi background yang paling sederhana itu adalah background color yaitu mengubah background elemen menjadi color atau warna nah sama seperti property color background color juga mendukung format seperti misalnya E hex atau nama colornya atau RGB hsl dan lain-lain Nah kita bisa menggunakan properti namanya adalah background color untuk mengubah background menggunakan color Oke kita bisa lihat di sini untuk dokumentasi background colornya jadi contohnya di sini background colornya Brown maka latarnya menjadi Brown background colornya ini menggunakan hex ya RGB rgba hsl hsle seperti itu Oke kita akan coba ya jadi jadi simpel banget untuk mengubah background-nya oke di sini misalnya kita buat nama file-nya adalah back eh ground.html Nah kita buat di sini Oke kita akan buat p misalnya ya Nah di sini saya akan tambahkan lorem selesai kita coba lihat nah hasilnya seperti ini nah saya mau ubah misalnya Si paragraf ini background-nya Nah kita bisa tambahkan style misalnya Eh P itu background color-nya Saya mau Ubah menjadi misalnya pink Nah sekarang background colornya berubah menjadi pink atau Saya mau seluruhnya artinya bodinya ya kalau seluruhnya nah saya mau ubah body ini background color-nya menjadi Aqua misalnya nah lihat ya yang body seluruhnya berarti total background-nya menjadi Aqua warna nah sedangkan khusus untuk yang P ini ini menjadi pink jadi kalau teman-teman mau mengubah background-nya teman-teman tinggal gunakan background color nah sebenarnya Selain warna teman-teman juga bisa menambahkan background dalam bentuk contohnya gambar misalnya nah tapi nanti kita bahas di materi khusus ya untuk background image sekarang kita bahas tentang box model nah box model ini ini adalah hal yang penting ya ketika teman-teman belajar CSS Nah teman-teman harus ngerti benar-benar tentang box model ini jadi saat menggunakan CSS terdapat konsep namanya adalah box model nah biasanya digunakan ketika kita ingin mengatur tata letak atau layout pada elemennya setiap elemen di html itu memiliki book ya atau kotak yang terdiri dari kontennya Lalu ada padding-nya ada bordernya ada juga marginnya nah kurang lebih tampilannya akan seperti ini Jadi ini adalah gambaran book model jadi saat kita membuat konten elemen apapun contohnya paragraf kah atau misalnya heading atau form dan lain-lain kontennya ada di bagian tengah ini nah di luar konten itu ada yang namanya padding ya Jadi ini adalah bagian padding nah bagian padding itu sebenarnya masuk ke dalam SI kontennya Sebenarnya ya jadi ketika teman-teman nanti ubah warna warna background maka padding pun akan ber ubah warnanya mengikuti background-nya Nah setelah itu di atasnya padding ada yang namanya border jadi yang hitam ini ini adalah border nah ini adalah batas ya ketika teman-teman E mau menambahkan background gitu ya maka batasnya Itu cuma sampai border ini aja jadi dia tidak akan melebihi bordernya nah lalu paling luar ada yang namanya margin nah margin biasanya digunakan untuk menambahkan jarak antar elemen Nah jadi ini adalah bagian marginnya jadi teman-teman perlu perhatikan di dalamnya adalah konten lalu di dalam konten sebenarnya E ada bagian yang terluarnya namanya padding ya Lalu setelah padding ada border ya dan yang paling luar itu ada margin nah margin ini biasanya akan transparan ya Jadi kalau teman-teman tambahkan background color margin itu tidak akan terisi oleh si background colornya Nah jadi seperti ini Oke saat kita membuat elemen html kita tahu bahwa Beberapa elemen ditampilkan secara blok ya blok itu berarti dia akan mengambil dari kiri sampai ke kanan ya habis Contohnya seperti paragraf seperti itu gitu ya Div dan lain-lain nah tapi ada juga beberapa elemen yang ditampilkan secara Inline Contohnya seperti eh eh link gitu ya atau span dan lain-lain kita pernah bahas di materi html dasar Nah dengan menggunakan CSS kita bisa mengubah ukuran dari tiap elemennya Sebenarnya ya menggunakan properti ha dan juga properti Wid jadi Ha ini digunakan untuk mengubah si tingginya contohnya di sini 150 piksel jadi tingginya otomatis 150 piksel ini 6 75% dari total ukuran auto kalau auto berarti mengikuti isi kontennya nah ada juga misalnya wid-nya nah kalau wid-nya itu lebarnya contohnya di 150 pikel 20 75% dan ini auto nah kita bisa lakukan seperti ini Oke kita akan coba dulu ya Sebelum kita belajar tentang padding dan juga margin dan juga border Oke saya akan buat di sini eh box. html Nah kita akan coba Bikin eh html di sini Oke saya akan bikin Div ya lalu di sini Div lagi nah ini saya akan isi paragraf misalnya nah lalu di sini kita isi eh lorem yang tadi ya lalu di sini kita isi P lagi lorom Lagi Nah seperti ini Oke kita akan coba tampilkan dulu nah hasilnya kurang lebih seperti ini Nah kita akan tambahkan background color di div-nya ya jadi Div Sorry style background colornya adalah pink misalnya nah ini adalah di ya Jadi ini bukan di paragraf nih ini di Div seperti ini Nah kalau teman-teman perhatikan lihat ada jarak ya jarak ini ini adalah margin sebenarnya jadi margin jarak antara dari satu Div ke Div yang lain kalau Coba kita reset dulu misalnya ya jadi di atas ini saya bikin dulu untuk meriset semuanya misalnya ya jadi di sini kita bikin ee yang body juga saya akan ubah body misalnya ya jadi eh paddingnya saya jadikan 0 piksel ya lalu marginnya saya jadikan 0 pikel Nah lihat teman-teman ya jadi dia akan nempel ke paling kiri ya Kenapa kok nempel ya tadi kan enggak karena tadi itu ada margin dari bawaan si bodinya seperti itu ya mungkin itu sekitar 10 mungkin ya Nah 10 piksel nah saya hapus jadi artinya tidak ada margin sekarang ya di eh dalam tapi kenapa di atas masih ada ini berarti ini masih ada margin bawaan dari div-nya Coba kita ubah eh padingnya 0 pikel ya Nah seperti ini lalu marginnya 0 pikel seperti ini nah lok ini masih ada nah ini kemungkinan bawaan dari paragraf Nah kita sekarang Coba resiset ya paragraf paddingnya 0 pikel lalu marginnya 0 pikel Nah lihat sekarang hilang semuanya tuh ya seperti ini jadi semuanya nempel karena ternyata defaultnya memang selalu ada marginnya ya tiap elemen karena kalau tidak ada margin maka dia akan pasti nempel dengan elemen yang lain Oke kita akan Coba ubah dulu ukurannya jadi di sini misalnya E saya kasih class artikel 1 ini saya kasih kass artikel 2 Oke kita akan coba ya untuk artikel 1 kita akan coba eh ha-nya saya ubah menjadi 200 pikel Nah lihat dia menjadi panjang ya Nah lalu background colornya saya ganti menjadi Aqua deh biar kelihatan bedanya ya Nah ini 200 piksel ya lalu misalnya wid-nya saya akan Ubah menjadi eh 500 piksel nah ini Kayaknya masih kepanjangan 200 deh nah jadi kotak seperti ini Jadi ini adalah ukuran ya jadi panjang dan eh tinggi dan lebarnya oke yang artikel du misalnya artikel 2 saya akan ubah juga ini saya [Musik] tambahkan ha-nya misalnya eh 150 dan ini 300 nah kurang lebih seperti ini Jadi ini kalau teman-teman mau mengatur ee tinggi dan juga lebarnya Nah kenapa ini tidak ke kanan gitu ya karena default-nya eh Div itu blok ya jadi dia mengambil langsung dari kiri ke kanan makanya dari kiri ke kanan akan diambil Total jadi kalau ada elemen lain maka dia akan di bawahnya Nah jadi ini adalah default-nya ya jadi ditampilkan dalam bentuk blok Nah untuk detailnya gimana caranya biar ini enggak ngeblok seperti ini misalnya Nah nanti kita bahas di materi CSS layout kalau soal itu oke selanjutnya adalah padding Nah untuk mengatur area padding kita bisa menggunakan properti yang namanya padding ya dengan CSS di sini J jadi padding itu ingat ya padding itu dari konten menuju e setelah kontennya ya Jadi yang tadi Jangan sampai salah ya jadi padding itu jadi isinya adalah konten dulu baru padding baru border seperti itu Nah bagian luarnya yang tidak terkena background Baru adalah margin nah contohnya di sini kalau teman-teman gunakan padding 1 em berarti teman-teman menambahkan padding 1 em ya atau tambahkan 10% nah ini atau kiri kanan ee atas bawah kalau mau ditentukan masing-masing bisa juga atau kalau manual satu-satu gunakan padding top padding right padding bottom atau padding left nah atau seperti ini ya kalau teman-teman mau jadi padding topnya dulu ya habis itu right habis itu bottom habis itu left Nah jadi atas kanan bawah kiri seperti itu Jadi teman-teman bisa gunakan padding seperti ini Oke kita akan coba kalau teman-teman cuma satu aja nilainya berarti dia dipply ke semuanya kiri kanan gitu ya kiri kanan atas bawah Oke kita coba Oke contohnya Ini kan nempel yaah kita mau yang misalnya yang artikel 1 kita tambahkan padding padding Oke kalau kita tambahkan padding 10 pikel nah lihat jadi dia atas kanan ya E kiri eh sori Bawah e kiri dia 10 pikel biar lebih jelas mungkin yang p-nya Tex align-nya kitaj y Nah biar jelas ya Nah lihat semuanya 10 piksel ya Nah termasuk nanti di bawah sini harusnya ada 10 piksel juga nah coba kita misalnya ee ubah gitu ya saya mau yang atasnya 10 piksel tapi yang kanannya 20 piksel dan yang bawahnya 10 piksel dan yang kirinya 20 piksel Nah kita bisa lakukan seperti ini jadi satu-satu ya yang atas dulu yang kanan yang bawah yang kiri seperti ini nah contohnya yang artikel 2 Saya mau tambahkan padding Juga misalnya 20 pikel nah hasilnya ada jarak ya dari konten menuju border di sini nah jadi padding itu pasti dia akan diisi dengan background Jadi kalau teman-teman isi background maka padding itu akan terisi oleh si background-nya oke next-nya Ada margin ya untuk mengatur area margin kita bisa menggunakan properti yang namanya margin Nah kita bisa lihat di sini nah caranya sebenarnya sama tapi ingat ya margin itu berarti area yang paling luar setelah border ya Nah artinya dia tidak akan terisi oleh background nah caranya sama sebenarnya teman-teman bisa satu-satu menggunakan margin top right bottom left atau teman-teman langsung aja margin kalau ini berarti semuanya atau gunakan seperti ini eh margin top right bottom left Oke kita akan coba tambahkan ya kita lihat bedanya Oke saya akan tambahkan sekarang margin contohnya 10 piksel sor ini kurang titik koma Nah lihat jadi dia ada jarak 10 piksel berarti jadi ke atas dari ini bordernya ya ke atas 10 piksel ke kiri 10 piksel ke kanan 10 piksel dan ke bawah 10 piksel nah seperti ini Jadi ini adalah margin nah kalau teman-teman mau ubah Oke marginnya yang atas 10 yang kiri 20 piksel yang bawah 10 pikel yang EE Sori yang kanan tadi 20 yang kiri 20 piksel kita bisa lakukan seperti ini nah ini bedanya ya yang atas 10 piksel yang kiri dan kanan 20 piksel nah hati-hati kalau teman-teman mau menambahkan margin Kenapa karena kalau teman-teman di bawah sini nambahkan margin nanti jaraknya akan jadi dobel kita bisa lihat contohnya Ini marginnya Saya mau 10 semua ini sudah jaraknya kan sudah benar ya 10 ya teman-teman di bawah tambahkan margin Juga misalnya ya 10 piksel 10 piksel 10 piksel 10 piksel ya Nah teman-teman lakukan seperti ini Nah Lihat Kalau teman Perhatikan ya Loh kok ini tetap 10 piksel gitu ya kenapa jadi tidak 20 piksel karena kan ditambah nah ketika margin itu saling bertemu maka dia akan ee menggunakan margin yang paling tinggi ya contohnya kalau teman-teman topnya tambahkan 20 nah ini akan menggunakan margin yang paling tinggi yaitu 20 seperti itu Nah kenapa gitu ya kenapa seperti itu cara kerjanya karena memang margin itu kan area yang terluar dan memang transparan jadi tidak terisi oleh background Jadi nanti dia ketika bertemu seperti ini ya diambilnya yang paling tingginya jadi ini harusnya kalau teman-teman berpikir kan Oke ini 10 ini 20 jadi harusnya 30 di sini nih gitu ya tapi ternyata enggak enggak seperti itu ya jadi dia ambil yang paling tinggi yaitu 20 piksel pertemuannya jadi ini kalau teman-teman 10 Nah masih tetap proporsional hasilnya Nah jadi ini adalah margin nah gimana dengan border kalau teman-teman mau nambahkan border Nah kita bahas border di materi sendiri ya karena border itu lumayan Kompleks nah tapi intinya sekarang teman-teman tahu ya Jadi ada eh di dalam saat kita membuat elemen di html itu ada konentnya yang di tengahnya Lalu ada padding-nya ya lalu juga ada bordernya ya yang paling ee ujungnya lalu di luar border itu ada margin nah seperti itu sekarang kita bahas tentang debug dengan browser Salah satu cara Saat kita ingin melihat book model pada halaman html yaitu dengan menggunakan web browser nah biasanya tiap web browser biasanya ada fitur untuk melihat Detail informasi halaman html yang sedang dibukanya nah contohnya di Google Chrome misalnya kita bisa Klik Kanan elemen yang ingin kita lihat lalu kita bisa bisa pilih menu inspect elemennya nah lalu di sana kita bisa lihat detail dari properti apa aja di css-nya bahkan box modelnya Seperti apa Nah kita akan coba ya Jadi kita sudah punya ini website contohnya Nah kita bisa buka ini di browser ini saya akan copy Oke saya akan buka di website hasilnya seperti ini ya nah saya bisa Klik Kanan ya lalu saya pilih inspect ya Nah di sini nah ini di kanan sini nah ini ada bagian yang namanya elemen teman-teman bisa diklik elemennya Oke saya mau pilih yang Div class artikel 12 ketika saya pilih Nah di sini ada informasinya jadi di sini artikel 12 ha-nya 150 pikel wid-nya 300 pikel padding-nya 20 pikel kita bisa lihat ya detail paddingnya top right bottom lab-nya Lalu ada marginnya contohnya 10 pikel ya Nah ini detail dari dari marginnya lalu di sini ada juga bok modelnya Nah jadi di sini ada bok modelnya jadi isi kontennya kurang lebih 300* 150 Lalu ada paddingnya ini 20 20 20 semua ukurannya Lalu ada bordernya ini Kebetulan tidak ada nilainya sama sekali Lalu ada marginnya ya yaitu adalah 10 10 10 10 nanti kelihatan juga ya di sini ke highlight Nah Lihat ini ada bagian-bagiannya Jadi teman-teman kalau mau melakukan e debug ya informasi dari css-nya teman-teman tinggal lakukan seperti ini jadi contohnya saya pilih yang EE P misalnya ya ini paragraf saya pilih Nah Lihat kebetulan paragraf tidak ada margin tidak ada border tidak ada padding ya Nah atau misalnya saya pilih yang eh class artikel 1 nah ini kelihatan juga ya padding-nya bisa kelihatan 10 20 10 20 seperti ini nah ini juga nilai dari css-nya jadi kalau teman-teman mau ya melakukan debugging gitu ya ya hasilnya di website-nya teman-teman bisa gunakan seperti ini Jadi tinggal gunakan web browser Klik Kanan inspect nanti teman-teman bisa debug di bagian sini sekarang kita bahas Min dan juga Max size saat kita menambah size pada elemen kadang kita ingin menentukan minimal atau juga maksimalnya dari size elemen nah hal ini untuk menjaga elemen tidak terlalu kecil atau juga tidak terlalu besar nah Kita juga bisa mengaturnya menggunakan properti di CSS oke yang pertama mean size-nya untuk mengatur minimal ya kita bisa menggunakan properti yang namanya Min hag ya untuk minimal tingginya atau juga Min Wid ya untuk minimal lebarnya Nah jadi kita bisa gunakan seperti ini kalau untuk max-nya kita bisa gunakan Max hag untuk minimal e sor untuk maksimal Maksudnya ya maksimal tinggi dan juga Max Wid untuk maksimal lebarnya jadi kita bisa gunakan seperti itu juga jadi ini kasusnya biasanya contohnya ketika teman-teman e menggunakan he atau wid-nya itu menggunakan persen misalnya ya jadi contohnya kita Set 100% tapi saya pengin ada minimalnya atau ada maksimalnya jadi walaupun 100% kalau misalnya ternyata layar ee penggunanya terlalu lebar itu kan nanti terlalu lebar Juga misalnya saya mau set maksimalnya cuma boleh 500 pikel gitu nah kita bisa lakukan seperti itu Oke kita akan coba ya Oke saya akan buat di sini eh max.html Oke ini malah ke sini kita buka yang Max ya kita buat html-nya di sini oke misalnya kita bikin Div di sini ya Nah lalu di sini kita bikin P lorem lalu kita bikin style untuk Div misalnya E saya tambahkan background colornya adalah pink lalu kita buka lihat nah hasnya seperti ini nah saya e Pengen ya wid-nya itu adalah 100% jadi dia akan selalu mengikuti ee ukuran ininya ya Ukuran dari si ee browsernya atau paling enak misalnya 75%. nah seperti ini ya jadi dia selalu 75% nah tapi saya pengen eh ada min-nya juga Min wid-nya jadi dia tidak boleh eh 500 pikel Oh ini kayaknya udah ngelebihi ya contohnya 200 pikel deh nah seperti ini atau enggak Boleh juga maxwid-nya itu tidak boleh lebih dari 1000 piksel nah seperti ini Nah mungkin ini enggak kelihatan ya nanti kita coba perbesar dan perkecil Oke saya akan coba perkecil nah lihat dia sepertinya masih di atas 200 piksel Ketika nanti dia 200 piksel Nah lihat dia tidak mau mengecil lagi ya Kenapa tidak mau mengecil lagi karena dia sudah 200 piksel jadi minimalnya itu 200 piksel jadi dia boleh mengecil terus ya 75% tapi dia tidak boleh lebih dari eh melebihi kecilnya 200 piksel Nah lihat ya atau misalnya besarnya tidak boleh lebih dari 1000 piksel jadi kalau kita perbesar terus dia membesar ya tapi setelah nanti mentok di 1000 piksel dia akan berhenti nah ini sepertinya kurang ya Coba kita ee jadikan ini 750 Nah ya kita coba perbesar lagi Nah sepertinya masih kurang juga ya Nah coba deh 500 piksel Oke kita coba perbesar lagi Nah lihat dia tidak mau ya jadi dia masih tetap bisa ya 75% tapi setelah menyentuh 500 piksel dia tidak boleh membesar lagi Jadi max-nya dia cuma boleh 500 pikel nah seperti ini Jadi ini teman-teman kalau mau atur maksimal dan juga minimalnya ini maksimal lebarnya kalau teman-teman mau atur maksimal tingginya tinggal gunakan Max hag ya dan Min hag jadi teman-teman Tinggal atur seperti itu aja Jadi kalau memang ada yang bisa fleksibel tapi teman-teman pengin Tentukan minimal dan maksimalnya teman-teman bisa gunakan Min dan juga Max Oke sekarang kita bahas tentang border di dalam box model terdapat bagian border ya jadi bagian yang paling luar ya dari si eh booknya ya sebelum margin Nah untuk mengubah border kita bisa menggunakan properti yang namanya border Nah kita bisa lihat di sini nah border itu sebenarnya dia dia adalah shortcut ya Nah dari banyak Data jadi dari atribut border color border style dan juga border Wid jadi teman-teman bisa gunakan seperti ini Nah kita bisa gunakan satu-satu Kalau teman-teman mau ya Atau bisa langsung aja border kalau satu berarti ini adalah style-nya kalau dua seperti ini berarti wid-nya lalu style-nya kalau atau bisa juga style-nya dan juga colornya atau kalau tiga bisa ya wid-nya style-nya lalu colornya atau kalau mau satu-satu teman-teman bisa gunakan se seperti ini colornya itu untuk warnanya teman-teman mau warna si bordernya apa Lalu ada style-nya kita bisa lihat style-nya di sini jadi style-nya di sini contohnya ada banyak ya Ada non default-nya tidak ada Lalu ada dot Ya titik-titik seperti ini Lalu ada inset ya Nah seperti ini Lalu ada solid ya E Dash Solid misalnya ada Dash double non ya lalu Dash Grove non dan lain-lain ya nah ini kalau misalnya lebih dari satu ya nanti kita bahas Nah ada juga border wid-nya ya Nah ini lebarnya ketebalannya contohnya di sini Tik ya Nah ada 1 em 4 pikel dan lain-lain ini kalau teman-teman mau atur beda-beda juga bisa ya sama seperti biasa Jadi kalau mau atur beda-beda teman-teman gunakan top left and right oh sorryi ini ya top right bottom left jadi sama kayak yang e pengaturan biasanya Oke kita akan coba sekarang jadi saya akan coba tambahkan border misalnya ya Nah kita akan tambahkan border yang di sebelumnya ya yang box kita buka yang box nah ini kita coba lihat hasilnya seperti ini yang artikel 1 saya akan tambahkan border border misalnya eh style-nya border style-nya misalnya saya mau yang eh ini ya Eh misalnya Dash Ya seperti ini jadi agak dash-d seperti ini ya atau masih ada yang lain Sebenarnya ya Coba saya pakai yang ee dotted ya titik-titik atau yang tadi Solid itu yang ini ya Oh yang Solid benar yang Solid nah yang solid ya hitam Oke saya tambahkan border eh Wid misalnya 2 pikel ketebalannya oke kurang misalnya 5 piksel nah seperti ini ya jadi tebal banget tapi kalau teman-teman mau Oke saya mau beda-beda yang atas 5 piksel yang kanan misalnya 10 piksel Terus yang bawah 5 piksel lagi lalu yang kiri 10 piksel Nah kita bisa lakukan seperti ini atau teman-teman mau ganti yang atasnya Solid misalnya ya Terus yang EE dotted misalnya habis itu ya habis itu solid lagi habis itu itu ee dotd lagi nah jadi seperti ini ya yang atasnya Solid dot Solid dan juga Dot seperti ini jadi kita bisa tambahkan border seperti ini nah atau Saya mau ubah jadi Solid aja dan Kayaknya lebih cocok kalau ukurannya sama misalnya kalau sama ya 2 pikel seperti ini nah jadi kita bisa lakukan seperti ini Oke kadang-kadang kita ingin mengubah border tiap sisi berbeda Nah untuk itu kita bisa menggunakan properti border right border left border top dan juga border button jadi teman-teman bisa Tentukan ya seperti itu jadi contohnya di sini ada border lab cara penggunaannya Harusnya sama ya jadi border l border laab misalnya ya jadi penggunaannya sama atau kalau mau satu-satu bisa border laab color border laab style border laab Wid ya seperti itu jadi cara penggunaannya seperti border tadi Kalau border tadi kan langsung ke semuanya kalau ini teman-teman bisa bisa langsung ee Sebutkan satu-satu jadi misalnya kita coba gitu ya di sini yang e artikel 2 misalnya di sini misalnya border left eh style Misalnya ini adalah Solid Nah lihat yang kirinya ada ya lalu border left eh Wid misalnya 2 pikel Nah Lihat seperti ini nah atau border R misalnya style-nya Solid lagi nah lalu sama du piksel lagi nah kita bisa lakukan seperti ini jadi kalau teman-teman mau satu-satu silakan atau mau langsung sekaligus gitu ya kita bisa gunakan seperti ini Oke yang terakhir adalah border radius border radius adalah untuk mengubah putaran dari ujung bordernya defaultnya kan Lancip ya kalau teman-teman mau tambah putaran teman-teman bisa tambahkan border radius jadi secara otomatis nanti isi paddingnya pun akan mengikuti putaran dari si bordernya jadi dia tidak akan pernah melebihi dari si bordernya Nah kita bisa menggunakan border eh sori border radius ini menggunakan properti yang namanya border radius Nah kita bisa gunakan border radius ya contohnya di sini kalau border radiusnya 30 piksel maka dia akan melangkung di sini 30 piksel 30 piksel 30 piksel dan seterusnya atau kalau teman-teman mau pakai persentase misalnya ya ini persentasenya berapa gitu ya lalu di sini berapa berapa berapa gitu ya Nah kita bisa l gunakan persentase juga Nah di sini kalau teman-teman mau satu-satu teman-teman bisa gunakan seperti ini border top left ya jadi atas kiri radiusnya berapa lalu top right ya atas kanan lalu bottom right ya E bawah kanan lalu bottom left bawah kiri nah atau kalau langsung sekaligus bisa gunakan seperti ini ya jadi eh border radius ya Jadi yang pertama top lab dulu habis itu top right habis itu bottom right dan juga bottom lab jadi atas kiri atas kanan bawah kanan bawah kiri seperti itu Oke kita akan coba Oke misalnya yang e artikel 1 saya akan tambahkan border radius ya nah misalnya yang kiri e atas ya atas kiri saya mau tambahkan 20 piksel seperti ini ya Nah hasilnya nya kalau satu aja sih langsung semuanya Oke tapi yang EE atas kanannya Saya mau misalnya 0 piksel jadi dia akan Lancip nah lalu ya saya mau nah yang bawahnya itu tetap sama misalnya ya ini default-nya bakal sama 20 pikel dan 0 pikel seperti ini Nah lihat hasilnya ini ada bordernya radiusnya ini tidak ada ya karena ini 0 pikel nah ini juga ada nah jadi lumayan ee bagus ya hasilnya ya Nah ini juga sama misalnya saya mau tambahkan nah hasilnya kurang lebih seperti ini Nah ya nah jadi ini adalah border jadi border itu berarti setelah padding lalu dia ada border setelah border baru di luarnya ada margin sekarang kita bahas tentang outline outline itu sebenarnya mirip dengan border lokasinya berada setelah border nah yang membedakan dengan border ya outline itu tidak mengambil area dari boksnya jadi dia tidak mengambil area sama sekali di dalam boksnya sehingga dia tidak mengganggu ukuran layout-nya atau tata letaknya Nah jadi beda dengan border border itu akan mengganggu Tata letaknya jadi ketika bordernya tebal maka dia akan mengambil Space ya istilahnya itu dari si e boxnya nah beda dengan outline outline itu tidak mengambil area sama sekali Nah kita akan lihat ya contohnya misalnya yang yang sebelumnya ini kan sebelumnya kita bordernya 2 piksel ya Nah mungkin tidak terlihat ada pergerakan layout ketika teman-teman Ubah bordernya menjadi 10 piksel misalnya nah lihat dia bergeser ya karena dia beneran mengambil space 10 piksel jadi di sini ada eh 20 pikel ya di sini paddingnya lalu di sini 10 dan di sini 10 lagi Jadi dia mengganggu layout-nya jadi dia menggeser sebenarnya kalau border Nah jadi kalau kita kecilkan dia geser lagi kalau misalnya dibesarkan dia akan menggeser lagi Jadi dia terus menggeser jadi memang dia mengambil ruang ya Ee di dalam SI boxnya jadi ini adalah border ya Nah berbeda dengan outline kalau outline itu berada setelah border tapi dia tidak akan mengambil Space apapun nah Biar lebih enak kita akan buat di sini file baru namanya outline.html Oke saya akan isi ya ee eh semuanya dari box saya akan copy saya akan paste di outline kita akan preview nah ini yang outline-nya nah cara penggunaan outline kita bisa lihat di sini jadi caranya sama Sebenarnya ya dengan menggunakan border jadi caranya sama di sini outline ya di sini eh ada color ada offset ada style ada Wid dan lain-lain Nah jadi di sini ada color style dan juga Wid ya nah jadi cara penggunaannya sama J teman-teman Sebutkan nanti colornya apa style-nya apa gitu ya wid-nya apa seperti itu jadi tebalnya berapa Nah kita akan coba ya Misalnya kalau misalnya kita coba tambahkan Oke kita akan tambahkan di sini saya akan hapus misalnya ya Ee bordernya yang bagian sini seperti ini jadi kalau kita tambahkan border eh style-nya adalah Solid lalu border wid-nya adalah 10 pikel nah dia akan menggeser si layout-nya nah tapi kalau misalnya saya e ganti menjadi margin sor outline ya Nah ini saya ganti saya ganti jadi outline style solid ya seperti ini lalu outline e wid-nya 10 pikel lihat dia mengambil area yang ada di dalam SI margin ya jadi marginnya itu diambil sama dia Jadi dia tidak geser lay out sama sekali Jadi kalau saya tambahkan misalnya 5 piksel gitu ya atau 10 piksel lihat dia tidak menggeser karena dia tidak mengambil area apapun jadi di sini contohnya 5 gitu ya 10 bahkan kalau melebihi misalnya 20 gitu ya Nah dia tidak akan mengambil area Space sama sekali jadi ini e outline ya Nah kita bisa tambahkan contohnya 5 PX seperti ini nah cuma memang outline itu agak terbatas contohnya tidak ada radius seperti itu ya Nah jadi outline Ya seperti ini kalau teman-teman mau tambahkan radius ya pakainya border radius misalnya E 25 pikel seperti ini nanti outline-nya dia akan mengikuti si bordernya jadi border itu sorryi outline itu benar-benar dia akan berada di e setelah border ya outline itu jadi dia akan mengikuti Eh gimana sih border itu bentuknya Kalau bordernya itu ada radiusnya maka outline pun akan mengikut si bentuknya nah tapi ingat bedanya dengan border dia tidak mengambil Space sama sekali Jadi kalau teman-teman mau ganti outline colornya menjadi Red nah ini juga bisa nah jadi kelihatannya kayak border tapi sebenarnya dia bukan border dia adalah outline Oke sekarang kita bahas tentang background image Jadi selain menggunakan color Kita juga bisa menggunakan image sebagai background Nah untuk menggunakan image sebagai background kita bisa menggunakan properti yang namanya background image Nah kita bisa lihat di sini ya detailnya jadi background image kita bisa gunakan ya menggunakan e propertinya adalah background image lalu di sini Sebutkan image-nya yang mana Nah biasanya kan image-nya dari URL ya kita bisa gunakan url kurung buka kurung tutup isi url-nya apa Nah jadi simpel sekali Nah sebenarnya selain itu juga teman-teman bisa atur yang lainnya contohnya ada eh background misalnya repeat ya Jadi mau diseperti apakan Jadi kalau background-nya misalnya kecil ukurannya nah tapi areanya banyak teman-teman mau gunakan Seperti apa contohnya repeat X berarti ke X ya X itu berarti horizontal atau repeat berarti dia horizontal dan vertikal atau space gitu ya maka dia akan ada di ujung-ujungnya round gitu ya Nah seperti ini Lalu ada no repeat Berarti cuma satu aja gitu ya Nah atau teman-teman bisa gabungkan Space dan juga repeat seperti ini Nah jadi ada banyak ya caranya atau teman-teman mau ubah ya background size-nya misalnya ukuran Gambarnya terlalu besar gitu ya Nah kita bisa e Contohnya seperti ini ya contohnya 30% dikecilin dan lain-lain nah atau ada juga background position x-nya teman-teman misalnya mau di e mana gitu ya di kiri kah atau di kanan kah atau agak Tengah dan lain-lain Nah itu bisa gunakan background posisi X ya X itu adalah horizontal ada background posisi position y ini adalah vertikalnya contohnya di tengah gitu ya 25% dan lain-lain Nah kita akan coba ya Jadi kita akan coba yang background image oke di sini saya sudah memiliki image di sini contohnya image-nya di sini sederhana cuma tampilan seperti ini aja Nah kita akan coba buat ini sebagai backgroundnya Oke kita akan coba buat file di sini background image.html Oke kita buat di sini misalnya Div ya Nah ini saya tambahkan P beberapa data Oke ini ee saya tambahkan kelas konten misalnya seperti ini Oke kita akan buat di sini style kelasnya adalah content ya Nah di sini biasanya kan kita gunakan background color misalnya pink ya seperti ini kita coba buka hasilnya seperti ini nah saya akan tambahkan Eh misalnya padding-nya E 25 pikel ya Nah seperti ini Nah kita akan coba misalnya ganti dari background eh color jadi background misalnya di sini background image nah background image-nya Saya akan ambil dari URL ya dari dari images foldernya lalu pattern tik PNG nah hasilnya seperti ini nah kebetulan memang seperti ini ya Nah ini coba saya ubah ukuran Eh wid-nya 100%. tapi hag-nya saya coba perbesar 500 pikel Nah lihat dia itu di-epeat ya default-nya di-epeat antara kiri dan kanannya Sori bukan kiri kanan e horizontal vertikalnya di- repeat ya nah misalnya Saya tidak mau nih nah saya tidak mau ee ke bawah juga saya penginnya ke kanan aja gitu ya Nah kita bisa di sini background repeat misalnya ya nah saya mau repeat-nya nah seperti ini jadi ke kanan saja background-nya seperti ini Jadi intinya horizontal aja ini kayaknya kurang bawah ya saya coba tambahkan Pading topnya adalah 50 pikel lalu kiri kanannya itu adalah 10 piksel nah tapi masih kurang juga kayaknya 60 nah atau 70 deh ya Nah seperti ini jadi dia background-nya ada ya seperti ini ya Nah ini dia cuma ke horizontal karena di sini kita repeat X kalau saya ganti oke repeat y gitu ya maka dia ke bawah vertikal kalau repeat X berarti ya ke sana Ini kalau kalau gambarnya ee terlalu ee ini ya terlalu banyak Sori terlalu kecil ee akhirnya kurang menutupi si background ini nah atau misalnya kalau gambarnya kita mau ubah kita bisa gunakan background size gitu ya Nah teman-teman bisa ganti contohnya eh mau diganti misalnya 100 PX gitu ya k 100 PX Nah jadi dia makin kecil ya nanti dia di repeatnya seperti ini nah ini kalau mau diubah ya saya akan kom nah hasilnya seperti ini ini saya coba tambahkan H1 ee Ini judul Nah coba judulnya saya naikkan berarti ini paddingnya saya ganti menjadi 20 piksel nah kurang lebih seperti ini nah jadi ini kalau teman-teman mau menambahkan background-nya berupa gambar jadi teman-teman tinggal pilih gambarnya gitu ya simpan Nah teman-teman tinggal tambahkan background image kalau ukurannya kekecilan teman-teman mau repeat X kah horizontal atau repeat y kah vertikal atau repeat dua-duanya vertikal dan juga horizontal Oke saat menggunakan background image selain menggunakan gambar Kita juga bisa menggunakan warna gradien Sebenarnya ya Nah terdapat banyak sekali jenis warna Gradien yang didukung oleh CSS kita bisa lihat di sini jadi saat teman-teman menggunakan background image teman-teman bisa ganti yang tadinya url ke image teman-teman bisa ganti menjadi datanya adalah gradien nah gradien itu adalah tipe data atau data di dalam SI CSS nah di mana saat kita menggunakan gradien itu banyak pilihannya contohnya ada linear gradien ada Radial gradien ya yang melingkar ada ini gitu ya Ada banyak dan ada banyak sebenarnya jadi jenis-jenis ee gradiennya gradien itu gambar beberapa warna ya Nah seperti ini Nah kita bisa lihat sintaknya ada di sini nah ya Jadi ada banyak Nah Cuma mungkin agak membingungkan ya kalau teman-teman mau bikin gradien secara manual nah saya sarankan teman-teman bisa menggunakan salah satu layanan e website namanya cssgradien.io untuk membuat atau mencoba membuat warna-warna gradien Nah kita akan coba lihat di sini ya CSS gradien Oke ini adalah CSS gradien ya Nah teman-teman bisa pilih mau linear atau mau Radial misalnya ya kalau Radial itu bulat ya ada bulatnya nah ini warna-warnanya contohnya Ini kalau mau e hapus kita keluarkan contohnya Saya mau tambah di sini ini warnanya mau yang ini ya agak sedikit merah ini saya maunya yang linear aja misalnya lalu saya mau pilih yang ini Ini mau saya ganti menjadi ya Ungu saya pilih di sini ini saya mau ganti jadi yang kuning Nah jadi ini kurang lebih warna gradiennya akan seper seperti ini nah hasilnya ada di sini ini adalah linear gradiennya ya Jadi ini adalah linear gradien nah saya akan coba copy nah kalau teman-teman mau Oke saya mau ke bawah sih kayaknya gitu ya ini kan ke samping gitu ya Saya maunya ke bawah teman-teman tinggal geser ini ke bawah nah ini 180 derajat Nah jadi ini posisinya ke bawah seperti ini ya Nah atau kalau enggak mau deh E saya mau tetap yang tadi ini misalnya 90 gitu ya nah hasilnya bakal ke samping seperti ini kita akan copy ini misalnya kita akan coba gantikan di yang tadi ini background image Ya saya akan comen saya ganti menjadi background image tapi isinya adalah gradien ini nah hasilnya seperti ini Nah Lihat menarik ya Jadi ini bisa gradien seperti ini nah contohnya derajatnya saya ganti dari yang 90 deg ya jadi 180 nah dia ke bawah ya Atau mau ke atas ya berarti berapa ya 200 270 ya Oh kalau ini kebalik ya 45 Nah jadi ke pinggir seperti itu atau 0 nah seperti ini jadi teman-teman bisa juga ya menggunakan gradien jadi ada yang linear ada juga Radial ya teman-teman bisa lihat di website-nya contohnya mau pilih yang Radial atau linear seperti itu Nah nanti simulasinya tampilannya kurang lebih seperti ini Jadi ini juga bisa teman-teman gunakan ya untuk mengubah ya menggunakan si background image jadi background image itu tidak hanya untuk image tapi teman-teman juga bisa untuk menggunakan gradien sekarang kita bahas tentang opacity elemen di html itu bisa diatur transparansinya menggunakan properti yang namanya opas Nah kita bisa lihat di sini nah jadi teman-teman bisa menggunakan yang namanya opacity untuk mengatur transparansinya kalau kita gunakan opacity-nya 0 artinya benar-benar transparan paling tinggi adalah sat ya berarti dia tidak transparan jadi teman-teman bisa pilih dari 1 sampai 0 ya Nah kita bisa ubah transparansinya nah tapi perlu diperhatikan saat teman-teman menggunakan opacity semua elemen baik itu background atau juga contentnya atau juga bordernya itu akan berubah menjadi transparan jadi hati-hati ya ketika teman-teman gunakan opacity jadi bukan cuma membuat transparan background-nya saja Misalnya tapi total semua elemennya Oke kita akan coba Oke contohnya yang book sebelumnya gitu ya kita akan coba lihat lagi ini kan hasilnya seperti ini kalau teman-teman tambahkan contohnya di artikel 1 di sini opacity contohnya satu nah ini default-nya memang satu ya kita Ubah menjadi nol lihat dia total hilang karena dia transparan kalau kita coba 0.5 Nah maka dia akan setengah transparan seperti ini nah jadi teman-teman bisa tambahkan opacity untuk merubah transparensi dari sebuah elemen Nah kalau teman-teman perhatikan tidak hanya contonentnya background-nya bordernya itu semuanya ikut menjadi transparan Nah jadi teman-teman bisa ubah menggunakan si opacity ini Oke sekarang kita bahas tentang value dan juga unit saat kita menggunakan CSS kita sering sekali menggunakan berbagai jenis value dari mulai number text color name RGB image dan lain-lain nah semua standarisasi dari CSS value dan juga unit sudah ditetapkan ya di spesifikasi berikut jadi Sudah standar di semua web browser atau di semua sistem operasi Nah teman-teman bisa lihat di sini jadi adalah CSS value ya jadi value apa saja yang bisa digunakan di CSS nah saat saya buat videonya ini gitu ya ini yang terbaru versinya yaitu 6 November 2023 Nah jadi di sini adalah value-value-nya temanan bisa baca di sini Sebenarnya sih ketika tadi kita ee sudah bahas itu semuanya sudah representasi dari value-value di sini nah yang paling penting sebenarnya value-nya itu adalah unitnya ya nah Nah jadi di sini Kalau teman perhatikan ada yang namanya unit ya unit itu adalah ya unit yang contohnya piksel gitu ya Ada juga em dan lain-lain Nah semuanya ada di sini nah contohnya di sini ada relative length contohnya ada em em itu adalah untuk font size of the Element jadi satuan untuk font size ya Ada ex ya dan masih banyak yang lainnya Nah ada juga misalnya VH ya Ee untuk vforord dan yang lain-lain ini sebenarnya sudah pernah kita bahas juga ya untuk pivord di materi html dasar Nah ada juga Absolute leng contohnya di sini ya Ada Absolute length contohnya ada centm gitu ya kalau teman-teman Tentukan 1 cm itu sama dengan 96 pikel kurang lebih ya ada mimer gitu ya Ada juga Q quarter mm ada in atau inch ya Nah itu sama dengan 1 inch itu 2,54 cm gitu ya 1 cm-nya kan sama dengan 96 piksel ada PC ya atau pikas ya Nah seperti ini ada PT Pos ya Nah ada juga PX atau pixel nah seperti ini jadi teman-teman bisa e gunakan satuannya banyak juga Kalau teman bingung ya berarti satuannya bisa gunakan yang paling gampang adalah pxel gitu ya Oke jadi salah satu value yang penting ya yang perlu kita mengerti itu adalah value length ya panjangnya atau ya angka nah sebelumnya kita sering menggunakan PX atau itu adalah pikel nah selain PX Sebenarnya masih banyak tipe yang bisa kita gunakan Nah kita bisa lihat di sini ya untuk satuan leng ya Jadi selain pxel ada yang lain masih banyak sebenarnya ya jadi saat kita menentukan eh Wid ya atau lebar tinggi margin padding gitu ya eh ukuran border ya font size itu kita bisa menggunakan leng Nah apa saja ya leng itu nah kita bisa lihat di sini Jadi yang pertama ada relatif relatif itu berarti menyesuaikan dengan eh elemen yang lain contohnya teman-teman bisa menggunakan cap gitu ya ini berarti eh cap hag ya tinggi ya mengikuti elemen dari font ada CH ada Em gitu ya Ada ex teman-teman bisa baca detailnya di sini kalau relatif artinya dia mengikuti elemen yang lainnya ya contohnya kalau teman-teman menggunakan persen itu juga relatif contohnya kalau persen ya dia relatif ke parent-nya seperti itu Nah ada juga misalnya di sini ada relatif ke pfort-nya ya port itu berarti area dari si browsernya ya Nah di sini contohnya kita bisa gunakan SV gitu ya Dan lain-lain ini pernah kita bahas di materi html dasar ya ketika teman-teman bikin E responsive web Nah kita bisa biasanya menggunakan si relative lank karena dia harus mengikuti dari ukuran si ee ininya browsernya Nah ada juga ya Nah lalu contohnya di sini ada eh PH PW vmax dan lain-lain Nah ada juga ya ini yang sering kita gunakan adalah nah ini Absolute length Absolute itu berarti sudah fix sudah pasti gitu ya Nah contohnya di sini Nah di sini kita bisa menggunakan yang paling simpel adalah PX PX itu adalah pikel ya simpel ya satu pikel berarti ya 1 PX seperti itu Jadi kita bisa gunakan piksel jadi pikel itu biasanya ukuran layar ya nah jadi ukuran layarnya semakin ee biasanya semakin ee tinggi ya Ukuran layarnya maka mungkin pikselnya akan semakin padat semakin kecil ukurannya Nah ada juga cm ya centm itu kalau teman-teman bingung 1 cm itu berapa ya 1 cm itu sama dengan 96 pikel ya Lalu ada mm mim ya Nah ada Q ada in ada PC dan ada PT atau poin kebanyakan Biasanya kalau angka eh sori ee font gitu ya banyak menggunakan PT ya Poin nah ini biasanya kalau teman-teman mungkin sudah biasa menggunakan misalnya aplikasi Microsoft Word saat kita bikin ee huruf biasanya kan kita menggunakan poin ya Ukuran hurufnya Nah kita juga bisa menggunakan PT kalau misalnya untuk ukuran huruf Nah jadi ini adalah ukuran-ukuran unit yang ada di ee html dan juga CSS jadi teman-teman bisa baca di sini ya apa saja yang didukung Tapi sebenarnya sih baik lagi ya memang Kebanyakan orang ya menggunakan yang contohnya yang tadi yang pikel atau poin atau yang relatif gitu ya Kenapa relatif karena kan e sekarang itu ada yang namanya responsive web buat teman-teman yang tidak tahu responsive web itu apa responsive web itu adalah eh bikin website yang ukurannya bisa dinamis mengikuti ukuran layarnya jadi ketika dibuka menggunakan e handphone ukuran layarnya mengikuti gitu ya ketika ketika dibuka menggunakan komputer ukuran eh layout-nya website-nya juga mengikuti Nah itu adalah responsif makanya ee dia banyak menggunakan yang ini ya relative lank Nah nanti mungkin kita akan bahas yang lebih detail untuk relative lank itu ketika teman-teman belajar CSS layout nah Jadi intinya ini adalah E value-value dan juga unit yang didukung oleh CSS dan html sekarang kita bahas tentang writing mode writing mode itu digunakan untuk menentukan cara membaringkan teks Apakah ingin horizontal atau juga vertikal Nah default-nya itu pasti horizontal ya jadi tulisannya pasti horizontal Nah kita bisa mengubahnya ya menggunakan properti yang namanya writing mode Nah kita bisa lihat di sini contohnya jadi kalau teman-teman mau mengganti yang tadinya e horizontal misalnya seperti ini teman-teman mau jadikan vertikal Nah otomatis dia menjadi vertikal 1 2 3 4 ke bawah ya atau vertikal seperti ini ya Nah kita bisa lakukan vertikalnya di kanan misalnya nah atau vertikalnya di kiri seperti ini Nah kita bisa lakukan seperti ini Oke kita akan coba misalnya ya saya akan buat di sini satu file baru ya kita akan buat file baru di sini writing mode titik html Eh ini sor saya rename dulu harusnya writing mode ya bukan model Oke saya akan copy yang box saya akan copy semuanya saya paste di sini nah saya akan coba Hapus yang opacity-nya kita coba preview nah hasilnya seperti ini nah saya mau ubah contohnya yang artikel 1 writing mode-nya ya menjadi vertikal jadi di sini writing mode-nya default-nya kan horizontal seperti ini ya horizontal e top button ya jadi dari atas ke bawah nah kita akan ganti menjadi vertikal misalnya di sini vertial left right ya jadi dari kiri ke kanan nah hasilnya seperti ini dari kiri ke kanan seperti ini ya Memang agak aneh ya biasanya mungkin R laab ya Nah seperti ini jadi kalau teman-teman mau mengubah gitu ya E writing mode-nya dari yang tadinya misalnya horizontal menjadi vertikal ya kita bisa gunakan si writing mode seperti ini sekarang kita bahas tentang overflow overflow adalah kejadian di mana content teks melebihi ukuran dari box elemennya Nah kita bisa menentukan Bagaimana cara nanti menampilkan ketika terjadi overflow ya menggunakan propertinya namanya overflow Nah kita bisa gunakan contohnya overflow-nya visible default-nya adalah visible Jadi kalau misalnya ini adalah ukuran eh dari elemennya ternyata isi teksnya melebihi dari ukuran elemennya maka dia akan keluar seperti ini atau hidden berarti dia akan dihilangkan ya tidak muncul Nah atau ada clip gitu ya Nah ini sebenarnya mirip seperti hidden gitu ya Ada Scroll dia otomatis ada scrollnya nah lihat ya Ada scroll-nya ya atau ada auto kalau auto default-nya tidak ada Scroll kalau kelebihan dia akan ada scroll-nya seperti itu ya Nah kita bisa lihat kita coba contohnya misalnya ya Jadi yang sebelumnya saya akan copy di sini ee isi dari writing mode saya akan buat baru di sini namanya adalah overflow. html kita paste di sini ini misalnya saya akan ubah lagi writing mode-nya kita tampilkan hasilnya seperti ini ini saya akan tambahkan misalnya ya Yang ini saya tambahkan lagi lorem Nah akhirnya kan dia kelebihan ya Nah seperti ini ini kelebihan ya ke bawah karena melebihi dari si boknya Nah kita coba tambahin di sini overflow nah saya mau hidden Nah lihat dia hilang beneran hilang kalau kelebihan dia akan hilang nah atau Saya mau ganti menjadi auto Nah kalau auto ketika kelebihan dia otomatis akan ada scroll-nya ya jadi dia bisa di-croll di sini ada scroll-nya nih jadi dia bisa diroll tapi kalau tidak lebih dia tidak ada scroll-nya atau teman-teman kalau pengin ya bisa tambahkan Scroll jadi Scroll itu pasti selalu ada scrollnya seperti itu Nah Enaknya sih pakai auto ya auto itu berarti kalau kelebihan tidak kelebihan tidak ada scroll-nya kalau kelebihan dia baru ada scrollnya nah jadi kita bisa tambahkan menggunakan overflow jadi tidak akan mengganggu layout-nya jadi otomatis kalau ini terlalu banyak ya ya dia tidak akan keluar si tulisannya Jadi kita bisa menggunakan overflow sekarang kita bahas t tentang psudo elemen selecttor Oke jadi selain selecttor yang tadi sudah kita bahas Sebenarnya masih ada dua selektor lagi ya nah sekarang selektor yang eh pertama kita bahas adalah sudo elementen selector jadi sudo elemen selector Ini adalah kata kunci untuk menambah selektor ke bagian tertentu dari elemen yang terseleksinya nah saat memilih sudo elem Ya kita harus gunakan pemisahnya tanda titik 2.2 sebanyak dua kali seperti ini Nah ada banyak sudo elem ya kita bisa lihat detailnya di halaman dokumentasinya Nah kita nanti akan bahas sambil berjalan Nah kita bisa lihat di sini ada sudo Elements ya nah jadi ini adalah sudo elemen jadi caranya sintaksnya itu menggunakan titik 2.k2 Ya jadi dua kali lalu di sini nama sudo elemennya ada apa aja sudo elemen ya Nah kita bisa lihat di sini list of pudo Element Nah kita bisa lihat di sini ya Jadi ada banyak sebenarnya nya contohnya after after itu berarti adalah elemen yang EE setelahnya ada before adalah elemen sebelumnya seperti itu dan masih banyak yang lainnya nah teman-teman saya sarankan ee bisa dibaca satu persatu contohnya contohnya yang after gitu ya Nah after itu berarti create sudah elemen yang last child-nya selected Element ya jadi eh diambil satu elemen ya setelahnya jadi after-nya seperti itu nanti kita akan ee coba praktik kan ya Misalnya Ya nah tapi ee sebelum dipraktikkan enaknya nanti kita akan coba ini dulu ya Eh praktikannya nanti ketika kita bahas beberapa eh tag yang berhubungan langsung dengan si sududo elemen ini Nah ada juga misalnya yang before ya kalau before ini eh first SH ya strctur elementen jadi dia e bikin yang di sebelumnya ya atau di depannya untuk selected elemennya dan masih banyak yang lainnya nah semua ini kita akan bahas nanti ya Eh ketika memang butuh menggunakan si sudo elemen ini Nah di sini kita cuma bahas kalau ternyata ada selecttor yang lain yang namanya adalah sudo elem nah tapi ini bukan yang terakhir masih ada satu lagi ya namanya adalah eh sudo classes Nah kita bahas di materi selanjutnya oke selector yang terakhir adalah sudo classes nah ini AD Ad selecttor yang terakhir ya yang didukung oleh si CSS nah sudoklase selector adalah kata kunci yang ditambahkan ke selecttor yang merepresentasikan state atau keadaan tertentu dari elemen yang sedang diseleksinya nah untuk menambahkan sudo classes kita bisa gunakan titik duanya Satu Kali Saja Nah kalau misalnya sudo elemen kan titik duanya dua kali kalau ini satu kali aja Nah kita bisa lihat daftar dari sudo classes yang tersedia di halaman dokumentasinya kita ba bisa lihat di sini nah kita tidak akan praktiikkkan sekarang ya kita akan praktiikkkannya nanti ketika ee bersinggungan dengan elemen-elemennya Nah kita bisa lihat di sini ada sudo classes jadi caranya kita bisa gunakan titik dua lalu di sini nama sudo classes-nya apa Nah ada banyak sekali sudo classes contohnya Ini untuk eh input ya sorryi Ada elemen display nah contohnya di sini ketika full screen contohnya ketika modal eh ketika picture in picture atau ada input nah contohnya ketika ada enableed si inputnya ada disaed ya ada read only WR only dan lain-lain ya ini berhubungan sama input nanti kita bahas ketika bahas form Lalu ada juga linguistic ya Nah ada juga eh location ya Jadi ini untuk e link contohnya gitu ya Jadi kalau misalnya link e dia sudah dikunjungi gitu ya kalau belum dikunjungi kalau ada targetnya dan lain-lain ada resource ada time gitu ya Ada tre structure ada user action Eh ada misalnya functional pudo class dan masih banyak yang lainnya Nah kalau kita lihat secara alfabetick itu banyak banget ya untuk pudo classes Nah kita akan e bahasnya sambil ketika eh kita bahas CSS di elemen-elemennya karena ini sangat berhubungan dengan elemen-elemennya Nah jadi ini adalah eh selector yang terakhir ya yaitu adalah sudo classes Oke kita sekarang akan coba bahas tentang link ya Jadi kita biasa menggunakan E atau membuat link menggunakan tag a ya Nah saat kita membuat web kita kan sering sekali akan menggunakan link ya menggunakan tag a ini nah link sebenarnya memiliki banyak sekali sudo classes yang bisa kita gunakan untuk mengubah tampilan link ya Nah pada state tertentu misalnya ketika linknya eh mouse-nya ke atas atau misalnya linknya sudah dikunjungi dan lain-lain Nah kita bisa lihat sudo classnya ada di di sini contohnya di sini user action sududo classes nah ini contohnya ada hover kalau misalnya eh kursor kita ke linknya seperti ini Nah kita mau ngelakuin apa nih misalnya mengubah tampilannya gitu ya atau ini ketika aktif gitu ya ketika fokus dan lain-lain atau ada juga yang ini ya yang location sudo classes nah ini location kita lihat nah location sudo classes nah ini kalau link ya Nah di sini match link that have not yet been visited Jadi kalau belum dikunjungi gitu ya mau seperti apa tampilannya gitu ya kalau sudah dikunjungi mau seperti apa tampilannya misalnya nah kita bisa tambahkan seperti ini Oke kita akan coba praktiikkkan langsung ya Oke kita akan buat di sini saya akan tutup dulu ee ini tutup ya kita akan buat di sini nama file-nya adalah link.html Oke kita akan buat html Oke kita akan buat beberapa link ya Ee misalnya yang ini misalnya ke https misalnya wwwprogrammerzamannau.com misalnya ya kita buat lagi ini misalnya ke Facebook ini misalnya Instagram oke kalau kita lihat ini warnanya biru semua ya Kalau saya coba klik misalnya Instagram nah dia akan pindah ke Instagram nah tapi ee Ini Sepertinya kalau di sini enggak enggak kelihatan ya Yang yang sudah dikunjungi atau belumnya tapi kalau di sini misalnya saya refresh yang sudah dikunjungi lihat ya berubah warnanya ya warnanya agak sedikit ee Ungu ya kalau kita perhatikan Nah lihat yang sudah pernah dikunjungi itu Ungu yang belum dikunjungi itu biru Nah kita bisa ubah nih contohnya ya kita akan coba tambahkan style jadi saya akan tambahkan a misalnya ee Saya mau tambahkan Kalau A itu misalnya ee background color-nya white Ya nah tapi saya mau tambahkan border style-nya Solid misalnya border Eh radiusnya misalnya 10 piksel lalu saya tambahkan padding-nya misalnya 20 pikel oke sepertinya terlalu besar ya padding-nya Misalnya 10 pikel Ya nah tapi ini kayaknya ee kita ngambil banyak di bodinya ya nah saya coba tambahkan ini kita tambahkan Div deh saya akan coba tambahkan Div nah lalu di div-nya saya coba tambahkan margin topnya e 50 pikel nah seperti ini tampilannya kurang lebih seperti ini ya Nah kalau kita lihat nah ini tampilannya akan seperti ini nah misal saja saya mau text decoration nya hilang nih jadi kita bisa ee text decoration-nya misalnya non ya Nah Lihat hilang ya semuanya ya Nah lalu misalnya font family-nya sunerif Nah sekarang tampilannya kurang lebih seperti ini Oke saya sekarang mau untuk yang sudah dikunjungi Saya mau tampilannya menjadi misalnya eh abu-abu ya jadi kita bisa gunakan a.k2 pited contohnya ya nah saya mau misalnya font eh sori colornya itu misalnya menjadi kita bisa aja menjadi Black Ya seperti ini nah ini kalau di sini sih kelihatannya belum dikunjungi tapi kalau kita lihat di sini nah ini sudah dikunjungi ini menjadi Black nah kecuali yang ini Ini belum dikunjungi warnanya menjadi biru seperti itu Nah jadi di sini kita bisa lakukan seperti itu Oke ini bordernya harusnya eh border colornya itu eh Blue ya ini berarti colornya eh Blue juga biar bagus sama ini misalnya border color-nya saya samakan e Black nah seperti ini hasilnya nah sama ya Nah kita mau misalnya ketika ee Mouse kita ke sini nah kita kita bisa menggunakan sudo yang ini ya yang eh user action itu namanya hover hover itu ketika Mouse kita ke linknya Nah kita mau ubah jadi misalnya kita bisa tambahkan a ti2 hover ya lalu misalnya color-nya itu saya mau jadikan white lalu misalnya ee background color-nya Saya mau jadikan misal saja ee ini ya Brown seperti ini nah yang terjadi apa yang terjadi Nah lihat ya berubah ya nah jadi kalau ini kita buka lagi kita cek nah nah jadi banyak banget yang bisa kita explore ya menggunakan ee ini ya Ee sudo classes ini jadi teman-teman bisa gunakan Contohnya seperti ini yang ini yang sudah dikunjungi ya jadi sudah pited ini yang belum dikunjungi warnanya biru tapi kalau hover misalnya nah ini berubah contohnya nah jadi kita bisa membuat menu seperti ini ya menggunakan link ya Jadi teman-teman tinggal explore ya menggunakan si css-nya jadi ini yang bisa kita gunakan di link sekarang kita bahas tentang list saat kita membuat daftar kita sering menggunakan elemen list nah CSS itu memiliki beberapa properti yang bisa digunakan untuk mengubah list ini Oke yang pertama ada yang namanya properti list style type ini bisa digunakan untuk mengubah jenis list yang ditampilkan dari tiap itemnya Nah kita bisa lihat di sini ya nah jadi contohnya kita bisa gunakan list style typ-nya misalnya Space counter ya Nah ini keluarnya seperti ini nah atau disk misalnya seperti ini atau ccel misalnya seperti ini atau kalau teman-teman mau tambahkan karakter gitu ya Ee emoji nah teman-teman juga bisa gunakan seperti ini jadi teman-teman kalau mau ya tinggal ee silakan gunakan list style-nya ya tinggal diubah aja Nah kita akan coba Oke kita buat list html di sini ya Nah kita akan buat html eh Ul misalnya lalu di sini li eh sat Oke kita akan lihat nah default-nya kan ini menggunakan ccle ya Nah kita bisa ubah contohnya Oke ini saya ubah misalnya ee ini saya tambahkan kassas daftar ya Style eh sorry kok style sih style maksudnya nah ini ini daftar misalnya nah kita bisa gunakan list style type ya contohnya Saya mau pakai yang eh Square ya Nah lihat dia jadinya kotak seperti ini nah atau kalau ini sih yang Space counter dia ada di ini ya di counter Style ya Jadi ada e ini ya Eh kalau teman-teman mau dia itu ada CSS ya namanya counter style Nah kita mau juga pakai yang ini contohnya karakter ini emoji Nah kita bisa ganti nah hasilnya seperti ini jadi kalau teman-teman mau ubah ya Tinggal teman-teman ubah seperti ini aja Nah kita pernah bahas ya soal emoji di materi html jadi kalau teman-teman mau gunakan emoji silakan eh gunakan eh kode untuk emojinnya Oke lanjutnya misalnya kalau teman-teman mau eh style-nya itu adalah image ya kita bisa kita juga bisa menggunakan list style image jadi nanti teman-teman perlu eh buat dulu ya atau ambil dulu image ya teman-teman bisa gunakan list style image lalu url ke image-nya jadi teman-teman pastikan harus ada image-nya dulu Contohnya image-nya seperti ini ya ini rcket seperti ini nah teman-teman silakan praktikkan untuk yang image Ya karena teman-teman harus punya image-nya terlebih dahulu ada juga style position ini bisa digunakan untuk mengubah posisi item di dalam listnya Nah kita bisa lihat Oh ini sepertinya linknya salah ya Eh list style position nah yang ini list style position nah contohnya di sini eh kita bisa eh gunakan Inside ini harus eh panjang ya kita coba praktikkan dulu ini misalnya E saya tambahkan lorem ya Nah biar kelihatan lorem ya Nah defaultnya lihat jadi J di sini ya E daftar itu dia teksnya akan selalu sejajar seperti ini nah jadi defaultnya itu dia menggunakan outside seperti ini kalau teman-teman pengin ganti menjadi Inside jadinya seperti ini ya Jadi tidak sejajar ya jadi dia akan sejajanya dengan e ininya ya poin-poinnya Nah kita bisa gunakan Inside jadi kita bisa ganti Misalnya di sini list style position ya Nah tadinya misalnya outside kita bisa nanti menjadi Inside nah jadinya akan seperti ini jadi teman-teman bisa ubah juga untuk list style position-nya oke yang terakhir misalnya kalau teman-teman pengin eh sekali aja ubahnya kita bisa menggunakan shortcut yang namanya list style jadi ini gabungan untuk semuanya jadi teman-teman bisa gunakan eh format list style-nya seperti ini kalau mau ee tipenya diganti teman-teman gunakan list style Tipenya apa atau kalau mau ganti jadi gambar list style di sini gambarnya apa kalau teman-teman mau ubah posisinya list style posisinya atau kalau gabungan e dua value contohnya list style-nya apa lalu Eh ini Eh sorryi list style untuk e type-nya dan di sini adalah si position-nya ya Nah seperti ini jadi kita bisa bikin menggunakan shortcut list style juga nah atau kalau satu-satu ya gunakan list style image list style position atau list style type Nah jadi ini untuk list ya jadi teman-teman juga bisa ubah ya Atau eh ubah properti atau tampilan dari list menggunakan CSS sekarang kita bahas tentang tabel ya atau table saat kita membuat elemen table di html kita akan banyak menggunakan box model Sebenarnya ya Nah pertama kita bahas tentang bordernya terlebih dahulu jikalau kita ingin mengatur border pada tabel kita bisa menggunakan border pada tabel TR th dan juga TD ya Nah kalau teman-teman cuma di tabelnya saja maka bordernya ada yang paling luarnya saja kalau teman-teman misalnya di tr-nya saja Berarti cuma di barisnya saja kalau teman-teman di th-nya saja Berarti cuma di kolom head-nya saja atau kalau TD berarti di kolom binnya saja kalau teman-teman pengin ditambahkan border di semuanya ya teman-teman harus tambahkan di semua bagiannya Nah jadi kita gunakan border seperti biasanya Nah kita akan coba Oke saya akan buat di sini tabel ya titik html kita buat html dulu lalu kita buat di sini table misalnya lalu di sini th headad TR th misalnya di sini nama th di sini misalnya nilai lalu t body kita bikin di sini TR misalnya TD ek TD di sini misalnya 100 ya kita akan copy saja Oke selesai Nah kita akan lihat hasilnya nah kurang lebih seperti ini Oke saya akan coba tambahkan kita tambahkan style nah saya akan tambahkan border di tabel ya Nah ini bordernya misalnya border style-nya adalah solid ya Nah lalu border eh wid-nya adalah dua PX nah hasilnya lihat cuma ada di tabelnya sedangkan di tengah-tengah ini enggak ada kenapa karena tengah-tengah ini bukan elemen tabelnya tapi melainkan baris atau juga ee ini ya kolom contohnya kalau saya mau tambahkan Oke selain tabel TR Nah Lihat tidak ada juga ya karena yang dalam ini ini sebenarnya bukan TR melainkan si th atau juga TD jadi kita perlu tambahkannya selain eh tabel TR itu th ya th itu berarti kolom atasnya aja dan juga TD ya Nah seperti ini nah tapi pertanyaannya loh kok jadinya seperti ini gitu ya ada gap seperti ini gitu ya bordernya Nah padahal mungkin teman-teman udah tambahkan misalnya eh marginnya 0px gitu ya lalu padingnya sor 0px loh kok ini masih tetap ada gitu ya Nah pertanyaannya kenapa nih Kok tidak nyatu gitu ya Antar bordernya Oke Sebenarnya ada lagi ya Ee jadi saat menggunakan border Kadang tiap kolom itu akan ada jarak jadi kalau kita ingin menghilangkan jarak antar border kalau lagi tergabung seperti itu maka kita perlu menggunakan yang namanya property border collapse ya nah jadi ini bisa teman-teman tambahkan otomatis dia akan e menyatu ketika ada border yang lain yang bertemu jadi kita bisa gunakan border colaps ini nah jadi nanti kalau di default-nya adalah separated jadi seperti terpisa seperti ini kalau teman-teman collapse maka dia akan bergabung seperti ini Oke kita akan coba tambahkan border collaps-nya jadi yang ini kita tambahkan border collaps-nya adalah collapse Nah Lihat maka otomatis dia akan menyatu seperti itu Jadi tidak terpisah ya nah jadi ee Ini adalah tabel border Oke selanjutnya kita bahas tentang table size-nya Nah untuk mengukur eh sorryi mengatur ukuran dari table itu sama aja kita bisa menggunakan Wid dan juga ha jadi sama seperti e box elemen yang lainnya ya Nah jadi di sini contohnya Oke kita mau yang tabelnya misalnya E wid-nya misalnya 200 pikel ya Nah seperti ini Nah kita bisa ha-nya misalnya 200 pikel juga Nah nanti dia akan kan ee proporsional seperti ini ya nah jadi kita bisa lakukan seperti ini Oke selanjutnya misalnya kita mau ubah eh table alignment-nya Nah untuk mengatur posisi teks pada table kita bisa menggunakan properti seperti biasa ya text align atau juga writing mode Nah jadi ini sama seperti teks biasa aja teman-teman Tinggal atur ya text align-nya mau seperti apa Nah default-nya kalau teman-teman perhatikan untuk yang EE eh th ya dia di tengah Tex line-nya center kalau untuk ini dia default-nya adalah left ya di kiri teman-teman bisa atur contohnya misalnya kalau TH eh text line-nya Saya mau lab Nah maka dia ke kiri ya Nah untuk misalnya TD Tex line-nya Saya mau ke center nah dia ke tengah jadi teman-teman Tinggal atur aja gitu ya jadi itu juga bisa diatur nah Selain itu sama ya ee teman-teman juga bisa menggunakan sudo classes ya kalau teman-teman mau contohnya biar sedikit interaktif misalnya teman-teman bisa tambahkan TR misalnya seperti ini e tr-nya kalau di hover misalnya nah kita mau e background colornya misal menjadi pink nah seperti ini nah hasilnya Nah lihat kalau kursornya di atas dia otomatis menjadi pink seperti ini nah jadi teman-teman bisa bikin interaktif atau teman-teman bisa bikin contohnya ee titik misalnya ganjil gitu ya lalu background color-nya adalah pink lalu titik genap eh background color-nya misalnya eh Grey seperti ini ya Nah lalu misalnya di eh TR yang ganjil misalnya ya kita tambahkan kelas ganjil ya lalu ini kelas genap Nah jadi lebih berwarna ya Nah seperti ini nah hasilnya dia akan seperti ini tapi kalau kursornya ke sini ya dia terseleksi seperti ini nah jadi teman-teman bisa eksplorasi ya menggunakan CSS ketika bikin tabel misalnya gitu ya teman-teman mau gayanya Seperti apa tinggal di e buat saja Jadi materi-materi sebelumnya sebenarnya teman-teman bisa eksplorasi di semua elem yang ada di dalam html termasuk yang tabel ini sekarang kita bahas tentang form saat kita membuat form ya elemen input yang kita buat itu Semuanya bisa diatur ya menggunakan box model Sebenarnya ya jadi contohnya teman-teman mau mengubah ukuran menambahkan border background dan lain-lain nah selain itu khusus untuk form atau inputnya itu terdapat banyak sududo classes yang bisa kita gunakan Nah kita bisa lihat di sini nah ini contohnya Ini ada eh input untuk pudo classes contohnya ada autofill ada enabled gitu ya Jadi kalau dia lagi enabled mau warnanya Apakah misalnya background-nya dan lain-lain atau kalau disabled mau seperti apakah misalnya gitu ya kalau read only mau seperti apa ya kalau misalnya checkbox gitu ya kalau dicek mau seperti apa bentuknya Nah kita bisa lakukan seperti ini ya Nah di sini contohnya k kalau dia valid ya datanya mau seperti apa kalau dia tidak valid mau seperti apa jadi banyak banget ya ini required misalnya ya mau seperti apa gitu ya Nah kita bisa tambahkan Oke kita akan coba ya nah jadi ini lebih ke eksplorasi Sebenarnya ya jadi teman-teman bisa langsung praktiikkkan secara mandiri Oke kita akan coba Oke saya akan buat sebuah file baru ya di sini namanya adalah form Oke kita akan e buat html-nya Oke saya pindahkan dulu ke sini Nah di sini kita lihat masih kosong Oke kita akan buat form misalnya ya Nah di sini misal saja kita buat label untuk misalnya E username gitu ya lalu di sini adalah username l di sini saya mau tambahkan input ya input typ-nya adalah T lalu ini saya akan tambah akan break nah seperti ini ya ini required misalnya ya lalu di sini eh kita tambahkan label password misalnya password eh break input password Dan ini required juga misalnya seperti ini Lalu di sini kita tambahkan button eh sorryi input button sorryi input type Bukan button ya submit nah seperti ini oh ya ini kurang break Oh ini juga kurang break ya oke misalnya seperti ini Nah kalau kita lihat ya Nah di sini ini kalau teman-teman mau ubah ya style-nya kita bisa ubah contohnya di sini untuk input ini saya mau mau tambahkan kelasnya username misalnya ya oke atau Sor di sini kita tambahkan ID username ini ada ID password misalnya seperti ini J di sini kita bisa tambahkan style nah ini untuk username mau apa ini untuk password mau apa seperti ini contohnya di sini kita akan coba tambahkan id-nya itu adalah eh ininya ya Eh bordernya border style-nya adalah Solid border color-nya adalah black Eh border radius ya Misalnya 10 pikel nah lihat ya jadi lumayan menarik nih tampilannya lalu saya akan tambahkan padding 10 piksel nah seperti ini ya Oke kita coba tambahkan juga yang password-nya nah seperti ini oke nah hasilnya seperti ini nah button juga sama misalnya di sini eh saya tambahkan ID misalnya login ya Nah kita akan copy yang ini paste ini adalah login nah hasilnya seperti ini nah ini sepertinya terlalu menempel ya Nah mungkin kita perlu tambahkan margin ya di input jadi kita tambahkan input margin 10 pikel nah jadi dia ada ini sepertinya eh enggak Cocok nih kalau kita tambahkan briak kita hapus Nah seperti ini kita hapus Nah hasilnya seperti ini misalnya ya Oke jadi teman-teman tinggal eksplorasi aja ya nanti bentuknya Mau diubah dan sebagainya Oke untuk login misalnya saya mau ganti background color-nya adalah eh white ya Nah seperti ini nah tapi untuk yang login misalnya saya tambahkan kalau hover dia itu background colornya saya ubah menjadi misal saja eh Grey atau Black deh ya Black tapi untuk color untuk si fonnya saya ganti menjadi white Nah kita lihat nah lihat ya sudah BR berubah hasilnya sekarang seperti ini nah termasuk yang ini misalnya kalau teman-teman mau Oke saya mau ketika fokus warnanya jadi apa gitu ya Nah di sini misalnya ee ini sebenarnya sama ya Jadi untuk input Mungkin kita bisa pindahkan aja ke sini nih Nah seperti ini Nah ya Nah jadi di sini Oh Jangan deng kenapa Karena di sini di bawahnya juga button input ya nah jadi kita bisa ee seperti ini aja enggak apa-apa untuk username misalnya jadi kalau sama dengan password jadi kita di sini tambahkan password Nah ya Jadi ini dihapus nah seperti ini Oke selanjutnya misalnya kalau eh username-nya dia eh fokus ya dan juga password-nya fokus ya ya komponennya sedang difokuskan nah saya mau ganti Misalnya colornya menjadi white ya kalau ini berarti colornya harus eh Black Ya ini background colornya adalah white Nah kalau ini kebalikannya background color-nya misalnya Black seperti ini kita coba klik Nah lihat dia berubah ya seperti ini Oke ini saya coba refes t dulu Nah lihat ya berubah ya Nah termasuk ini juga berubah nah jadi kita bisa Banyak eksplorasi Sebenarnya ya untuk elemen ini nah termasuk kalau misalnya saya bikin satu elemen baru lalu dia di disisableed misalnya atau enabled gitu ya Nah ini kan required Ya nah contohnya kalau elemennya itu required misalnya kalau ee inputnya dia required ya ya saya mau misalnya colornya itu red seperti ini Nah kita bisa juga seperti itu ya Jadi ini saya hapus Misalnya colornya ini juga saya hapus colornya Kalau saya klik nah ini red ya merah Kenapa karena dia required tapi kalau salah satu aja tidak required contohnya eh username tidak required seperti itu nah dia hitam ya Nah ini merah nah ini hitam nih seperti itu nah ini saya balikkan lagi karena dia required nah jadi teman-teman bisa banyak eksplorasi untuk bikin form juga jadi banyak sekali ya yang bisa kita eksplor menggunakan CSS jadi tampilannya yang tadinya form itu biasa aja ya kalau tanpa CSS kita lihat ya perbedaannya jauh sekali kalau saya komen Nah Lihat tampilannya seperti ini kurang menarik Ketika saya tambahkan CSS nah hasilnya jadi lebih menarik Nah jadi oh ini juga salah ya harusnya ketika di ke sini kan ee warnanya harusnya ee oh ya salah ini white ya harusnya nah seperti ini nah jadi ini adalah form jadi teman-teman bisa eksplorasi sebanyak-banyaknya menggunakan CSS diubah bentuk si form-nya ya bahkan kalau teman-teman mau menambahkan interaksi kayak fokus gitu ya atau tadi requir gitu ya teman-teman tinggal tambahkan banyak sekali ya untuk eh po classes ya untuk input jadi contohnya kalau nilainya valid misalnya gitu ya teman-teman Misalnya pengin input type-nya email tapi ternyata tidak valid Nah teman-teman bisa gunakan invalid contohnya dijadikan warna merah seperti itu jadi banyak banget yang bisa teman-teman gunakan ya menggunakan si sududo classes ini sekarang kita bahas tentang konten konten itu adalah properti yang bisa digunakan untuk mengubah isi dari elemen jadi kita bisa gunakan konten seperti ini ya Jadi kita gunakan konten untuk meng mengubah isi dari elemennya Jadi kalau teman-teman isi dari elemen itu pengin diubah ya menggunakan CSS kita bisa gunakan kontennya nah tapi tidak semuanya itu bisa diubah nah Biasanya sih untuk mengubah konten kita biasanya menggunakan image ya kalau misalnya kontennya sudah ada isinya jadi teman-teman ganti menjadi image Nah teman-teman bisa lakukan seperti itu Nah biasanya untuk konten itu biasanya ditambahkan dengan eh sudo elemen ya Nah nanti kita akan coba jadi untuk mengganti isi elemen ya menggunakan properti content kita hanya bisa menggunakan content image sebenarnya Nah jadi teman-teman tidak bisa ganti menggunakan teks Jadi kalau kontennya diganti menjadi image itu bisa nah tapi kalau teman-teman pengen eh ganti kontennya menggunakan teks kita bisa lakukan ya menggunakan sudo elemen contohnya sudo elemennya itu adalah eh before dan juga after contohnya jadi ada after dan before jadi contohnya teman-teman punya elemen lalu after nya pengin diganti menjadi teks before-nya diganti menjadi teks itu bisa ya jadi kita bisa menggunakan si ini ya Ee sududo elemen kita akan coba lihat eh contohnya misalnya ya Jadi kita akan coba misalnya saya akan buat di sini file baru nama file-nya adalah Eh content.html ya kita akan coba di sini buat html oke di sini saya akan bikin P misalnya ya ini konten misalnya ya kita akan lihat hasilnya nah ini konten lalu saya akan tambahkan style lalu saya mau yang ini kita tambahkan kelas konten misalnya nah lalu yang kelas konten itu saya mau ganti kontennya menjadi contoh misalnya seperti ini Nah Lihat ini tidak berubah sama sekali Kenapa karena Memang e bukan seperti itu ya E peruntukan untuk konten tapi kalau teman-teman coba Oke saya ganti jadi image url misalnya eh images contohnya di sini ee ada pattern PNG Nah lihat dia berubah jadi untuk mengganti isi dari konten yang ini gitu ya jadi gambar Contohnya seperti ini kita bisa gunakan konten jadi ini menimpa semuanya jadi kalau ini pakai teks itu tidak jalan gitu ya Tes Nah itu tidak jalan nah gimana kalau kita pengin menggunakan ee teks seperti ini contoh ya Nah kita bisa gunakan sudo elemen contohnya sudo elemen tu ada yang contohnya yang after atau before jadi contohnya Ini kan tidak bisa Ya nah tapi saya mau misalnya konten yang afternya nah saya mau eh ganti menjadi Eh misalnya Echo Nah after-nya berarti di sini akan tambahin chcho seperti ini Jadi ini konten di belakangnya ada chcho seperti ini ini after ya Atau saya mau yang before-nya seperti ini Jadi ini before nah ini Echo contohnya jadi ini before-nya ada Echo lalu di sini ada Eh kontennya jadi ini before after-nya nah baru kalau ini bisa nah jadi kalau teman-teman mau menambahkan ya Eh mengisi konten ya Nah kita bisa menggunakan si konten ini tapi kalau ini sudah ada datanya teman-teman tidak bisa ganti menggunakan teks teman-teman cuma bisa ganti menggunakan image seperti yang tadi sudah kita demokan nah pertanyaannya untuk apa sih ya Nah ini kegunaannya adalah contohnya teman-teman Misnya nanti bikin beberapa heading teman-teman pengin di depannya itu ada nomor heading-nya Nah itu kita bisa gunakan konten plus kombinasi dengan materi selanjutnya yaitu adalah counter Oke sekarang kita bahas tentang counter CSS itu memiliki kemampuan untuk membuat counter ya ini sangat cocok untuk membuat penomoran tanpa kita harus harus lakukan secara manual Nah kita bisa menggunakan properti yang namanya counter set untuk membuat counternya biasanya ini dilakukan di awal contohnya mungkin di body dan lain-lain Nah kita bisa gunakan counter increment untuk menaikkan counternya ini biasanya di elemen-elemen yang membutuhkan data counternya dia kita menaikkan data si counternya nah kalau teman-teman mau reset lagi ya menjadi nilai awal lagi kita bisa menggunakan counter reset Nah jadi ini tiga eh properti ini biasanya dilakukan secara gabungan ya jadi kombinasi pertama counter set setiap mau naikkan kita gunakan counter incrementen kalau mau reset kita gunakan counter reset nah gimana kalau kita mau mendapatkan isi dari si counternya sekarang counter Ke berapa Nah kita bisa menggunakan function yang namanya counter Oke kita akan langsung praktiikkkan saja Oke saya akan buat di sini sebuah file namanya adalah counter Oke kita bikin counter HTML l saya pindahkan dulu kita buat html di sini oke di sini misalnya kan kita biasanya bikin H1 misalnya ya Ini judul lalu H1 misalnya ada ee beberapa lalu H2 misalnya ya ini ee sub judul misalnya ini ada beberapa nah misal seperti ini lihat hasilnya kurang lebih seperti ini ya judul subjudul dan seterusnya nah misal kita mau tambahkan di depannya itu misalnya satu gitu ya nanti ini satu-satu ini 1 2 ini 13 Nah ini kan 2 ini 21 22 dan seterusnya jadi ada counternya seperti itu Nah kita bisa ya menggunakan si fitur counter ini jadi kita akan tambahkan misalnya eh Style ya lalu di sini pertama Biasanya kita akan e definisikan counternya dulu menggunakan counter set nah Biasanya sih kita akan definisikan misalnya di elemen paling awal misalnya contohnya yang pertama kali kelihatan kan adalah binya jadi di body kita akan e gunakan counter set misalnya ya Nah yang pertama misalnya saya akan bikin counter untuk judul seperti ini ya Nah lalu eh nilainya misalnya 0 ya lalu di sini counterset lagi Nah untuk sub judul ya nilainya itu nol juga nah seperti itu oke Nah selanjutnya sekarang Eh kapan gitu ya counter ini tampil nah counter ini tampil di judul ya di H1 dan H2 jadi kita bisa tambahkan menggunakan sudo elemen ya jadi H1 eh before ya Nah ini before Nah kita mau kontennya isinya adalah ambil dari counter function-nya lalu namanya adalah judul seperti ini nah lalu saya tambahkan ee spasi titik ya spasi Nah biar ada sedikit pemisah nah pertanyaannya Ini kok nol Ya karena kan counternya pertamanya memang nol Oke kita akan tambahkan di H2 sekarang e before-nya ini juga sama ya konten nah tapi saya mau e counter judul dulu yang di awalnya seperti ini jadi counter judul dulu nanti lalu dipisahkan pakai titik misalnya gitu ya lalu kita Tambahkan lagi counter subjudul lalu kita tambah pisahkan lagi e titik spasi Nah sekarang sudah benar ya Nah semuanya seperti ini sekarang pertanyaannya tinggal kita naikkan si counternya Kapan counter ini naik kalau ketemu H1 jadi di sini kalau H1 itu ya maka eh kita akan counter incremen untuk yang judul sebanyak satu hasilnya seperti ini satu judul dua gitu ya Dan Seterusnya nah counternya di depannya juga karena dia menggunakan counter judul ya Jadi dia sama seperti ini Nah sekarang pertanyaannya Gimana kalau yang subjudul Oke subjudul berarti kalau dia ada H2 ya Jadi kalau ada H2 kita akan counter incremen untuk sub judul dan satu nah ini berarti otomatis dia 1 2 3 Nah di sini Sayangnya dia naik keempat Padahal kita enggak mau nih kalau ini ini kan harusnya jadi 21 ya Jadi bukan 24 artinya Ketika menemukan H1 Harusnya subjudulnya itu direset counternya jadi ketika menemui H1 lagi jadi di sini kita gunakan counter reset untuk sub judul ya jadi dia ke nilai awal lagi yaitu adalah 0 Nah di sini baru nih sudah benar ya jadi 1 1 1 2 13 ya 2 21 22 ya 3 31 32 33 34 dan seterusnya Nah jadi ini adalah fitur counter jadi kita ketika membuat html-nya tidak perlu bingung lagi untuk penomoran si counternya jadi kita bisa manfaatkan CSS untuk membuat counternya sekarang kita bahas tentang filter CSS itu bisa digunakan untuk menambahkan filter di elemen yang kita ingin inginkan Nah kita bisa menggunakan properti yang namanya filter filter ini semacam efek Ya nah tapi memang Jangan berharap seperti efek di misalnya Adobe Photoshop misalnya ya tapi lebih ke efek-efek yang sederhana saja Nah kita bisa lihat ya E Detailnya ada di sini dan filter apa aja yang tersedia jadi ini ada teman-teman bisa lihat di sini ada ee function-nya ya jadi nah ini ini adalah jenis-jenis function untuk filternya contohnya ada blur ya untuk gaian blur ada brightness gitu ya Ada kontras ada drop Shadow ada Grey scale dan lain-lain Nah teman-teman bisa Eh ini ya Eh pelajari semuanya karena ini lebih ke mungkin eh Having fun aja gitu ya jadi contohnya misalnya kita punya gambar ini H rotate jadi nilainya jadi seperti ini Ini aslinya misalnya gitu ya Nah teman-teman kalau mau di blur Nah lihat dia jadi blur lalu kontrasnya dinaikkan 200% Grace case-nya misalnya ya lalu H rotate drop Shadow gitu ya Nah kita bisa lakukan seperti ini Jadi teman-teman tinggal pilih saja Oke kita coba praktikkan misal saya akan buat file baru di sini nama file-nya adalah filter.html ya kita buat di sini Oke jangan lupa ya saat teman-teman membuat atau menggunakan filter itu berarti semua elemennya akan difilter ya Jadi tidak hanya kontennya sama sampai ke bordernya background-nya ya semuanya akan difilter contohnya Saya punya gambar di sini sebuah gambar Misalnya ini kita akan coba tambahkan di sini IMG misalnya Ee kita ambil dari image Nah kita lihat hasilnya nah kurang lebih seperti ini sepertinya terlalu besar ya kita akan coba perkecil nanti style-nya e IMG misalnya ee wid-nya 500 pikel misalnya nah seperti ini cukup Saya mau tambahkan filter ya jadi filternya contohnya ada banyak ya teman-teman bisa pelajari masing-masing nah contohnya saya yang paling sederhana adalah blur nah saya mau blurnya 2 pikel Nah lihat dia agak sedikit ngeblur ya Nah default-nya harusnya nol Nah jadi dia tidak ngeblur jadi kalau saya lebih besarkan lagi 10 piksel nah dia makin ngeblur jadi ingat ya Jadi kalau nanti teman-teman punya juga contohnya di sini ada paragraf Nah Lihat ini paragraf ya teman-teman tambahkan juga p di sini filter misalnya eh blur 2 pikel Nah Lihat paragrafnya ikutan ngeblur juga ya tulisannya jadi blur ini tidak hanya memblurkan contohnya gambar Tapi semua elemennya akan diblurkan seperti ini jadi filter ini memang e beberapa efek-efek ya Yang bisa teman-teman gunakan ya untuk dilakukan ke elemennya jadi semua total elemennya akan ditambahkan si filternya Oke Saran saya teman-teman silakan coba-coba di sini ya untuk kontras dan lain-lain ya dan teman-teman bisa lihat di sini e yang tersedia ya untuk filter Oke sekarang kita bahas tentang impor nah sebelumnya kita sudah tahu untuk menambahkan kode CSS dari exernal file kita bisa menggunakan tag link ya di html-nya nah sebenarnya CSS juga memiliki kemampuan untuk mengambil kode CSS dari luar menggunakan add rule jadi teman-teman gunakan nanti tanda depannya adalah add nah di mana ini ditempatkan di bagian kode atas di bagian css-nya Nah kita bisa mengambil kode CSS dari eksternal itu menggunakan rule yang namanya add import cara penggunaannya kita bisa lihat di sini jadi sederhana banget ya Jadi teman-teman cukup gunakan add import lalu di sini url-nya jadi otomatis dia akan ngambil CSS dari eksternal jadi kita bisa lakukan seperti itu Oke kita akan coba ya oke sebelumnya kita sudah bikin CSS namanya Hello CSS seperti ini ya Nah kita akan coba nah kita akan buat di sini namanya adalah import.html Oke kita akan buat html di sini kita akan Tampilkan masih kosong di sini ada H1 Misalnya ini judul H2 ini subjudul Oke Sebelumnya kan kita menggunakan link ya nah jadi kita menggunakan link seperti ini Lalu di sini Hello CSS nah hasilnya seperti ini nah selain menggunakan ini kita bisa menggunakan Eh misalnya style lalu kita gunakan add import seperti ini lalu kita nanti Tentukan url-nya contohnya di sini kita mau tadi file-nya adalah Hello CSS nah hasilnya sama seperti yang tadi Nah jadi kita bisa lakukan seperti ini juga sebenarnya Jadi selain menggunakan Link yang tadi kita bisa gunakan import nah pertanyaannya lebih bagus yang mana sebenarnya sih lebih bagus kalau kita menggunakan import ini ya dibanding menggunakan yang link tadi Oke sekarang kita bahas tentang cascade ya saat kita belajar CSS CSS itu kan singkatan dari cascading style sheet ya Nah c-nya pernah e belum pernah kita bahas nih c-nya Itu kan adalah cascading ya artinya dia adalah cascade ya nah jadi saat kita belajar CSS kita harus ngerti konsep yang namanya cascade cascade adalah logika bagaimana web browser itu mengumpulkan properti-properti css-nya dari berbagai sumber sebelum nanti di terapkan ke elemen yang dipilihnya Jadi sebenarnya kita bisa bikin beberapa ee properti atau aturan CSS di beberapa file tapi kan nanti ujung-ujungnya akan digabungkan menjadi satu gitu ya dan baru diterapkan ke elemen yang dipilihnya nah web browser itu akan mengambil sumber property CSS dari tiga sumber yaitu yang pertama user agent yang kedua adalah author yang ketiga adalah user nah detailnya teman-teman bisa baca di sini ya tentang cascate Oke kita bahas sekarang user agent Styles seet nah user agent itu sebenarnya adalah browser Jadi biasanya memiliki nilai awal untuk style seet-nya contohnya kita tahu ya sebelumnya saat teman-teman bikin margin atau padding tiba-tiba kok body itu dia punya margin gitu ya Nah karena itu bawaan dari browsernya atau user agentnya Jadi tiap user agent biasanya berbeda Oleh karena itu saat kita membuat CSS kita harus hati-hati dengan nilai awal dari user agent karena mungkin bisa berbeda-beda dari tiap browsernya nah salah satu contoh yang banyak dilakukan oleh programmer adalah melakukan reset ke nilai kosong nah contohnya Ini adalah salah satu CSS yang banyak digunakan untuk merreset nilai-nilai bawaan dari e user agent menjadi kosong Jadi bisa menggunakan ini contohnya ya Jadi ini contohnya misalnya seperti ini contohnya ya body marginnya dijadikan Kosong gitu ya font-nya ukurannya dijadikan default-nya dan sebagainya jadi ini eh banyak digunakan untuk merriset ya ee agar nilainya jadi nilai awal seperti itu nah tapi intinya berarti yang pertama yang diambil nilainya itu adalah Yang Pertama eh nilai yang diambil itu dari user agent style sheet jadi urutannya akan dicek dulu nilai dari user agent Styles sheet-nya Nah selanjutnya itu ada auutor style sheet nah saat membuat web kadang-kadang Kan Biasanya kita tidak langsung membuat file CSS Biasanya kita akan menggunakan misalnya style seet buatan orang lain contohnya mungkin yang populer ada bootstrap atau ada tailwin CSS nah biasanya ya user akan melakukan import atau menggunakan link untuk autor style seet jadi istilahnya itu autor Styles itu ya style sheet yang sudah jadi yang Biasanya kita gunakan contohnya misalnya ada bootstrap ada tillewind CSS Nah teman-teman kalau belum tahu bootstrap itu adalah salah satu library CSS yang bisa digunakan untuk membuat ee ini ya web dengan mudah jadi kita tinggal gunakan saja nah atau ada juga telwin CSS gitu ya ini juga sama jadi kita bisa gunakan banyak kelas-kelas yang bisa digunakan untuk mempermudah kita membuat tampilan CSS misalnya seperti itu yang terakhir adalah user style sheet nah user style sheet adalah yang kita buat sendiri biasanya dibuat untuk mengubah style sheet yang sudah digunakan baik itu dari user agent atau dari auutor jadi saat kita bikin kode CSS ya kita bikin sebenarnya user style seet nah biasanya kan kita memang ingin mengubah default dari bawaan e user agent atau dari autor Styles seet oke sekarang pertanyaannya Bagaimana urutan dari cascade ordernya jadi saat kita menggunakan sumber-sumber tadi ya contohnya teman-teman pakai yang dari user agent sudah pasti gitu ya habis itu pakai yang dari autor misalnya bootstrap atau tilwin CSS lalu kita bikin lagi ya sendiri menggunakan user style sheet Nah maka ya kalau kita gabungkan semua properti CSS untuk elemen menggunakan urutan dia akan jalannya sebagai berikut Jadi yang pertama yang akan dibaca adalah user agent Styles sheet ya setelah itu baru dia akan dibaca adalah autor Styles sheet Jadi kalau ternyata user agent-nya diubah oleh SI autor maka otomatis yang menang adalah si autornya nah dan yang terakhir misalnya kalau diubah oleh user style sheet maka yang menang adalah si user style sheet-nya contoh simpel misalnya n defaultnya body itu bawaan dari browser background-nya adalah putih tiba-tiba misalnya di oututor teman-teman pakai bootstrap background-nyawarnanya misalnya E abu-abu tapi teman-teman bikin lagi kode CSS ya mengubah background-nya menjadi biru maka otomatis yang menang adalah yang user karena yang terakhir mengubah itu adalah si eh user ya jadi otomatis dia akan berubah menjadi biru ya nah jadi Jika ternyata kita membuat aturan yang sama di CSS maka urutan paling yang akhir itu yang akan digunakan Oke mungkin agak sulit ya mensimulasikannya tapi eh tidak apa-apa kita akan coba di sini misalnya cascade.khtml nah kita akan coba Bikin html ya ini Anggap saja Misalnya eh hello CSS ini adalah autor autor di sini kan h1-nya color-nya adalah red ya jadi di sini kita buat H1 ini judul H2 Misalnya ini sub judul seperti ini lalu kita tambahkan link ya CSS ke Hello CSS ini kalau kita lihat hasilnya kan Ini judulnya merah ini subjudulnya warnanya biru Nah karena dia menggunakan autor style sheet ya Jadi yang Hello CSS ini Nah kalau misalnya kita coba Bikin lagi Style ya lalu kita ubah lagi h1nya colornya menjadi Black yang menang adalah yang user ya jadi yang ini Ini adalah milik si autor dan ini milik usernya jadi kita yang buat sendiri jadi ini otomatis berubah contoh sederhana Misalnya ini background-nya adalah putih ya berarti bawaan dari user agentnya itu putih kita bisa ganti body misalnya background colornya menjadi greay Nah Lihat otomatis yang warna yang tadinya putih ya bawaan dari e sana Style seet-nya e dari user agentnya itu diubah nah gimana kalau posisinya ada dua nih H1 di sini gitu ya Lalu ada H1 lagi di sini ini warnanya red eh sorry eh Green yang menang adalah yang terakhir disebutkan jadi ini H1 H1 ini yang menang Karena posisinya dari atas ke bawah ya Jadi ini yang menang kalau masih di dalam user Eh ini ya user style seat Nah jadi ini adalah urutannya jadi seperti inilah urutannya jadi ketika teman-teman e mengubah Sebenarnya dia mengubah dari yang tadinya bawaan dari user agend dan bawaan dari si autor Styles sheet Oke saat kita membuat aturan CSS semua aturan akan mendapatkan prioritas yang namanya normal Nah kalau kita ingin membuat sebuah aturan menjadi sangat penting sehingga tidak boleh digantikan setelahnya oleh aturan yang lainnya maka kita bisa tambahkan important ya pada aturan tersebut jadi tanda seru important jadi ini artinya tidak boleh diubah oleh sty seet selanjutnya contoh sederhana misalnya ya jadi kita bisa lihat di sini ini kan e colornya Black Ya tapi karena di bawah Ternyata ada yang mengubah ya ini menjadi Green maka dia berubah menjadi Green seperti itu nah misalnya Oke saya pengin saya kan Engak tahu misalnya nanti siapa yang akan mengubah Saya pengin pokoknya ini harus Black maka kita bisa tambahkan kalau ini adalah important nah ketika kita tanda ini adalah important maka ini yang paling important yang akan dipakai Jadi ini tetap Black seperti itu Jadi teman-teman bisa gunakan important atau kalau di Hello css-nya ini ternyata ada yang menambahkan ini adalah important gitu ya Nah kalau temanteman perhatikan lihat ini akan terubah oleh importimportant yang ada di bawahnya karena ini adalah masuknya autor ya Nah Sedangkan ini adalah user kecuali ini tidak ada importantnya Nah kalau ini tidak ada importantnya maka dia pakai yang dari autor ya dia pakainya yang ini important tapi kalau di sini ternyata ada important lagi contohnya di sini maka dia akan keubah oleh important yang ada di user jadi urutannya importantnya seperti itu Nah jadi kalau memang teman-teman pengin ini enggak boleh diubah gitu ya teman-teman tinggal tambahkan important seperti itu Nah jadi kalaupun di bawah jadi Green atau di sini ee teman-teman ubah lagi menjadi di sini yellow gitu ya itu dia tidak akan berubah karena dia yang diambil adalah yang important Nah jadi ini adalah flagging untuk mementingkan eh urutan ya Jadi mau yang mana nih yang dipentingkan gitu ya tapi ingat ya Ini per properti jadi ee kalau teman-teman ada lima properti di sini pengin semuanya important ya teman-teman harus Sebutkan satu persatu kalau ini adalah important sekarang kita bahas tentang layer ya saat kita menggunakan important itu sebenarnya sangat tidak fleksibel karena Artinya kita tidak bisa mengubah properti lagi karena sudah ditandai beberapa properti menjadi important jadi ketika kita ubah itu tidak bisa alternatifnya yang lebih fleksibel itu adalah menggunakan layer jadi ini lebih baik ya dibanding kita menggunakan si important ini Nah dengan menggunakan layer kita bisa ubah urutan mana yang lebih penting Oke jadi layer adalah fitur di dalam CSS cascate ya Di mana kita bisa membuat layer seperti tumpukan di mana posisi layer bisa diurutkan sesuai dengan yang kita mau nah dengan menggunakan layer kita bisa menentukan mana yang lebih penting dan mana yang tidak begitu penting dengan mengubah posisi si layernya jadi misalnya yang lebih penting ya kita naikkan ke paling atas yang tidak penting ya kita turunkan ke bawah misalnya seperti itu Nah Dengan begitu kita bisa mengubah posisi-posisi dari si layernya tanpa harus menggunakan importan lagi nah kita bisa lihat di sini ya cara penggunaan layernya Nah jadi nanti cara penggunaan layer sederhana Kita tentukan dulu ya di sini urutannya contohnya urutannya layernya yang pertama modul dulu yang dieksekusi lalu state artinya kalau misalnya modul ada yang sama berarti dia akan keubah oleh si state layernya ini nama layer itu bebas ya namanya contohnya a b dan seterusnya nah lalu saat kita membuat CSS kita bisa Tentukan dia ada di layer mana contohnya di sini gitu ya kita akan Buat Add layer state nah isinya pakai kurung kurawal ya Di dalamnya tinggal pakai CSS biasa contohnya di sini ada P Eh sorryi ada alert gitu ya Ada P lalu kita bilang di sini ada e layer modul gitu ya dan di sini alert-nya seperti ini Nah nanti kalau urutannya modul dulu baru state berarti ini dulu yang dieksekusi gitu ya baru nanti ini yang dieksekusi kalau kebalik urutannya gitu ya state dulu baru modul berarti state dulu yang dibikin baru yang modul jadi seperti itu Nah kita akan coba ya jadi kita buat Nanti ya Nah nanti kita akan coba bolak-balik si layernya Oke kita akan buat di sini file baru namanya adalah layer.html Oke kita akan buat di sini ya html misalnya Oke ini kita buat layer misalnya saya akan bikin h satu ee judul ya Ini judul H2 Misalnya ini sub judul Oke kita akan buat eh Style ya misalnya seperti ini Lalu di sini misalnya kita punya ee layer ee misalnya layer a gitu ya lalu di sini ada layer B misalnya seperti ini nah tidak harus Semuanya masuk ke layer contohnya yang H2 misalnya ya itu dia e colornya adalah blue seperti ini ini kita buka dulu nah hasilnya seperti ini Nah untuk di layer A saya mau misalnya untuk si H1 gitu ya itu colornya adalah red nah seperti ini tapi untuk di layar B gitu ya itu h1-nya misalnya colornya adalah Misalnya pink nah Oh ya ini sorry bukan titik du nah seperti ini ya Nah kalau kita tidak Tentukan layer Mana duluan gitu ya maka default-nya akan dibaca dari atas ke bawah ya jadi layer a dulu berarti nanti pertamanya adalah red tapi nanti ditimpa oleh layer B jadi dia jadi pink makanya di sini nilainya pink nah tapi kita bisa Tentukan urutannya kalau kita mau contohnya Oke saya layernya mau ganti nih Nah jadi bukan a sama B jadi di sini layernya saya mau ganti B dulu ya koma baru a seperti ini nah artinya nanti yang dieksekusi itu kalau yang ada layernya itu berarti B dulu Berarti warnanya pink dulu tapi habis itu ditimpa oleh layer a ya berarti red makanya ini yang keluarnya adalah red seperti itu Nah kalau posisinya Oke saya maunya yang eh a dulu baru B nah dia keluarnya yang pink seperti ini nah jadi karena bisa ee dinamis ya kita bisa ubah-ubah posisi layernya jadi ini lebih cocok dibanding kalau teman-teman menggunakan important jadi misalnya kalau kita bikin sebuah file CSS di sini misalnya ya Ee di sini layer. CSS kita bisa pindahkan semuanya ini misalnya ya saya akan Cut saya akan pindahkan ke layer CSS seperti ini gitu ya jadi di sini kita bisa lakukan nanti eh import misalnya layer CSS ya Nah teman-teman tinggal Tentukan layernya contohnya Oke saya mau a dulu habis itu b atau oke ganti deh gitu ya e b dulu baru a seperti ini Nah kita bisa lakukan seperti ini jadi nanti data layernya ada di file terpisah misalnya di eh layer CSS ini ya seperti ini jadi di sini teman-teman tinggal Sebutkan layer apa ini layer apa dan isi dari layernya kira-kira apa nanti tinggal teman-teman Tentukan prioritasnya mau yang mana dulu dieksekusi nanti yang terakhir berarti yang paling penting ya yang paling terakhir dieksekusinya Nah jadi ini lebih baik dibanding menggunakan important kalau important itu agak susah untuk mengotak-ngatiknya kalau menggunakan layer itu lebih aman jadi teman-teman tinggal ubah-ubah saja posisi si layernya Oke teman-teman selesai sudah materi tentang CSS dasar ya nah jadi sekarang harusnya teman-teman sudah mengerti gimana cara kerja CSS dan sekarang teman-teman bisa mulai coba ya ubah-ubah tampilan untuk halaman html-nya jadi teman-teman bisa ubah background-nya colornya tampilannya dan lain-lain nah tapi sebenarnya yang paling penting itu sebenarnya di materi CSS adalah materi selanjutnya materi Selanjutnya apa gitu ya Nah materi selanjutnya itu kita bahas tentang CSS layout jadi tata letak ya nanti kita akan belajar bagaimana cara membuat tata letak web kita ya agar lebih bagus menggunakan CSS sebelumnya kita cuma ee mengubah-mengubah tampilan per komponennya nah tapi kan nanti saat kita bikin halaman web kita harus tahu gitu ya semua komponen itu digabungkan dalam layout yang baik Nah nanti kita belajar di materi selanjutnya tentang CSS layout Nah selanjutnya juga kita akan belajar yang namanya javascript jadi setelah teman-teman belajar html habis itu belajar CSS nah teman-teman wajib belajar yang namanya javascript ini bisa teman-teman gunakan untuk menambahkan interaksi ke dalam SI halaman web-nya jadi tidak statis ya Jadi ada ee banyak Interaksi yang bisa kita lakukan dengan menggunakan javascript Oke teman-teman jadi itu aja materi tentang CSS dasar kalau teman-teman ada kritik saran atau pertanyaan teman-teman bisa masukkan di dalam kolom komentar atau kita diskusikan di discord-nya programmer zamanau kita ketemu lagi di materi selanjutnya salam programmer zaman bye bye