Selektor pada CSS merupakan bagian tertentu dalam halaman html / xhtml yang memungkinkan CSS untuk dapat melakukan sebuah customisasi. Selektor ini terbagi menjadi 3 macam, antara lain :

1. TAG HTML
2. CLASS
3. ID

Pembahasan dari 3 selektor diatas adalah seperti berikut :
1. TAG HTML
TAG HTML merupakan perintah - perintah tertentu dlam halaman HTML, seperti paragraf <p> ,  List <ul> , <ol> , <li>, H1, H2, H3 dan lain - lain. pada contoh berikut akan coba kita bahas bagaimana cara CSS melakukan customisasi berdasarkan TAG.

<html>
<head>
<title>CSS dengan TAG HTML</title>

<style> <!-- css ditempatkan pada halaman yang sama -->
h1{
    font:normal 16px Arial,Helvetica, sans serif;
    color:#666666;
    margin:10px 0 5px 0;
    line-height:20px;
    display:block;
    background-color:silver
}
h2{
    font:normal 14px Arial,Helvetica, sans serif;
    color:#ff9900;
    margin:10px 0 5px 0;
    line-height:15px;
    display:block;
    background-color:silver
}


p{
    font:normal 16px Arial,Helvetica, sans serif;
    color:#666666;
    margin:10px 0 5px 0;
    display:block;
    background-color:silver
    border:silver 1px solid;
}
</style><!-- penutup dari perintah CSS -->

</head>
<body>
<h1>Contoh text yang formatnya H1</h1>
<h2>Contoh text yang formatnya H2</h2>
<p>Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
</p>

<h1>Contoh text yang formatnya H1</h1>
<h2>Contoh text yang formatnya H2</h2>
<p>Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
</p>
<h1>Contoh text yang formatnya H1</h1>
<h2>Contoh text yang formatnya H2</h2>
<p>Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
   Ini adalah contoh paragraf yang ada pada halaman ini.
</p>

</body>
</html>
Setelah kode diatas kita susun, simpan dan cobalah untuk menjalankannya pada browser dan perhatikan apa yang terjadi pada setiap H1, H2 dan paragraf yang ada. semuanya akan mengikuti aturan yang sudah kita tuliskan pada CSS di bagian atas. klik disni untuk mendownload contoh diatas


2. CLASS dan ID
CLASS dan ID merupakan penamaan bagian - bagian tertentu pada TAG HTML. Pada dasarnya CLASS dan ID tidak berbeda jauh, yang membedakan hanya cara penamaan dan cara pengenalannya dalam CSS.
Contoh penggunaan class antara lain :
<p class="paragraf_1"> isi paragraf </p>
<h1 class="judul">Isi dari judul</judul>
<img src="path to image" class="photo" />
Dari contoh penulisan diatas, selanjutnya kita harus menuliskan pengenalannya dalam CSS, yaitu :
<style>
    p.paragraf_1{
        tuliskan aturannya disini
    }
    h1.judul{
        tuliskan aturannya disini
    }
    img.photo{
        tuliskan juga aturannya disini
    }
</style>

Contoh penggunaan ID antara lain :
<p id="paragraf_2"> isi paragraf ini </p>
<h1 id="judul">Isi dari judul ini</h1>
<img src="alamat gambar" id="photo" />

Cara yang bisa kita pakai dalam CSSnya antara lain:
<style>
    p#paragraf_2{
        masukkan aturan untuk paragraf 2
    }
    h1#judul{
        masukkan aturan untuk judulnya
    }
    img#photo{
        masukkan aturan untuk judulnya     
    }
</style>

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar