Perbedaan ID dan CLASS pada CSS
Perbedaan ID dan CLASS pada CSS

Mengetahui Perbedaan ID dan Class pada CSS – Dalam HTML, ada yang namanya selector. Ada yang sudah default, yaitu bawaan dari pembuat & pengembangnya. Namun kalian juga bisa membuat selector sendiri. Ada dua jenis selector pada HTML, yaitu  ID dan Class. Pada tulisan kali ini kita akan memahami perbedaan ID dan Class pada CSS.

Baca juga: Mengapa Belajar Python?

Ketika kita membuat elemen <div>, maka ada saatnya kita menggunakan id tag <div id="namadiv"> , dan ada kalanya saat kita menggunakan class tag <div class="namadiv">. Apa  beda di antara keduanya?

Perbedaan ID dan Class pada CSS

ID

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html.

  • Setiap elemen hanya dapat memiliki satu tag id.
  • Dalam satu halaman tidak boleh ada dua penamaan id yang berbeda

Jangan sampai kita menggunakan penamaan id lebih dari satu kali dalam satu penyajian halaman website. Apabila kalian mau coba, kalian boleh saja menamakan dua elemen dengan tag id yang sama, lalu akan kalian temukan salah satu dari elemen tersebut akan menolak setting CSS yang kalian berikan.

Contoh penulisan:
[css]
#box-codelatte {
text-decoration: none;
border: none;
border-style: none;
box-shadow: none;
}[/css]
Penggunaan nya pada HTML:
[html]

[/html]

CLASS

Class merupakan selector yang dapat kita digunakan oleh lebih dari satu tag html. Artinya beberapa tag html bisa menggunakan css dari class tersebut.

  • Tag class dengan nama yang sama dapat dipakai berulang-ulang pada satu halaman.
  • Satu elemen boleh memiliki lebih dari satu Class yang berbeda-beda.

Apabila kalian memiliki elemen yang banyak dan ingin menerapkan styling yang sama untuk setiap objek atau elemen tersebut, gunakan tag class.

Contoh penulisan:
[css]
#p-codelatte {
text-decoration: none;
font-size: 14pt;
}[/css]
Penggunaan nya pada HTML:
[html]

[/html]
Saya kira cukup untuk Perbedaan ID dan Class pada CSS, semoga bermanfaat dan sampai jumpa di artikel berikutnya.

Kalian punya template portfolio keren yang ingin kalian publikasikan? Submit karya kalian di Codelatte Archive. Code Archive menyediakan media untuk ide kreatif berupa portfolio dari desainer & developer yang tidak kalah kreatif pula.

5 CommentsClose Comments

5 Comments

  • Andri Tany
    Posted 14 July 2018 at 1:52 AM

    Awalnya, saya kira penggunaan tanda (#) dan (.) didepan code CSS tidak ada perbedaannya XD
    Ternyata, code itu yang menentukan apakah code tersebut adalah ID atau Class. Terima kasih untuk Ilmu-nya mas

  • Nhiet Phang
    Posted 9 August 2018 at 12:01 AM

    You ought to take part in a contest for one of the most useful
    blogs on the net. I will recommend this blog!

  • Agus
    Posted 13 September 2019 at 1:09 AM

    Artikel,epic .bener bermanfaat

  • Rama
    Posted 30 November 2019 at 9:36 AM

    Sorry nih min

    Mengenal Class dan Id pada HTML | http://www.malasngoding.com


    kotak 1
    kotak 2
    kotak 3


    Kotak 4
    Kotak 5

    h1{
    color: orange;
    font-family: sans-serif;
    text-align: center;
    }

    .kotak{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: orange;
    }

    #kotak{
    width: 400px;
    color: #fff;
    background: blue;
    padding: 50px;
    margin: 10px;
    }

    Kok hasilnya sama ?
    Kan class sama id itu beda, cuman style nya doang yg di samain

  • Ari Prasetyawan
    Posted 8 December 2019 at 12:48 PM

    id juga tidak bisa memanggil 2 sekaligus ya kak, kalau class kan bisa manggil nama class banyak dalam 1 atau elemen lainnya gitu hehe

Leave a Reply