Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

Pemakaian dan perbedaan Selector ID dan Class pada CSS

ID,ClassCoba anda bayangkan jika anda mau merubah tampilan tag <p> dan tampilannya berlainan semisal untuk font ,anda bisa menentukan tag <p> di CSS tetapi jika pada penulisannya p {font-family:arial} maka semua tag <p> akan dirubah menjadi font Arial semua.

Bagaimana jika salah satu  pada Tag <p> anda menginginkan Font nya dirubah menjadi Verdana, untuk itu anda membutuhkan Selector.

Untuk kali ini kita membahas selector ID dan selector Class yang sering digunakan dan coba kita pelajari juga perbedaan antara Selector Id dan Selector Class.

  • Selector ID

Untuk selector ID pada Tag HTML yang akan diberi selector akan diberi nama ID berikut contohnya:

<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p id=”namaid”>Pemakain Selector ID pada CSS akan memakai Atribut #
</p>
</body>
</html>

Setelah menentukan ID nya semisal “namaid” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector # berikut contohnya :

Pada file CSS :

#namaid{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}

  • Selector Class

 

Sama seperti pemakaian selector ID, selector class juga meminta tanda pada Tag HTML dengan nama class berikut ini contohnya:

<html>
<head>
<title>Pemakaian Selector ID dan Selector Class pada CSS</title>
<link href=”css/style.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<p>
Pemakaian Selector ID dan Selector Class pada CSS
</p>
<p class=”namaclass”>Pemakain Selector CLASS pada CSS akan memakai Atribut (.)
</p>
</body>
</html>

Setelah menentukan CLASS nya semisal “namaclass” (anda bebas menentukannya) , maka pada file CSS anda menggunakan selector (.) atau titik/dot berikut contohnya :

Pada file CSS :

.namaclass{
font-family:Verdana;
color:#3300FF;
font-size:16px;
font-weight:bold;
}

Kelihatannya hampir sama ya untuk penggunaan selector ID dan Class, mari kita bahas perbedaanya…

Perbedaan antara Selector ID dan Selector Class

Perbedaan antara pengunaan selector ID dan Class adalah:[ad#ad-2]

  • Jika pada selector ID anda tidak bisa menambahkan lebih dari 1(satu)nama ID pada Tag HTML
  • Pada selector Class anda bisa menaruh lebih dari satu atau berapapun yang anda butuhkan.

Jadi kesimpulannya untuk selector ID digunakan untuk pengaturan yang spesifik pada Tag HTML.

Bagaimana anda sudah mengerti tentang penggunaan dan perbedaan penggunaan Selector Id dan Selector Class.

Silahkan anda berkomentar dan bertanya jika kurang jelas.


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

 

5 Comments
  1. Pak Rudy,,,

    Selector Class bisa lebih dari satu ya? Cara penulisan di Tag-nya gimana tuh? Kasih tahu dong…

    Thanks,
    asanoer

    • Betul, class bisa dibuat lebih dari satu.
      Penjelasannya lebih detail silahkan download ebook tentang CSS di blog ini.

  2. buat penamaan class sendiri gak terlalu pengeruh pada penggunaan tag html ya itu sendiri ya

Leave a Reply



*