Sekarang kita balik lagi ke pembahasan materi, dan tentunya kalian juga sudah tahu apa itu kata selector, selector di terjemahkan dalam artian
Di dalam CSS terdapat istilah pemilihan
Karena ini bagian dasar ! Saya akan membahas sedikit pembahasan dulu, dan biar tidak pusing kepala nantinya ketika kalian belajar,, hehe..
1. Pemilihan berdasarkan
<!DOCTYPE html>
<html>
<head>
<title> Contoh Code </title>
</head>
<body>
<style type="text/css">
/* Pemilihan element "color-red", Style (1) */
color-red{
background: #eeeeee;
color: #ff0000;
}
/* Pemilihan element "color-green", Style (2) */
color-green{
background: #dddddd;
color: #00ff00;
}
/* Pemilihan element "color-blue", Style (3) */
color-blue{
background: #cccccc;
color: #0000ff;
}
/* Pemilihan element "color-orange", Style (4) */
color-orange{
background: #bbbbbb;
color: #ff9900;
}
/* Pemilihan element "color-red", Style (5) */
color-yellow{
background: #aaaaaa;
color: #ffff00;
}
</style>
/* Baris element HTML */
<color-red> #ff0000; </color-red><br/> /* Lihat Style (1) */
<color-green> #00ff00; </color-green><br/> /* Lihat Style (2) */
<color-blue> #0000ff; </color-blue><br/> /* Lihat Style (3) */
<color-orange> #ff9900; </color-orange><br/> /* Lihat Style (4) */
<color-yellow> #ffff00; </color-yellow> /* Lihat Style (5) */
</body>
</html>
Hasilnya :
#ff0000;
#00ff00;
#0000ff;
#ff9900;
#ffff00;
2. Pemilihan berdasarkan attribute
<!DOCTYPE html>
<html>
<head>
<title> Contoh Code </title>
</head>
<body>
<style type="text/css">
/* Pemilihan attribute "id" harus di awali dengan tanda "sharp" atau "#", seperti penulisan di bawah ini. */
#backcolor {background:#552009;color:#ffffff;width:300px;height:100px;}
/* Pemilihan attribute "id" yang disertai dengan pemilihan "Element", Untuk contoh code pemilihan berdasarkan "Element" bisa lihat contoh di atas. */
div#paddingsepuluhborderdua {padding:10px;border:2px solid #66ff11;}
</style>
<div id="backcolor">
<div id="paddingsepuluhborderdua">
Ini contoh code dalam pemilihan css id.
</div>
</div>
</body>
</html>
Hasilnya :
Ini contoh code dalam pemilihan css id.
2. Pemilihan berdasarkan attribute
<!DOCTYPE html>
<html>
<head>
<title> Contoh Code </title>
</head>
<body>
<style type="text/css">
/* Pemilihan attribute "class" harus di awali dengan tanda "dot" atau "titik" atau ".", seperti penulisan di bawah ini. */
.backcolor {background:#ff9900;color:#000000;width:350px;height:100px;}
/* Pemilihan attribute "class" yang disertai dengan pemilihan "Element", Untuk contoh code pemilihan berdasarkan "Element" bisa lihat contoh di atas.*/
div.paddingsepuluhborderdua {padding:20px;border:5px solid #66ff11;}
</style>
<div class="backcolor">
<div class="paddingsepuluhborderdua">
Ini contoh code dalam pemilihan css class.
</div>
</div>
</body>
</html>
Hasilnya :
Ini contoh code dalam pemilihan css class.
Selesai dulu deh, kita lanjutkan ke tutorial berikutnya ya sobat...
