CSS Tutorial: ID Tags VS Class Tags(Versi Khusus)

Halo sobat,

Kali ini saya posting sesuai dengan permintaan teman saya di kotak komentar yaitu "Penjelasan Detail Id Tags Dan Class Tags". Pertanyaan teman saya CheatGame4U seperti ini:

Untuk itu saya buat tutorialnya seperti dibawah ini:

Penjelasan Detail ID Tags

Seperti yang sudah saya jelaskan sebelumnya, Untuk ID tags awalnya selalu ditandai dengan tanda "#" dan setelah itu anda bebas memilih variabel apa saja. Contoh:
Saya ingin membuat menu, nah anda bisa memberikan variabel apa saja setelah pagar:

#menu_atas{}
#menusaya{}
#list_atas{}

Pada saat penulisan css sebagai selector. Anda tidak boleh menuliskan spasi seperti ini:

#menu saya{}

Mengapa? Karena tidak akan terbaca oleh css tersebut. Lalu bagaimana dengan kasus yang ini:

#menu #navigasi a{}

Sebenarnya itu hanya penegasan saja, dimana saya tegaskan bahwa selector navigasi ada di dalam selector menu. Anda bisa saja menuliskan seperti ini:

#navigasi a{}

Sekarang anda pasti bertanya lagi? Kok ada a{} fungsinya untuk apa?
Didalam bahasa css ada selector general seperti dibawah ini:

p : Untuk menyeleksi paragraf.
li: Untuk menyeleksi list.
ul: Untuk menyeleksi tag HTML ul.
a: Untuk menyeleksi Link.
a:hover: Untuk menyeleksi link yang dilalui mouse.
dan masih banyak lagi.

Saya kasih contoh biar lebih jelas, misalkan saya ingin paragraf yang berada di dalam selector posting mempunyai ukuran font 16px. Maka saya membuat cssnya seperti ini:

#posting{font-size:9px;}
#posting p{font-size:16px;}

Untuk pemanggilan CSSnya seperti ini:

<div id="posting"><p>Ini paragraf yang terpengaruh p</p></div>

Lihat, saya menambahkan tag html p. Sehingga tag HTML tersebut akan mempunyai ukuran font 16px.

Jika anda memanggilnya tanpa p seperti ini.

<div id="posting">Ini paragraf yang tidak terpengaruh p</div>

Sekarang timbul pertanyaan lagi, saya sering melihat css seperti ini:

#posting,#sidebar{}

Bagaimana jika seperti itu, jika anda menemukan css seperti ini berarti command pada selector posting sama saja dengan sidebar. Misalkan posting mempunyai huruf 16px berarti itu berlaku juga pada sidebar.
Sekarang sudah mengerti kan? Bagaimana dengan class?

Penjelasan Detail Class Tags.

Untuk Class mungkin anda akan sering melihat kode seperti ini di blogspot:

.sidebar .widget{font-size:16px;color:#ccc;}

Jika anda menemukan kode seperti ini. Berarti yang terseleksi adalah Widget yang berada di dalam selector sidebar. Atau seperti ini:

<span class="sidebar">
Tulisan yang tidak terpengaruh.
 <span class="widget">Tulisan yang terpengaruh</span>
</span>

Span adalah pengganti div dan hanya berlaku pada class tags.
Untuk permasalahan lainnya sama dengan ID tags.
Jika ada yang mau di tanyakan tanya aja langsung melalui komentar. Pasti dibalas kok.