Minggu, 20 April 2014
Dalam Design Blog CSS (Cascading Style Sheet) memegang peran penting untuk memwujudkan imaginasi kita. CSS mengatur bentuk dan tampilan dari kode HTML, oleh karenanya sebagai seorang web designer kita perlu mengetahui dasar dari CSS tersebut agar tidak mengalami kesalahan dalam menuliskan kode CSS.
A. CSS Syntax
CSS memiliki dua bagian utama, yaitu Selector dan Declaration. Di dalam Declaration terdapat dua bagian, yaitu Property dan Value. Untuk lebih jelasnya bisa sobat lihat pada gambar dibawah ini:
B. CSS Comments
Terkadang kita membutuhkan keterangan dari CSS yang kita buat, tujuannya adalah untuk mengingatkan kita jika lupa mengenai CSS apa yang ditulis. Sobat pasti pernah melihat kode yang berawalan dengan tanda /* dan diakhiri dengan tanda */. Itulah yang disebut CSS Comment. Semua tulisan atau kode yang di tulis di dalam kode itu tidak akan terbaca oleh browser jadi kita bisa bebas menulis apa saja dalam lingkup kode itu, bisa berupa pesan atau peringatan.
untuk lebih jelasnya seperti inilah contohnya:
/* Ini adalah css body */
body {
background: #FFF;
color: #111;
margin: auto;
}
C. Selector ID and Class
Mungkin diantara sobat ada yang bingung membedakan yang mana Selector ID dan yang mana Selector Class. Okelah, mari kita bahas satu-persatu:
1. Selector ID
Selector ID digunakan untuk menentukan style elemen tunggal yang unik dari html. Unik disini artinya satu nama ID hanya bisa digunakan satu kali pada sebuah halaman web. Apabila satu nama ID digunakan lebih dari satu kali pada sebuah halaman, maka style hanya akan berlaku pada id yang pertama saja. Selector ID pada syntax CSS ditandai dengan pagar "#". Sedangkan penerapannya pada element HTML adalah dengan menggunakan id="nama CSS".
Contoh Selector ID:
#test-id {
text-align:left;
color:#000;
}
Penerapannya pada element HTML:
<div id="test-id">...</div>
2. Selector Class
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, Selector Class bisa dipakai berkali-kali pada sebuah dokumen HTML. Artinya sebuah nama Class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik "." . Sedangkan penerapannya pada element HTML adalah dengan menggunakan class="nama CSS".
Selector class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengan ID, Selector Class bisa dipakai berkali-kali pada sebuah dokumen HTML. Artinya sebuah nama Class dapat dipanggil beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class dituliskan dengan ditandai dengan tanda titik "." . Sedangkan penerapannya pada element HTML adalah dengan menggunakan class="nama CSS".
Contoh Selector ID:
.test-id {
text-align:left;
color:#000;
}
Penerapannya pada element HTML:
<div class="test-id">...</div>Oiya, jangan sekali-kali menggunakan angka pada awal selector baik ID maupun Class, karena beberapa browser tidak mendukung.
1 komentar:
Berikanlah komentar atau saran yang membangun agar DELOGIN dapat terus berkembang.
Sangat bermanfaat , sekarang jadi tau perbedaan nya div id dan div class.
terima kasih .