Selector
Ada beberapa
Yang pertama ada elemen HTML yang sdh kita buat sebelumnya, seperti h1, p, h2 dan tag-tag lain
Atau kita bisa membuat sendiri selector kita dengan menggunakan id atau class
Jika kita ingin memberikan jenis font pada body kan tinggal buat saja
Body { font-family: arial;}
Semisal ada h1 dan h2
Kita bisa memberikan masing-masing atau bisa juga di gruping dengan menggunakan tanda koma
Kita gunakan operator koma yg bisa diartikan dengan ”dan”
H1, h2 { color:green; }
Terus semisal h2 mau dikasih perlakuan lain masih bisa kita tambah dibawahnya semisal
H2 {font-stlye: italic;}
Dan seterusnya
Semisal ad aul dan ol, Kita tidak bisa menuliskan ol {color:orange;} maka warnanya tidak berubah, karena
yg berubah sebenarnya bukan ol tapi a di dalamnya, maka jika saya tulisakan
A {color; orange;} maka seluruh a akan berubah menjadi warna orange, padahal kita maunya :
A yg di dalam ul warna pink
A yg di dalam ol warna ungu
Maka kita bisa menggunakan operator spasi ul li a {color : orange;} atau ol lo a {color:red;}
Kemudian ada 2 paragraf (2p) gimana jika kita mau p yg atas merah, p yg bawah
Tidak bs menggunakan spasi lagi Paragraf tidak di dalam sesuatu yg berbeda seperti ol dan ul
Kita harus berikan dia selector khusus ada id dan class
<p id=”p1”> Lorem <p/>
Untuk id di css kalian tuliskan crash (tanda #)
#p1 { color:orange}
<p class=”p2”> Lorem <p/>
Klo kelas kita gunakan titik
.p2 {color:red;}
Di teori id-> knp sebaiknya tidak
digunakan CSS? Menggunakan Id bebannya lebih berat, ilustrasi elemen 1, class 10x lipat lebih berat, id
100x lipat lebih berat
Klo menggunakan class misal mau menambahkan class lagi bisa
<p class=”p2 cetak-tebal”> Lorem <p/>
Kit abisa menambahkan
.p2 {color:red;}
.cetak-tebal { font-weight: bold; }
[Link]-tebal { font-size: 30px; } (ini kita baca css tlg carikan saya paragraph tapi yg memiliki class cetak
tebal saja, jadi selain paragraph tidak akan di proses)
Pseudo-class
Knp Kelas semu? Sebenernya kelasnya ada tapi aktif di keadaan tertentu aja
Pseudo class ini terbagi menjadi beberapa tipe, pertama 1. Yg berhubungan dgn link a href, otomatis
warna nya berubah dgn lain (biru) pernah merhatikan klo sdh pernah di klik linknya itu dia berubah jd
ungu , nah ini karena pseudo class ini.
Hover, pc aktif ketika kita sorot elemen nya menggunkan mouse – ketika mouse nya di atas elemen maka
style nya aktif
Active, ketika klik pakai mouse
Visited, Ketika linknya sdh pernah dikunjungi sebelumnya maka warnanya berubah jadi ungu
Kita buat dlu list (10 link, dan 2 paragraf)
kita sudah buat class hello di hello word, kita coba untuk tipe link
awal nya semua link berwarna default yaitu biru kita bisa merubah warnanya dengan