CSS yang memiliki kepanjangan Cascading Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Perkembangan CSS sendiri diawali pada tahun 1996, diman W3C (World Wide Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbaharui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbaharui lagi.
Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser, tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja.
Keuntungan Penggunaan CSS
Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda.
Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font-nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan.
sintak nya adalah seperti ini :
h1, h2, h3 { properti1, value1;
properti2, value2;
properti3, value3;
}
Contoh :
Ada 2 jenis CSS, yakni Selektor ID dan Class
Perbedaan Selektor ID dan Class
Selain menggunakan elemen HTML sebagai selektor pada CSS, kita bisa menggunakan selektor yang kita buat sendiri. Selektor ini selanjutnya bisa kita pakai pada elemen-elemen dalam HTML dengan cara memanggilnya. Ada dua selektor yang bisa kita buat yakni ID dan Class.
2.1. Selektor ID
Selektor ID digunakan untuk menentukan style bagian unik dari HTML. Unik di sini 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. Selektor ID pada syntax CSS ditandai dengan “#”.
Contoh :
2.2. Selektor Class
Selektor Class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengnan ID, selektor class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemn yang ada pada sebuah halaman web. Selektor class dengan ditandai dengan tanda titik “.”.
Contoh :
Perkembangan CSS sendiri diawali pada tahun 1996, diman W3C (World Wide Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan CSS2 yang diperbaharui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbaharui lagi.
Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser, tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja.
Keuntungan Penggunaan CSS
Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda.
Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font-nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan.
sintak nya adalah seperti ini :
h1, h2, h3 { properti1, value1;
properti2, value2;
properti3, value3;
}
Contoh :
Ada 2 jenis CSS, yakni Selektor ID dan Class
Perbedaan Selektor ID dan Class
Selain menggunakan elemen HTML sebagai selektor pada CSS, kita bisa menggunakan selektor yang kita buat sendiri. Selektor ini selanjutnya bisa kita pakai pada elemen-elemen dalam HTML dengan cara memanggilnya. Ada dua selektor yang bisa kita buat yakni ID dan Class.
2.1. Selektor ID
Selektor ID digunakan untuk menentukan style bagian unik dari HTML. Unik di sini 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. Selektor ID pada syntax CSS ditandai dengan “#”.
Contoh :
2.2. Selektor Class
Selektor Class digunakan untuk menentukan style dari sebuah group elemen. Berbeda dengnan ID, selektor class bisa dipakai berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil beberapa kali pada elemen-elemn yang ada pada sebuah halaman web. Selektor class dengan ditandai dengan tanda titik “.”.
Contoh :
Tag :
CSS
0 Komentar untuk "Pengenalan CSS"