.jpeg "Selector dalam CSS")
1. Selector dengan Element Html
Selector bisa digunakan pada Element Html ataupun tag dalam Html. Bagaimana cara menentukan selector untuk Element Html ? Lihat codingan dibawah ini
<!DOCTYPE html>
<html>
<head>
<title> Selector dalam CSS </title>
<style>
p {
color: blue;
background-color: black;
}
</style>
</head>
<body>
<p> Contoh penggunaan selector dalam element Html </p>
<h4> Contoh penggunaan selector dalam element Html </h4>
</body>
</html>
Maka, hasilnya akan menjadi seperti ini
Contoh penggunaan selector dalam element Html
Contoh penggunaan selector dalam element Html
Jika kamu belum memahami nya, saya akan menjelaskan nya lebih dalam lagi. Mengapa tag <p> berbeda dengan tag <h4> ? Penyebab tag <p> berbeda dari tag <h4> adalah karena kita sudah menggunakan selector untuk tag <p>. Selector dengan Element html berlaku untuk tag yang sudah diberikan style CSS.
2. Selector dengan Class CSS
Selector dengan Class CSS sudah banyak kita temui karena kebanyakan orang menggunakan selector ini. Meskipun cara penulisan Selector dengan Class CSS hampir sama dengan Selector dengan Element Html, tetap saja memiliki perbedaan. Jika dengan Element Html, langsung menuliskan tag html nya. Sedangkan dengan Class CSS, harus menggunakan titik (.) terlebih dahulu. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title> Selector dalam CSS </title>
<style>
.xway {
color: blue;
background-color: black;
}
.burst {
color: red;
background-color: black;
}
.ovb {
color: black;
background-color: yellow;
}
</style>
</head>
<body>
<p class="xway"> Contoh penggunaan selector dalam element Html </p>
<h4 class="ovb"> Contoh penggunaan selector dalam element Html </h4>
<p class="burst"> Contoh penggunaan selector dalam element Html </p>
</body>
</html>
Hasilnya seperti dibawah ini.
Contoh penggunaan selector dalam element Html
Contoh penggunaan selector dalam element Html
Contoh penggunaan selector dalam element Html
Meskipun terdapat tag <p> yang sama, tetap saja hasilnya akan berbeda karena kita sudah menggunakan selector dengan Class CSS. Selector dengan Class CSS dapat digunakan berkali kali selama penulisan class CSS nya benar.
Artikel Menarik Lainnya :
3. Selector dengan Attribut id
Penggunaan Selector dengan Attribut id bisa kita gunakan dengan cara menambahkan # terlebih dahulu. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html>
<head>
<title> Selector dalam CSS </title>
<style>
#test {
color: blue;
background-color: red;
}
#burst {
color: gold;
background-color: blue;
}
#ovb {
color: cyan;
background-color: orange;
}
</style>
</head>
<body>
<p id="test"> Contoh penggunaan selector dalam element Html </p>
<h4 id="ovb"> Contoh penggunaan selector dalam element Html </h4>
<p id="burst"> Contoh penggunaan selector dalam element Html </p>
</body>
</html>
Hasilnya seperti dibawah ini
4. Selector Universal
Selector Universal merupakan pemilihan secara umum atau global yang ditulis dengan tanda * atau tanda bintang. Biasanya selector ini digunakan untuk mengatur padding dan margin. Berikut ini contoh codingan nya.
* {
padding: 0;
margin: 0;
}
Pentingnya mengetahui tentang selector dalam CSS adalah agar kita dapat membedakan antara selector css dengan selector lainnya. Karena yang sering dijumpai adalah selector css. Jika kamu masih bingung, silahkan bertanya dikolom komentar. Sekian dan Terimakasih.