Dasar-dasar CSS #2

Dasar-dasar CSS #2
Di Posting Oleh : Admin
Kategori : Tutorial Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog
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!

Komentar

Posting Komentar

Postingan populer dari blog ini

Habisnya Era Media Cetak, dan Selamat Datang Era Media Elektronik?

Saya berjalan-jalan di sebuah toko buku dan bertanya "Dimana ya Majalah FourFourTwo?". Seorang perempuan menjawab "FourFourTwo sudah tidak terbit lagi". Saya pun terkaget. Majalah seperti itu sudah tidak terbit lagi? Seminggu sebelumnya saya hendak membeli tabloid Soccer, dan saya bertanya kepada si penjual. "Soccer?" Kata si penjual: "Succer udah nggak terbit lagi mas". Saya terkejut. Setahu saya Tabloid Socecer mempunyai basis penggemar yang masif dan pelanggan yang lumayan banyak, kok bisa-bisanya berhenti terbit? Karena penasaran setelah kejadian FourFourTwo saya buka mbah google. Ternyata benar, kedua media yang membahas sepakbola (ya, saya memang penggemar sepakbola) tersebut sudah berhenti terbit. Kalau Fourfourtwo berubah menjadi portal berita online (cek di http://fourfourtwo.com), situs Duniasoccer (http://duniasoccer.com) malah sudah tutup. Memang ini salah saya juga, saking sibuknya di dunia nyata, mungkin sampai tidak tahu bahwa kedu...
Baca selengkapnya

Review Hotel.co.id Situs Cari Hotel Murah Terbaik Di Indonesia

Gambar
Cari info mengenai hotel murah dan terbaik penting untuk yang kerap melancong dan tidak ada rumah rekan atau keluarga untuk tempat bermalam sesaat. Untuk dipahami, sekarang ini cari hotel paling dekat sangat gampang karena ada hotel.co.id situs cari hotel murah terbaik. Saat kamu sedang melancong dan harus tinggal beberapa saat pada sebuah wilayah yang didatangi sudah tentu yang dicari ialah hotel untuk tempat bermalam. Tapi, saat sebelum berkunjung sebuah hotel untuk bermalam, kemungkinan kamu dapat cari info berkaitan hotel yang hendak kamu datangi untuk bermalam. Info yang diperlukan minimal berkenaan harga dan kwalitasnya. Lalu, bagaimanakah cara ketahui info berkaitan mengenai hotel yang hendak kamu datangi? Adakah service yang sediakan info mengenai hotel selengkapnya? Sudah pasti ada, namanya ialah Hotel.co.id Nach, apa kamu ingin tahu seperti apakah feature dan kelebihan basis ini sebagai situs pencarian hotel paling murah dan terbaik . Untuk ketahui jawabnya, baca info secara ...
Baca selengkapnya

Logika Matematika - Part 4

Agak lama updatenya ya? Dan sayajuga mengucapkan selamat kepada Timna Jerman yang berhasil menjuarai Piala Dunia 2014 (buset udah telat banget) Untuk melihat eidsi yang sebelumnya: Logika Matematika - Part 1 Logika Matematika - Part 2 Logika Matematika - Part 3 Pada edisi keempat sekaligus terakhir ini akan dibahas meengenai penarikan kesimpulan. Ada 3 cara penarikan kesimpulan dalam logika matematika, yaitu: 1. Modus Ponens Jika diketahui premis p → q dan diketahui premis p, maka kesimpulannya adalah q Contoh: Diketahui: Jika hari ini hari senin maka disekolah ada upacara bendera. Dan juga diketahui: Hari ini hari senin. Maka kesimpulannya: Disekolah ada upacara bendera. 2. Modus Tollens Jika diketahui premis p → q dan diketahui premis ~q (ingkaran q), maka kesimpulannya adalah ~p Ini sesuai dengan sifat kontraposisi yang senilai dengan implikasi (Lihat Part 2) Contoh: Diketahui: Jika hari ini cerah maka jalanan akan macet. Dan juga diketahui: Jalanan tidak macet. Maka kesimpulannya: ...
Baca selengkapnya