Selector Dalam CSS

Assalammu'alaikum wr. wb.

           A.     Pendahuluan

a)       Pengertian
      CSS adalah bahasa yang menggambarkan gaya sebuah dokumen HTML.

CSS yang memiliki kepanjangan Cascade 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.

b)      Latar Belakang

Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web 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 diperbarui untuk kepentingan media lain (tidak hanya untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang sampai saat ini masih terus diperbarui lagi

c)       Maksud dan Tujuan

Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.

d)      Hasil Yang Diharapkan

Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web Anda.

            B.     Alat dan Bahan

1)      Laptop

2)      File items

3)      Text editor

            C.    Jangka Waktu Pelaksanaan Kegiatan

                3 jam

            D.     Proses Tahap Pekerjaan

Lebih Lanjut Tentang Selector

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang terjadi dengan tampilannya di browser, Maka Hasilnya Seperti Ini :

Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading). Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas.. bagaimana cara mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam paragraf saja? Untuk itu Anda harus mengubah deklarasi stylenya menjadi seperti berikut

<style type="text/css"> p {       color: red;    } p em {             color: green;           } </style>

Maksud dari code yang bercetak merah tersebut adalah bahwa style warna hijau diterapkan pada elemen emphasize <em> yang berada di dalam elemen paragraf <p>.

Hasil tampilan setelah menggunakan style yang telah dimodifikasi tersebut adalah:

Selector  Dengan Class dan Nama ID

Class dapat digunakan untuk mengelompokkan beberapa elemen supaya memiliki style sama. Secara umum sintaks style untuk class tertentu adalah sbb:

.namaKelas {                       properti1 : value1;                       properti2 : value2;                       .                       .                      }

Contoh :

Hasilnya adalah sebagai berikut :

Style juga dapat digunakan untuk mengatur tampilan elemen dengan id tertentu. Berikut ini adalah contohnya:

Perhatikan hasil tampilan dari kode di atas

Pada tampilan di atas, tampak bahwa perintah

P {       .       .      .    }

Digunakan untuk mengatur style pada elemn <p>. Sedangkan perintah

p.group {                  .                  .                  .                }

Digunakan untuk mengatur style hanya pada <p> yang memiliki class bernama group, dan perintah

P#one {               .               .               .              }

Berfunsi untuk mengatur style pada <p> yang memiliki id dernama one. Meskipun pada contoh ini, terdapat elemen <p class=”group” id=”one”>, namun style pada elemen ini mengikuti p#one, bukannya p.group karena nama id lebih diprioritaskan dari pada class.

            E.    Temuan permasalahaan

Lantas bagaimana dengan tampilan style berikut ini :

<style type=”text/css” P             {                Color: black;                } p.group {                 color: red;                } .group   {                Color: blue;                } #group  {                Color: green;                } </style>

Yang diterapkan pada tag berikut ?

<p>Ini adalah paragraph 1. Ini adalah paragraph 1. Ini adalah paragraph 1. Ini adalah paragraph 1. Ini adalah paragraph 1.</p> <p class=”group”> Ini adalah paragraph 2. Ini adalah paragraph 2. Ini adalah paragraph 2. Ini adalah paragraph 2. Ini adalah paragraph 2.</p> <div class=”group”> Ini adalah paragraph 3. Ini adalah paragraph 3. Ini adalah paragraph 3. Ini adalah paragraph 3. Ini adalah paragraph 3.</div> <div id=”group”> Ini adalah paragraph 4. Ini adalah paragraph 4. Ini adalah paragraph 4. Ini adalah paragraph 4. Ini adalah paragraph 4. </div>

Apabila Anda dapat menjawab pertanyaan di atas, maka Anda sudah menguasai dasardasar CSS awal ini khususnya pada masalah selector.

Menurut analisis saya, untuk paragraf pertama akan memiliki warna hitam, paragraf ke dua berwarna merah, paragraf ke tiga akan berwarna biru dan paragraf ke empat akan berwarna  hijau. Mari kita lihat hasil tampilannya:

Setelah saya coba caranya eperti ini

       

               F. Referensi

              EBook CSS