Senin, 29 Maret 2010

Dasar-dasar CSS #2

Melanjutkan pembahasan dasar-dasar CSS yang lalu, kali ini saya ingin membahas tentang selector. Tetapi sebelum kita menuju bahasan utama, ada baiknya kita berbasa-basi dulu. Ibarat lagu, jangan langsung ke reffrainnya.

Ok, kita mulai basa-basinya. Saya membuat blog baru, bertajuk "Tips N' Trik Blogging". Jangan lupa ya kunjungi di alamat http://tipntrikblogging.blogspot.com/. Maklum masih baru jadi belum ada tutorialnya sama sekali. Tapi saya mengundang 10 orang untuk menjadi guest blogger. Silahkan kirim saya E-mail (di link E-mail me), lalu anda akan menerima E-mail dari Blogger, silakan ikuti langkah-langkah selanjutnya.

Sudah cukup basa-basinya, sekarang kita ke bahasan pokok. Ada beberapa macam sselector. Diantaranya:

1. Class selector

Class selector adalah selector yang boleh diulang-ulang, dan cara penulisannya dengan cara menambahkan tanda titik (.) diikuti dengan nama classnya. Contoh:
.namaclass{color:blue}
Dan cara pengaplikasiannya adalah dengan menggunakan atribut class="...". Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
.namaclass{color:blue;}
-->
</style>
</head>
<body>
Ini adalah teks biasa.
<div class="namaclass">
Ini adalah teks dengan class selector "namaclass".
</div>
</body>
</html>
2. ID selector.

ID selector adalah selector yang hanya bisa dipakai untuk satu elemen, dengan kata lain, tidak boleh diulang-ulang. Cara penulisannya adalah dengan menuliskan tanda kres/pagar (#) sebelum nama selector. Contoh:
#namaid{background:black;color:white;}
Lalu cara pengaplikasiannya adalah dengan menambahkan atribut id="...". Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
#namaid{background:black;color:white;}
-->
</style>
</head>
<body>
Ini adalah teks biasa.
<div id="namaid">
Ini adalah teks dengan id selector "namaid".
</div>
</body>
</html>
3. Tag selector

Tag selector adalah selector yang diaplikasikan kepada tag yang menjadi nama selectornya. Contoh:
body{background:black;}
Anda tidak perlu menambahkan atribut tertentu untuk membuatnya bekerja karena secara otomatis akan diaplikasikan kepada tag yang dijadikan nama selectornya. Pada contoh diatas, berarti tag <body> akan berlatar belakang hitam. Secara lengkap seperti ini.
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
body{background:black;}
-->
</style>
</head>
<body>
Body akan berlatar belakang hitam.
</div>
</body>
</html>
4. Pseudo class

Ada beberapa pseudo class. Yaitu:
  • active: Properti untuk link/sesuatu yang sedang diklik.
  • hover: Properti untuk link/sesuatu ketika kursor mouse berada di atasnya.
  • visited: Properti untuk link yang sudah dikunjungi.
Cara menulisnya adalah:
(tag/id/class selector):pseudo class{properti:nilai;}
Contoh:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
a{color:blue;}
a:active{color:red;}
a:hover{color:green;}
a:visited{color:purple;}
.contohcss{background:lime;}
.contohcss:hover{background:yellow;}
#contohcss2{color:blue;}
#contohcss2:hover{color:purple;}
-->
</style>
</head>
<body>
<a href="#">Link 1</a><br/>
<a href="#">Link 2</a><br/>
<a href="#">Link 3</a><br/>
<div class="contohcss">
Ini adalah teks dengan class "contohcss".
</div><br/>
<div id="contohcss2">
Ini adalah teks dengan id "contohcss2".
</div>
</body>
</html>
Catatan:

Pada Internet Explorer, pseudo class dengan selector selain a tidak didukungnya.

Kontekstual selector

Kontekstual selector adalah kondisi dimana selector akan diaplikasikan kepada selector yang konteksnya tepat (nggak mudeng yak? bingung juga...). Contoh:
b i{color:blue;}
Contoh lengkapnya:
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!--
b{color:blue;}
i{color:green;}
b i{color:purple;}
i b{color:orange;}
#css1{background:green;}
#css1 #css2{background:purple;}
#css1 #css2 #css3{background:yellow;}
-->
</style>
</head>
<body>
<b>Warna teks ini akan biru</b><br/>
<i>Warna teks ini akan hijau</i><br/>
<b><i>Warna teks ini akan ungu</i></b><br/>
<i><b>Warna teks ini akan jingga</b></i><br/>
<b>yang ini akan biru <i>kecuali yang ini</i> yang tadi berwarna ungu</b>
<div id="css1">
Warna latar belakang akan hijau
<div id="css2">
Nah, kalau yang ini akan berwarna ungu
<div id="css3">
Yang ini? berwarna kuning
</div>
Kembali ke warna ungu lagi latar belakangnya
</div>
</div>
</body>
</html>
Bingung ya? Semoga saja mudah dipahami. Pada tutorial berikutnya saya akan membahas tentang beberapa properti dalam CSS. Semoga bermanfaat!


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



8 komentar:

Andhie mengatakan...

pertmax,,,,ui !!!!

mantaps,,,,yang penting kuci posisi posting belakanngan.

hehehehe....thanks

belajar internet mengatakan...

runner up....

akhatam mengatakan...

Wah ilmu yang bermanfaat gan.. Tx. Keep Blogging!

Rock mengatakan...

Makasih sharingnya kawand... Sangat bermanfaat.

Anonim mengatakan...

Produk dijamin asli
TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000

Anonim mengatakan...

Produk dijamin asli
TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.