Belajar Css Dasar Lanjutan Gampang Dipahami
- Sekarang mari kita bahas mengenai CSS Dasar, melanjutkan artikel sebelumnya yaitu Belajar CSS Dasar Praktis Di Pahami.
Kalau sebelumnya membahas perihal cara memanggil file CSS yang benar, kini dilanjut Belajar CSS Dasar lanjutan seperti, Class CSS, Class Selector, ID Selector dan masih banyak lagi. Ayo eksklusif saja.
Belajar CSS Dasar atau Pemula
Class dalam CSS dipakai untuk menciptakan aneka macam macam Variasi suatu Tag HTML
Selengkapnya ihwal Class CSS akan dikupas lebih banyak berikut ini:
1. Class Selector
Class Selector dipakai untuk menentukan sekelompok Elemen atau banyak Elemen untuk suatu isyarat CSS.
Cara Penulisan Class Selector di HTML:
<div class='nama-class'> ... Kode HTML ..</div>Cara penulisan Class Selector di CSS:
.nama-class {property:value;}Cara penulisan Class Selector dengan Tag HTML di CSS:
Taghtml.nama-class {property:value;}
Contoh isyarat HTMLdan Class Selector:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <style> p {color:red;} p.html {color:blue;} .css {color:yellow;} </style> </head> <body> <p>Latihan CSS</p> <p class='html'> Contoh paragraf latihan HTML </p> <div class='css'> Contoh paragraf latihan CSS </div> </body> </html> Jangan lupa ada tanda titik "." pada setiap awal nama Class di isyarat CSS. Setelah Class Selector ada juga ID Selector.
2. ID Selector
ID Selector dipakai untuk memformat sebuah Elemen CSS yang mana akan muncul satu kali dalam suatu halaman Website. Jika pada Class Selector yaitu banyak elemen, untuk ID Selector hanya satu elemen. Misalnya untuk memberi format CSS pada kepingan Menu / Sidebar website. Bagian tersebut tidak sanggup diberikan pada format CSS yang berulang ulang atau banyak, sehingga tepatnya memakai ID Selector.
Cara penulisannya:
Penulisan ID Selector di HTML:
<div id='ID Selector'>...Kode HTML </div>Penulisan ID Selector di CSS:
#nama-ID Selector {property:value;}Cara penulisan ID Selector dengan Tag HTML:
TagHTML#nama-ID Selector {property:value;}
Contoh isyarat HTML dan ID Selector:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <style> h1 {color:red;} #paragraf {color:blue;} </style> </head> <body> <h1>Latihan CSS</h1> <div id='paragraf''> Contoh paragraf latihan HTML, Contoh paragraf latihan CSS, Contoh paragraf latihan PHP </div> </body> </html> Perhatikan tanda Pagar "#" disetiap nama ID Selector. Jika pada Class Selector memakai tanda titik ".", untuk di ID Selector memakai tanda Pagar "#".
3. Komentar CSS
Komentar CSS yaitu suatu kalimat sebagai penanda atau penekanan, tetapi kalimat tersebut tidak di sanksi sebagai isyarat CSS. Fungsinya yaitu untuk mempermudah kepingan bagian yang ingin diberi keterangan pada kepingan tertentu. Komentar dalam CSS juga tidak kalah penting, sebab hadirnya komentar di dalam script CSS akan sangat membantu dalam pengkajian ulang, pengembangan isyarat dan lain lain.
Penulisannya ditandai dengan /* dan */.
Contoh:
h1 {color:red; font-size:20px;} /* Ini yaitu baris komentar */
4. Nesting CSS
Apa itu Nesting, Nesting yaitu penulisan Selector didalam Selector.
Bila dokemen HTML yang dibentuk mempunyai struktur yang baik, maka tidak perlu repot repot menciptakan banyak Class dan ID.
Contoh:
#top {background-color: #ccc; padding: 1em;}
#top h1 {color:#ff0;}
#top p {color:red; font-weight:bold;}
Kode diatas berarti, kalau ada Tag <h1> dan Tag <p> pada sebuah block dengan Id='top', maka ketentuan dalam isyarat CSS diatas akan berlaku. Namun kalau Tag <h1> dan <p> tersebut berada diluar block dengan Id='top', maka ketentuan didalam isyarat CSS diatas tidak berlaku.
Seperti itu lah mengenai Nesting didalam CSS.
5. Pseudo Classes
Pseudo Class dipakai untuk menambahkan Efek Special pada Selector selector tertentu. Pada CSS, Pseudo Class sanggup juga dikombinasikan dengan Class. Tidak semua Pseudo Class kompetibel dengan setiap Browser. Untuk lebih menjamin Pseudo Class berjalan dengan baik, pastikan isyarat <!DOCTYPE html> dimasukkan pada baris paling atas isyarat HTML.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Berikut macam macam dari Belajar CSS Selector Pseudo Class:
Selector :link yaitu Link yang belum dikunjungi. Contohnya: a:link.
Selector :visited yaitu Link yang sudah dikunjungi. Contoh: a:visited.
Selector :active yaitu Link yang aktif. Contoh: a:active.
Selector :hover yaitu Link yang dilewati pointer mouse. Contoh: a:hover.
Selector :focus yaitu menentukan elemen input yang menerima focus. Contoh: input:focus.
Selector :first-letter yaitu menentukan aksara pertama dari setiap elemen yang dipilih. Contoh: p:first-letter.
Selector :first-line yaitu menentukan baris pertama dari setiap elemen yang dipilih. Contoh: p:first-line.
Selector :first-child yaitu menentukan setiap elemen yang dipilih, yang merupakan anak pertama dari parent nya. Contoh: p:first-child.
Selector :before yaitu memasukkan konten sebelum elemen yang dipilih. Contoh: p:before.
Selector :after yaitu memasukkan konten sehabis elemen yang dipilih. Contoh: p:after.
6. Link
Link yaitu suatu teks yang mempunyai alamat redirect atau tujuan ke halaman lain atau halaman itu sendiri. Selector selector yang sanggup dipakai pada Link Anchor <A> adalah:
a:link, a:visited, a:hover, a:active dan lainya.
Kita sanggup mengatur sebuah properti teks pada Class class A tersebut, termasuk color, font-size, font-weight, dan text-decoration. Sebagai contoh, untuk menentukan warna yang spesifik pada tipe link, maka kita sanggup menspesifikasikan sebagai berikut:
a:link {color:red;}
a:visited {color:blue; text-decoration:none;}
a:hover {color:yellow;}
a:active {color:orange;}
Dengan menambahkan text-decoration:none, berarti kita menghilangkan garis bawah pada teks link.
Catatan:
1. a:hover harus berada sehabis a:link dan a:visited pada CSS nya supaya isyarat berjalan semestinya.
2. a:active harus berada sehabis a:hover.
Contoh:
<!DOCTYPE html> <html> <head> <title>Latihan CSS</title> <link rel='stylesheet' type='text/css' href='css/style.css'> </head> <body> <h1>Latihan CSS</h1> <a href='sutekom.blogspot.co.id' target='_blank'>Blog Seputar Komputer</a> </body> </html>
Properti Anchor <a> diikuti dengan Href dan alamat link tujuan.
Sampai disini dulu artikel Belajar CSS Dasar Lanjutan ini, semoga bermanfaat. Dan nantikan artikel artikel menarik lainnya seputar Belajar CSS.
Jika bermanfaat sanggup disebarkan atau share ke sahabat sahabat sekalian. Terima kasih :).
- Salam -
Sumber https://www.senikoding.com/