Tutorial Belajar CSS Part 5 – Cara Penulisan Selector CSS
Jika dalam tutorial sebelumnya kita telah belajar mengenai beberapa jenis dari selector CSS, seperti Universal Selector, Element Type Selector, Class Selector, ID Selector, dan Attribute Selector yang merupakan selector yang sering digunakan untuk memanipulasi tampilan kode html, nah dalam tutorial kali ini kita akan membahas mengenai bagaimana cara menggunakan beberapa selector secara bersamaan agar struktur html yang akan kita beri css bisa lebih spesifik.
Video Tutorial Belajar CSS – Cara Penulisan Selector CSS
Dalam tutorial sebelumnya memang kita telah belajar beberapa contoh dari penggunaan selector, tetapi hanya menggunakan satu selector saja, dalam contoh ini kita akan menggabungkan beberapa selector menjadi satu, baik langsung saja perhatikan contoh skrip HTML dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <title>Belajar Selector CSS</title> </head> <body> <h2 class="judul">Belajar CSS Mudah di <a href="https://warungbelajar.com">Warung Belajar</a></h2> <p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p> <p id="warungbelajar"> <a href="https://www.warungbelajar.com">Warung Belajar</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p> <p class="penjelas">beberapa materinya antara lain :</p> <h3>Materi HTML</h3> <table id="daftar_html" border="1"> <tr> <th>No</th> <th>Pembahasan</th> </tr> <tr> <td>1</td> <td>Belajar HTML Part 1 Mengenal HTML</td> </tr> <tr> <td>2</td> <td>Belajar HTML Part 2 Membuat File HTML</td> </tr> <tr> <td>3</td> <td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td> </tr> </table> <h3>Materi CSS</h3> <table id="daftar_css" border="1"> <tr> <th>No</th> <th>Pembahasan</th> </tr> <tr> <td>1</td> <td>Belajar CSS Part 1 Mengenal Fungsi CSS</td> </tr> <tr> <td>2</td> <td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td> </tr> <tr> <td>3</td> <td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td> </tr> </table> </body> </html> |
dalam skrip diatas telah ada skrip html, beberapa bagian dari struktur html tersebut akan kita beri skrip CSS dengan mode internal style, baik kita akan buat beberapa contoh penggunaan dari selector css :
Tag h2 dan h3 menjadi warna biru
Anda bisa menuliskan selectornya satu persatu seperti berikut ini :
|
1 2 3 4 5 6 7 8 |
h2 { color:blue; } h3 { color:blue; } |
tetapi karena property dan value sama, sehingga anda bisa menuliskan seperti berikut ini :
|
1 2 3 4 |
h2,h3 { color:blue; } |
Tag <strong> pada tag <p>
pada paragraf pertama, terdapat tag <strong> yang mengapit tulisan CSS, itu akan kita rubah ukuran fontnya menjadi 20px, maka skrip cssnya adalah seperti berikut ini :
|
1 2 3 4 |
p strong { font-size:20px; } |
selector yang kita tulis adalah tag selector p dan strong
Tag <em> pada tag <p>
pada paragraf pertama terdapat tag <em> kita akan merubah warna textnya menjadi merah, maka skrip cssnya adalah :
|
1 2 3 4 |
p em { color:red; } |
selector yang kita tulis adalah tag p dan em
Text dengan menggunakan ID warungbelajar pada tag <p>
pada paragraf kedua kita menggunakan attribute id dengan value warungbelajar kita akan merubah warnanya menjadi warna merah, maka skrip cssnya adalah :
|
1 2 3 4 |
p#warungbelajar { color:red; } |
selector yang kita gunakan adalah tag selector p dan id selector “warungbelajar”
Text dengan menggunakan class penjelas pada tag <p>
pada paragraf ketiga yang menggunakan class=”penjelas” kita akan merubah warnya menjadi warna hijau
|
1 2 3 4 |
p.penjelas { color:green; } |
selector yang kita gunakan adalah tag selector p dan class selector “penjelas”
Attribute [href] pada paragraf kedua
Kita akan merubah warna link, pada paragraf kedua, maka kita gunakan perpaduan attribute selector, id selector dan tag p, skrip cssnya sebagai berikut :
|
1 2 3 4 |
p#warungbelajar [href] { color:orange; } |
selectorny yang digunakan adalah tag selector p, id selector “warungbelajar” dan attribute selector [href], jika anda hanya menggunakan attribute selector saja, seperti ini :
|
1 2 3 4 |
[href] { color:orange; } |
maka link yang berada di tag <h2> juga akan berubah, karena itu gunakan beberapa selector agar menjadi lebih spesifik untuk href yang akan kita rubah warnanya.
Table dengan ID daftar_html
kita akan merubah warna background pada tabel yang menggunakan id=”daftar_html”, maka skrip cssnya sebagai berikut :
|
1 2 3 4 |
table#daftar_html { background-color:#ccc; } |
selector yang kita gunakan adalah tag selector table dan id selector “daftar_html”.
Nah sudah ada beberapa contoh penggabungan selector css untuk merubah tag HTML, ini adalah keseluruhan kode HTML dan cssnya, untuk css kita menggunakan mode internal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS</title> <style type="text/css"> h2,h3 { color:blue; } p strong { font-size:20px; } p em { color:red; } p#warungbelajar { color:red; } p.penjelas { color:green; } p#warungbelajar [href] { color:orange; } table#daftar_html { background-color:#ccc; } </style> </head> <body> <h2 class="judul">Belajar CSS Itu Mudah di <a href="https://warungbelajar.com">Warung Belajar</a></h2> <p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p> <p id="warungbelajar"> <a href="https://www.warungbelajar.com">Warung Belajar</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p> <p class="penjelas">beberapa materinya antara lain :</p> <h3>Materi HTML</h3> <table id="daftar_html" border="1"> <tr> <th>No</th> <th>Pembahasan</th> </tr> <tr> <td>1</td> <td>Belajar HTML Part 1 Mengenal HTML</td> </tr> <tr> <td>2</td> <td>Belajar HTML Part 2 Membuat File HTML</td> </tr> <tr> <td>3</td> <td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td> </tr> </table> <h3>Materi CSS</h3> <table id="daftar_css" border="1"> <tr> <th>No</th> <th>Pembahasan</th> </tr> <tr> <td>1</td> <td>Belajar CSS Part 1 Mengenal Fungsi CSS</td> </tr> <tr> <td>2</td> <td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td> </tr> <tr> <td>3</td> <td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td> </tr> </table> </body> </html> |
semisal kita beri nama cara_penulisan_selector_css.html lalu kita buka di browser :
Bagimana mudah bukan cara menggabungkan beberapa selector CSS, dengan cara ini anda sudah bisa memilih struktur HTML mana yang ingin dirubah dengan lebih spesifik, baik sekian dulu yang dapat warung belajar bahas dalam tutorial cara penulisan selector CSS, sampai jumpa di tutorial CSS lainnya.
