Selektor pada CSS

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>


Komentar pembaca

arendytMas Edi,untuk langkah2 mendesain menggunakan Photoshop yg kemudian di atur dalam CSS,postingin juga ya mas untuk referensi CSS.. Thx.posting pada :2011-04-26 12:27:56

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar