Tips Jitu Membuat CSS Selector ID Dan Class Dengan Mudah

Tutorial blogger - Dalam dunia blogging tidak lepas kaitannya dengan membuat style css ID maupun CLASS dalam html. Mungkin masih ada sebagian para blogger pemula yang kesulitan membuat selector class maupun id apalagi cara penggunaannya.
Namun yang belum mengetahui tentang selector id dan class tidak perlu khawatir.

Dalam artikel ini akan bersedia membantu mengupas pengertian id dan class. Serta cara membuat selector CLASS dan ID dalam css untuk blogger pemula dengan mudah. Dan juga disertai cara penggunaannya.

Selector class dan id memiliki peran cara penggunaan yang berbeda. Para blogger pemula harus lebih cermat dan tahu persis dalam membedakan selector class dan id.

Sebelum memulai membuat css selector class dan id, kita harus mengetahui pengertian dan fungsinya masing-masing selector.

Pengertian Serta Fungsi Selector ID Dan CLASS

~ Selector ID

ID merupakan jenis selector yang dapat digunakan hanya untuk satu elemen / dipanggil satu kali dalam setiap tag html.

Sebagai gambaran kita ambil contoh dalam dunia sekolahan lingkup kabupaten. Misalnya dalam Kabupaten ngawi terdapat beberapa nama sekolah SMAN 1 NGRAMBE, SMAN 45 NGAWI dan lain sebagainya. Nah nama  SMAN 1 NGRAMBE tidak dapat digunakan untuk nama sekolah lain di kabupaten Ngawi karena itu merupakan sebuah ID.

Perlu diingat dalam penulisan kode css id diawali dengan tanda "#" (tanpa tanda kutip).

Berikut ini sobat perhatikan contoh-contoh id dan class.

~ Cara penulisan css untuk selector id.

#posting {
   border : solid 1px red;
   color : blue;
   padding:  10px;
   height: 60px;}

#footer {
   border : solid 2px grey;
   color : brown;
   height : 50px;
   padding : 10px; }

~ Cara penggunaan selector id pada html.

<div id="posting"> Tempat konten anda dalam id posting </div>

<div id="footer"> Tempat konten anda dalam id footer </div>

~ Hasilnya selector ID seperti dibawah ini.

Tempat konten anda dalam id posting.
Tampilannya seperti ini dengan format warna biru.

Tempat konten anda dalam id footer

 ~ Selector CLASS

Class merupakan jenis selector yang dapat digunakan lebih dari satu elemen dalam setiap tag html /  dapat digunakan secara grup. Selector class ditulis dengan awalan tanda titik (.).

Misalnya "class tebal" dapat ditulis .tebal. Penamaan class dapat ditulis sesuai kesukaan sobat. Selector class  .tebal dalam satu laman web/blog dapat digunakan untuk banyak widget header, posting, footer.

~ Penulisan CSS Selector Class

.tebal { font-weight : bold; border: 2px solid green;}

.brown { color:brown; border: 1px solid yellow;}


~ Cara Menggunakan Selector Class Dalam HTML.

<p class="tebal"> Disini tempat kontennya sobat dengan format tebal dan border 2 piksel warna hijau. </p>


<p class="brown"> Disini tempat kontennya sobat dengan format paragrap warna coklat dan border 1 piksel warna kuning </p>

Hasil preview yang dari selector class seperti dibawah ini.

Disini tempat kontennya sobat dengan format tebal dan border 2 piksel warna hijau.

Disini tempat kontennya sobat dengan format paragrap warna coklat dan border 1 piksel warna kuning .

Demikian artikel " Tips Jitu Membuat CSS Selector ID Dan Class Dengan Mudah " semoga dapat membantu. Serta temukan artikel lainnya yang berkaitan.