Belajar HTML dan CSS part 5

Pengorganisasian html dan css

Pada pelajaran sebelumnya telah djelaskan sedikit mengenai css,Serta bagai mana pengempelmentasian.Saya berharap kalian bisa memahami apa yang telah saya jelaskan.pada pemebelajaran sebeumnya.Sayangnya pada pembelajaran kemarin kita belum mampu menargetkan properti secara akurat.Untuk meluruskan semua permasalahan yang terjadi saya akan membantu kalian.

Selector id dan class

Dalam html ada yang namanya selector.Ada yang sudah default dari sananya dan ada juga yang bisa kalian buat sendiri.Ada dua jenis selector dalam html yaitu id dan class.

• Selector id.selector id merupakan bagian yang hanya ada satu pada halaman dan juga menentukan style nya.Karena hanya bisa di panggil satu.Jadi tak bisa di panggil lebih dari satu.Selector bisa link pada section pada satu halaman.Misalkan kalian membuat navigasi dengan selector id="home".maka kalian akan di bawa ke section home pada satu halaman.Selector id menggunakan tanda pagar "#" untuk menggukannya pada html menggunakan <div id="nama_section nya"> Contoh:

<div id=”konten”> </div>

• Selector Class adalah selector yang berfungsi sama seperti id yaitu menentukan style.Bedanya selector id hanya bisa di gunakan sekali saja,Sementara selector class bisa di digunakan secara berkali-kali..

Contoh pada html:

<div class=”konten kontak”> Menggunakan selector class </div>

Contoh pada css:

.konten {      width: 23px;      height: 21px;      font-family: lucida; } .kontak {      text-decoration: none;      font-size: 12px; }

Perhatikan gambar di samping.

Saya akan menjelaskan apa maksud gambar ini:Gambar di atas berhubungan dengan tata cara penulisan css.

1. Selector di tempatkan pada bagian awal penulisan di atas.
2. CSS bisa menggunakan lebih dari satu selector sekaligus.Dengan menggunakan tanda koma "," Sebagai pemisahnya.
3. Jika property memiliki dua kata.Maka gunakan tanda hubung (-)
4. Gunakan titik koma (;).Untuk mengakhiri sebuah property.
5. Setelah penulisan selector gunakan kurung buka kurawal "{" dan jika telah selesai tutup dengan kurung tutup kurawal.

Selesai kita lanjutkan pada tutorial sendiri