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

<div style='background-color: none transparent;'></div>
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.

4 komentar:

Cheat Game4u mengatakan...

terimakasih sekali sudah menjelaskan secara detail. ini menjadikan saya agak sedikit mengerti,,

Beben Koben mengatakan...

long time no see :D

kalo pemakaian uniquee ID or class tak bisa memakai angka loh!!! Ex:

#123 <- iki ora iso loh :D

pemanggilan ID hanya 1x, kalo class boleh bebas x ... wekekekkk

GlamFather mengatakan...

wow, mantap nih..
padahal saya udah sering ngoprek template CSS, tapi baru sekarang ngeh maksudnya DIV, SPAN, ID sama Class..
hahaha

salam kenal bang...

subcribe dulu ah.. :)

Franstyas Kurniawan mengatakan...

gan,, sebelumnya terima kasih atas tutorialnya,, saya mau tanya nih gan... misalnya kita mau membuat template blogspot dengan tiga kolom dengan posting di tengah trus diatas posting diberi element baru (gadget),tetapi setelah kita membuka salah satunya postingan dihalaman home , si widget tadi jangan sampai nampak itu gimana ya cara membuatnya dengan dreamweaver,,, kalo bisa minta video tutorialnya gan,, biar lebih mudah memahaminya,,,
seperti blog saya yang ini gan kasax-kusux.blogspot.com misalnya saya mau merubah yang dihalaman home itu kan ada slide , nah kalo saya ingin merubah slide itu jadi widget (element baru) gimana ya cara nya bikinnya di dreamweaver??? tolong ane ya gan,, sebelumnya saya ucapkan terima kasih!!!

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.