Mengenal Selector Id dan Class di CSS

Assalamu'alaikum Warahmatullahi Wabarakatuh..
     Pada tutorial kali ini Skripku Dotkom akan membahas tentang dasar CSS yang sangat penting untuk diketahui dan dipelajari yaitu terkait "Id dan Class".
     Pada dasarnya, untuk memberikan efek kepada sebuah objek dengan CSS itu cukup dengan menyebutkan tag HTML nya di selektor CSS. Contohnya seperti ini:

<html>
<head>
    <title>Skripku Dotkom - Belajar CSS</title>
    <style type="text/css">
    div {border: 1px solid black; background-color: Turquoise;width: 150px;height: 150px;}
    p {color: red;}
    </style>
</head>
<body>
    <div><p>Ini adalah sebuah persegi berukuran 150px</p></div>
</body>
</html>

     Namun, masalah yang sering kita hadapi adalah "bagaimana jika kita punya banyak tag yang sama dan ingin memberikan style yang berbeda-beda pada masing-masing tag tersebut?", nah untuk itulah diadakan Id dan Class di CSS. Apa sih perbedaan antara Id dan Class? Simak terus artikel ini yukk..

  • Id Selector
  •      Id Selector digunakan untuk menentukan style bagian unik (baca: nggak ada duanya) di HTML, misalkan bagian header, bagian artikel, bagian sidebar, atau bagian footer. Id Selector hanya bisa digunakan sekali dalam sebuah dokumen HTML, jika lebih dari 1 maka yang akan di proses hanya yang pertama saja. Sebetulnya masih bisa sih, tapi jika memang akan digunakan lebih dari 1 kali lebih baik kita menggunakan Class Selector saja. 
         Untuk menggunakan Id Selector ini, kita bisa menggunakan atribut id="nama_id" pada tag html-nya dan menggunakan #nama_id di CSS nya. Contoh-nya seperti ini:
    
    <html>
    <head>
        <title>Skripku Dotkom - Penggunaan Id Selector</title>
        <style type="text/css">
        #kotak_pertama {border: 1px solid black;border-radius: 5px;height: 100px;width: 100px;background-color: Turquoise;padding: 5px;float: left;}
        #persegi_panjang {border: 1px solid black;border-radius: 5px;height: 100px;width: 300px;background-color: Cyan;padding: 5px;float: left;margin-left: 10px;}
        </style>
    </head>
    <body>
        <div id="kotak_pertama">Ini Persegi berukuran 250px.</div>
        <div id="persegi_panjang">Ini adalah sebuah persegi panjang.</div>
    </body>
    </html>
    
    
    Maka hasilnya adalah:
    Ini Persegi berukuran 250px.
    Ini adalah sebuah persegi panjang.






  • Class Selector
  •      Class Selector ini adalah selector yang paling sering saya gunakan. Berbeda dengan Id Selector tadi, Class Selector ini bisa digunakan untuk mengatur banyak tag atau elemen didalam suatu web dan sebuah tag atau elemen bisa memiliki Class lebih dari 1. Contoh:
    
    <h1 class="warnamerah posisitengah">Nama Saya Azis</h1>
    
    
         Contoh diatas menunjukan bahwa tag tersebut memiliki 2 Class yaitu: Class warnamerah dan Class posisitengah. 
         Untuk menggunakan Class Selector ini caranya hampir sama dengan Id Selector, bedanya kita harus menggunakan atribut class="nama_class" pada tag html-nya dan menggunakan .nama_class di CSS-nya. Contoh implemementasi-nya seperti ini:
    
    <html>
    <head>
        <title>SkripKu Dotkom - Penggunaan Class Selector</title>
        <style type="text/css">
        .merah {color: red;}
        .garisbawah {text-decoration: underline;}
        .dicoret {text-decoration: line-through;}
        </style>
    </head>
    <body>
    <p class="merah">Text ini berwarna merah</p>
    <p class="garisbawah">Text ini bergaris bawah</p>
    <p class="merah garisbawah">Text ini berwarna merah dan bergaris bawah</p>
    <p class="dicoret">Text ini dicoret.</p>
    <p class="merah dicoret">Text ini berwarna merah dan dicoret</p>
    </body>
    </html>
    
    
    Maka hasilnya adalah:
    Text ini berwarna merah
    Text ini bergaris bawah
    Text ini berwarna merah dan bergaris bawah
    Text ini dicoret.
    Text ini berwarna merah dan dicoret

     Selain kedua Selector diatas, sebetulnya masih banyak Selector yang ada di CSS diantaranya: Attribute Selector, Pseudo Selector, dll. Tapi karena kebetulan saya juga belum mempelajarinya lebih dalam, jadi Insya Allah akan dibahas lain kali lagi. Lagian, sepengalaman saya kedua Selector ini lah yang paling umum dan paling sering digunakan.
Sekian dari saya,
Kurang dan lebihnya mohon dimaafkan,
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

2 komentar

Betul. Jika ada 2 atau lebih id dalam sebuah web, walaupun masih bisa tapi tetep tidak baik. Lebih baik pake class saja. Saya kalau buat web, walaupun itu unik seperti header atau sidebar saya tetep suka pake class

Sama saya juga gitu gan, soalnya buat ngetik tanda pagar (#) itu harus mencet shift + 1, jadi intinya saya males mencet shiftnya aja sih gan. Kalau titik kan cukup sekali pencet :ng


EmoticonEmoticon