Selector CSS Dasar

-



Halo teman-teman kali ini saya akan berbagi mengenai Selector dalam css yaitu digunakan untuk memilih elemen mana dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila kita ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector. Contoh materi yang saya bawakan hanya 1 kreasi yang saya lakukan, jadi silahkan kalian eksplorasi lebih jauh lagi.

Buatlah html seperti biasa lalu buatlah list seperti dibawah

  • <ul>: (Unordered List) Jenis list yang berbentuk poin - poin, Unordered List atau UL sendiri juga sering disebut dengan Nama Bulet List karena bentuknya yang berupa titik lingkaran.
  • <li>: digunakan untuk menampilkan daftaran yang berurutan ke bawah.
  • <ol>: (ordered list) merupakan elemen HTML untuk menampilkan daftar (list) dalam bentuk butir-butir melalui nomor secara berurutan. Nomor urut dapat berbentuk urutan angka desimal maupun daftar berbentuk urutan abjad.
Untuk penjelasan setelah membuat list ada pada bagian selanjutnya.

  • body: Yang artinya merubah semuan font yang terdapat pada body dengan font verdana.
  • h1,h2: Sebenarnya bisa dipisah jika kalian ingin membedakan header tersebut. Jika sama maka kalian hanya mempersingkat coding seperti bawah.
  • ul li a: Ini adalah bagian pembungkus untuk list berwarna hijau.
  • ol li a: Ini adalah bagian pembungkus untuk list berwarna gold.
  • p1: Menggunakan (#) karna ini yang membedakan dengan class
  • p2:  Menggunakan (.) sebagai class
  • .huy dan a huy: Ini adalah bagian jika kalian ingin menggunakan class yang sama dan styling yang sama. Yang membedakan hanya pada tag lalu diakhiri class yang sama.






Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya