Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya
Posting Komentar
Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya - Komponen yang ada didalam kode CSS ini terbagi dalam kode penyeleksi yang disebut sebagai Selector. Dan selector ini umumnya dibagi menjadi 3 yaitu selector id, selector class, dan selector tag
Daftar isi
Baca Juga
Belajar Cara Menggunakan Selector ID, Class dan Tag Pada CSS & Perbedaan Ketiganya - Dalam menggunakan kode CSS, ada beberapa aturan baku yang harus dilakukan dengan memperhatikan setiap komponen yang ada dalam kode CSS tersebut. Didalam kode CSS tersebut terbagi dalam beberapa komponen yang memiliki fungsi yang berbeda meskipun dalam pendeklarian kodenya memiliki value atau nilai yang sama.
Komponen yang ada didalam kode CSS ini terbagi dalam kode penyeleksi yang disebut sebagai Selector. Dan selector ini umumnya dibagi menjadi 3 yaitu selector id, selector class, dan selector tag. Ketiga selector ini memiliki fungsi yang berbeda sesuai dengan deklarasi yang diberikan, namun ada yang sama dan pada masing-masing selector memiliki markup HTML yang sama dengan selector pada CSS. Bingung? Yuk kita bahas saja bersama-sama...
Selector Tag
Pada pembahasan sebelumnya mengenai Apa itu CSS, kami sudah menyebut dan memberikan contoh tentang selector tag ini. Selector tag ini didalam markup HTML biasanya ditulis langsung sesuai tag yang ada pasa CSS.
Cara Membuat Selector Tag CSS
Beberapa kode selector tag yang biasanya umum digunakan adalah tag body, p, span, h1, h2, h3, dan sebagainya. Dan penulisannya dalam bentuk kode CSS adalah sebagai berikut:
Jika masing-masing tag memiliki declaration, property dan value yang sama maka penulisannya dalam kode CSS bisa dilakukan menjadi satu yang ditandai dengan tanda koma pada masing-masing selector. Contohnya seperti ini:
Maka penulisan kode CSS diatas bisa dibuat seperti berikut:
Cara Menggunakan Selector Tag di Markup HTML
Untuk penulisannya dalam markup HTML, maka harus sesuai dengan kode tag tag yang digunakan pada kode CSS. Contohnya seperti berikut ini:
Maka hasil tampilan dari markup HTML diatas adalah sebagai berikut:
Selector ID CSS
Sama halnya dengan selector tag yang telah dijelaskan diatas, namun pada selector ini ditandai dengan penggunaan tanda pagar (#) pada selector tagnya. Sedangkan untuk penggunaanya, selector ID hanya bisa digunakan satu kali dalam masing-masing halaman tampilan blog. Misalnya pada bagian header blog, body blog, sidebar blog, dan footer blog hanya memiliki satu ID markup HTML dengan selector ID yang sama, kecuali selector ID yang digunakan berbeda maka bisa menggunakan ID markup HTML yang banyak.
Cara Membuat Selector ID CSS
Sama halnya dengan membuat kode CSS pada selector tag, namun pada selector ID menggunakan tanda pagar pada selectornya sedangkan untuk tagnya bebas menggunakan atribut apa saja. Contohnya adalah sebagai berikut:
Kode CSS diatas menggunakan tag
Cara Menggunakan Selector ID di Markup HTML
Untuk penggunaan di markup HTML, selector ID tidak sama dengan selector tag. Pada selector tag langsung menggunakan elemen tag itu sendiri secara langsung. Namun pada selector ID, pada markup HTML menggunakan elemen
Kode CSS dengan Selector ID
Maka penulisannya dalam markup HTML adalah sebagai berikut:
Hasil dari kode HTML diatas, adalah sebagai berikut :
Selector Class CSS
Jika pada selector ID menggunakan tanda pagar (#), untuk selector Class menggunakan tanda titik (.). Namun perbedaannya adalah, selector Class bisa digunakan secara bersamaan dengan selector Class yang lainnya pada saat penulisan di markup HTML. Contoh kode CSS dengan selector Class adalah seperti berikut:
Cara Menggunakan Selector Class di Markup HTML
Untuk penggunaan di markup HTML, selector Class sama dengan selector ID yaitu pada markup HTML sama-sama menggunakan elemen
Kode CSS dengan Selector Class
Maka penulisannya dalam markup HTML adalah sebagai berikut:
Hasil dari kode HTML diatas, adalah sebagai berikut :
Jika menggunakan 2 selector Class, dengan kode CSS seperti berikut:
Maka penulisannya dalam markup HTML adalah sebagai berikut:
Hasil dari kode HTML diatas, adalah sebagai berikut :
Penggabungan Selector
Jika selector Class bisa digabungkan menjadi satu dalam markup HTML, bisakah selector ID dan Class digabungkan penulisannya di markup HTML? Tentu saja bisa. Untuk penggunaan kode CSS sama seperti yang telah diejaslkan diatas, sedangkan untuk penulisan markup HTMLnya.
Dengan catatan, dalam memberikan atribut pada kode CSS di masing-masing selector adalah berbeda. Contohnya seperti berikut:
Dan penulisan kode markup HTMLnya adalah sebagai berikut:
atau
Dari pembahasan mengenai selector ID, Class, dan tag pada kode CSS, sebenarnya sangat mudah dalam membuat sebuah kode CSS yang sesuai dengan kebutuhan. Secara dasarnya memang seperti yang telah dijelaskan diatas namun pada tahapan lanjutan, ada beberap kode CSS dengan berbagai atribut property dan value yang bisa menghadirkan berbagai bentuk tampilan dan efek-efek animasi dengan menggunakan kode CSS. Semoga pembahasan sederhana tentang CSS ini bisa memberikan manfaat dan bisa dipelajari dengan mudah. Terimakasih.
Selector Tag
Pada pembahasan sebelumnya mengenai Apa itu CSS, kami sudah menyebut dan memberikan contoh tentang selector tag ini. Selector tag ini didalam markup HTML biasanya ditulis langsung sesuai tag yang ada pasa CSS.
Cara Membuat Selector Tag CSS
Beberapa kode selector tag yang biasanya umum digunakan adalah tag body, p, span, h1, h2, h3, dan sebagainya. Dan penulisannya dalam bentuk kode CSS adalah sebagai berikut:
body {
background-color: #ffffff;
}
p {
color: #000000;
}
h1 {
color: #000fff;
}
h3 {
color: #fff000;
}
Jika masing-masing tag memiliki declaration, property dan value yang sama maka penulisannya dalam kode CSS bisa dilakukan menjadi satu yang ditandai dengan tanda koma pada masing-masing selector. Contohnya seperti ini:
p {
color: #000000;
}
h1 {
color: #000000;
}
h3 {
color: #000000;
}
Maka penulisan kode CSS diatas bisa dibuat seperti berikut:
p, h1, h3, {
color: #000000;
}
Cara Menggunakan Selector Tag di Markup HTML
Untuk penulisannya dalam markup HTML, maka harus sesuai dengan kode tag tag yang digunakan pada kode CSS. Contohnya seperti berikut ini:
<body>
<p>Ini adalah tag p</p>
<h1>Ini adalah tag h1</h1>
<h3>Ini adalah tag h3</h3>
</body>Maka hasil tampilan dari markup HTML diatas adalah sebagai berikut:
Selector ID CSS
Sama halnya dengan selector tag yang telah dijelaskan diatas, namun pada selector ini ditandai dengan penggunaan tanda pagar (#) pada selector tagnya. Sedangkan untuk penggunaanya, selector ID hanya bisa digunakan satu kali dalam masing-masing halaman tampilan blog. Misalnya pada bagian header blog, body blog, sidebar blog, dan footer blog hanya memiliki satu ID markup HTML dengan selector ID yang sama, kecuali selector ID yang digunakan berbeda maka bisa menggunakan ID markup HTML yang banyak.
Cara Membuat Selector ID CSS
Sama halnya dengan membuat kode CSS pada selector tag, namun pada selector ID menggunakan tanda pagar pada selectornya sedangkan untuk tagnya bebas menggunakan atribut apa saja. Contohnya adalah sebagai berikut:
#header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;Kode CSS diatas menggunakan tag
header dengan selector ID karena adanya tanda pagar (#). Selector header ini bisa diganti dengan nama tag lain yang sesuai dengan keinginan pengguna. Misalnya diganti dengan bagiankepala, maka penulisan kode CSSnya menjadi seperti berikut:#bagiankepala {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;Cara Menggunakan Selector ID di Markup HTML
Untuk penggunaan di markup HTML, selector ID tidak sama dengan selector tag. Pada selector tag langsung menggunakan elemen tag itu sendiri secara langsung. Namun pada selector ID, pada markup HTML menggunakan elemen
div sebagai pembuka dan penutup pada kode markup HTML. Selain sebagai kode pembuka dan penutup, elemen div ini digunakan sebagai pemisah antar selector dalam markup HTML. Contohnya seperti berikut ini:Kode CSS dengan Selector ID
#header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;Maka penulisannya dalam markup HTML adalah sebagai berikut:
<div id="header"> Ini adalah judul artikel </div>
Hasil dari kode HTML diatas, adalah sebagai berikut :
Selector Class CSS
Jika pada selector ID menggunakan tanda pagar (#), untuk selector Class menggunakan tanda titik (.). Namun perbedaannya adalah, selector Class bisa digunakan secara bersamaan dengan selector Class yang lainnya pada saat penulisan di markup HTML. Contoh kode CSS dengan selector Class adalah seperti berikut:
.header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;Cara Menggunakan Selector Class di Markup HTML
Untuk penggunaan di markup HTML, selector Class sama dengan selector ID yaitu pada markup HTML sama-sama menggunakan elemen
div sebagai pembuka dan penutup pada kode markup HTML. Namun untuk penggunaan selector Class bisa digunakan secara bersamaan. Contohnya seperti berikut ini:Kode CSS dengan Selector Class
.header {
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;Maka penulisannya dalam markup HTML adalah sebagai berikut:
<div class="header"> Ini adalah judul artikel </div>
Hasil dari kode HTML diatas, adalah sebagai berikut :
Jika menggunakan 2 selector Class, dengan kode CSS seperti berikut:
.header {
width: 250px;
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;
}
.header1 {
border-bottom: 2px solid blue;
}Maka penulisannya dalam markup HTML adalah sebagai berikut:
<div class="header header1"> Ini adalah judul artikel </div>
Hasil dari kode HTML diatas, adalah sebagai berikut :
Penggabungan Selector
Jika selector Class bisa digabungkan menjadi satu dalam markup HTML, bisakah selector ID dan Class digabungkan penulisannya di markup HTML? Tentu saja bisa. Untuk penggunaan kode CSS sama seperti yang telah diejaslkan diatas, sedangkan untuk penulisan markup HTMLnya.
Dengan catatan, dalam memberikan atribut pada kode CSS di masing-masing selector adalah berbeda. Contohnya seperti berikut:
#header {
width: 250px;
background-color: #777777;
color: #ffffff;
font-family: Arial;
font-size: 16;
font-weight: bold;
padding: 10px;
}
.header {
border-bottom: 2px solid blue;
}Dan penulisan kode markup HTMLnya adalah sebagai berikut:
<div id="header header"> Ini adalah judul artikel </div>
atau
<div id="header" class="header"> Ini adalah judul artikel </div>
Dari pembahasan mengenai selector ID, Class, dan tag pada kode CSS, sebenarnya sangat mudah dalam membuat sebuah kode CSS yang sesuai dengan kebutuhan. Secara dasarnya memang seperti yang telah dijelaskan diatas namun pada tahapan lanjutan, ada beberap kode CSS dengan berbagai atribut property dan value yang bisa menghadirkan berbagai bentuk tampilan dan efek-efek animasi dengan menggunakan kode CSS. Semoga pembahasan sederhana tentang CSS ini bisa memberikan manfaat dan bisa dipelajari dengan mudah. Terimakasih.
