Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML

Class dan ID merupakan dua dari beberapa model selektor pada CSS untuk memberikan manipulasi tampilan dari HTML.

Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML

Selektor css lain tidak kita bahas pada artikel ini agar fokus dan tidak terlalu bingung nantinya, jadi cukup class dan ID dulu.

Sebelum ke pembahasan lebih lanjut kita refresh kembali apa itu selektor ...... ?

Selektor merupakan kode atau simbol dari CSS yang digunakan untuk menyeleksi atau memilih elemen pada HTML. Untuk apa dipilih .... ?, tentu saja untuk membatasi elemen mana yang akan dilakukan manipulasi atau diberi style dengan kode atau syntax dari CSS.

Dalam pengaplikasiannya Class dan ID memiliki fungsi yang sama namun terdapat ketentuan yang berbeda antara satu dengan lainnya sebagai selektor. Untuk lebih jelasnya kita bahas satu persatu.

Selektor Class (Class Selector)

Class merupakan selektor CSS yang dipakai untuk memilih elemen html sesuai dengan class name tertentu  yang telah di tentukan.

Untuk memberikan style pada element html Selektor class dipanggil dalam css dengan menggunakan tanda titik yang diikuti dengan nama class ( " .NamaClass " ) dan dengan penulisan  ( " class="NamaClass" " ) pada element html.

Class Selector dapat digunakan berulang ulang pada beberapa elemen dengan class name yang sama dan uniknya dapat dipanggil sekaligus pada syntax CSS.

Lebih jelasnya perhatikan contoh berikut :

#Penulisan Selektor Class pada html :

<h1 class="tehno">Selamat Datang Sobat Tehnosia</h1>
<h3 class="tehno">Berikut Cara Penerapan Class</h3>
<p>Belajar Selektor Class <b class="tehnosia">Pada CSS</b> bersama www.tehnosia.com.</p>

#Penulisan Selektor Class pada CSS :

.tehnosia {
  color: white;
  background: #00d4db;
  padding: 2px;
}

.tehno {
    color:black;
    text-align:center;
    }

#Hasil yang ditampilkan :

 
Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML
Selektor Class

Not : jika sobat belum tau penempatan css pada kerangka html boleh baca artikel ini terlebih dahulu biar ga bingung : Cara Penempatan CSS Pada Kerangka HTML


Selektor ID (ID Selector)

ID boleh dikatakan sebagai selektor yang terbatas, dalam artian hanya dapat digunakan sekali saja pada satu element html.

Untuk memberikan style pada element html Selektor ID dipanggil dalam css dengan menggunakan tanda pagar yang diikuti dengan nama ID ( " .NamaID " ) dan dengan penulisan  ( " id="NamaID" " ) pada element html.

Bingung .... ? 😁 mari lihat contoh berikut :  

#Penulisan Selektor ID pada html :

<p><b id="tehnosia">Belajar Selektor ID</b> pada CSS bersama www.tehnosia.com.</p>

#Penulisan Selektor ID pada CSS :

#tehnosia {
  color: white;
  background: #00d4db;
  padding: 2px;
}

#Hasil yang ditampilkan :

Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML
Selektor ID

Jika sudah paham pemaparan diatas, sekarang mungkin sobat tehnosia berfikir kelebihan selektor class yang bisa dipakai berkali kali dan juga kekurangan  selektor ID yang terbatas dalam pemakaiannya.


Tapi tunggu dulu ........ !!! ada satu kelebihan ID yang tidak dalapat dilakukan oleh class, apa itu .....?

ID dan tagar "#" Digunakan Dalam Pembuatan Link Anchor

Apa itu Anchor..... ?
Simpelnya anchor adalah jangkar yang berfungsi untuk menautkan sesuatu, seperti jangkar pada kapal laut untuk menahan agar tidak terbawa gelombang saat bersandar di dermaga.

Dalam sebuah kerangka html, anchor berfungsi untuk menautkan. Jadi, link anchor merupakan sebuah link yang di buat untuk scrowling atau menuju ke element tertentu, baik dalam satu dokumen maupun dengan dokumen lainnya yang berbeda.

Lalu apa fungsi "id" disini ..... ?

Fungsi id disini untuk menseleksi (menentukan) kemana tujuan anchor yang di buat.

Berikut cara membuat link anchor :

Isi nama link anchor dengan di awali tanda tagar ( # ), seperti dibawah ini :

<a href="#linkanchor">Menuju ke Tujuan Anchor</a>

 
Buat tujuan anchor dengan diawali "id", seperti contoh dibawah :

<h2 id="linkanchor">Tujuan Anchor</h2>

Perhatikan tulisan yang berwarna merah yang dituliskan setelah tagar "#" dan id merupakan nama anchor, penulisan nama boleh apa aja sesuai keinginan sobat tehnosia, namun keduanya harus sama sehingga tertaut antara link dengan tujuan anchornya. 

Untuk penempatan link dan tujuan anchor juga disesuaikan dengan kebutuhan, contoh diatas tujuan anchor adalah heading 2, jadi tempatnya bisa berubah dan disesuaikan.

Sekian pembahasan tentang selektor class dan id, semoga bermanfaat, Jika ada pengalaman boleh share di kolom komentar, sukses selalu buat sobat tehnosia.
Tehnosia Web
Tehnosia Web Bukan Blogger Master, hanya seorang Newbie yang senang seputar "Gadget" dan "Technology". Belajar ngeblog secara otodidak
Tertap Terhubung dengan Kami
Face Book-IG-Twitter
! Support Kami Di !
Trakteer Kami

Posting Komentar untuk "Mengenal Class dan ID Sebagai Selector CSS Pada Kerangka HTML"