Dalam mempelajari CSS membutuhkan waktu yang cukup banyak, mulai dari mengenal apa itu CSS, kelebihan kekurangan penggunaan CSS, jenis-jenis penggunaan dalam CSS sampai aplikasi CSS dalam membuat website responsive. Jika anda belum tahu apa itu CSS bisa dilihat pada artikel Apa kelebihan dan kekuranggan menggunakan CSS pada desain web. Selain itu jika belum tahu cara menggunakan CSS bisa dilihat pada artikel bagaimana teknik penulisan CSS pada situs dalam desain web.

OK, pada kali ini, saya anggap sahabat sudah familiar dengan CSS. Pada syntax CSS terdiri dari 3 bagian yaitu selector, property dan value. Selector adalah bagian yang digunakan untuk menentukan suatu elemen/tag di HTML. Selector ini dapat berupa nama id elemen atau nama class. Property dapat di isi dengan jenis warna, ukuran, perataan margin dll. Sedangkan pada value dapat diisi dengan nilai dari property nya. Setiap akhir penulisan property dan value di akhiri dengan tanda titik koma (semicolon), dimana tanda ini juga digunakan sebagai pemisah antar satu property dengan property yang lain.

Syntax CSS: selector {property: value} maka bisa kita ubah menjadi h1 { color: red;}

Dimana h1 sebagai selector, color sebagai property dan red sebagai value.

Baca juga:

Contoh Membuat web desain yang Responsif dengan HTML5 dan CSS3

Dalam pembuatan sebuah halaman websiste, terkadang hanya membutuhkan beberapa selector saja, berikut selector yang sering digunakan,

1.       Universal selector

 Selector ini ditujukan untuk semua elemen, contohnya:

* {

                                color: green;

background-color: white;

}

Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna hijau, dan background berwarna putih. Dengan cara seperti itu, maka semua teks dalam elemen akan berwarna hijau dan beckground berwarna putih.

2.       Element type selector

 Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

 h1 {

            text-decoration: underline;

      }

p {

            font-size:14px;

      }

Contoh kode CSS diatas akan membuat semua tag

  akan bergaris bawah, dan seluruh tag

  akan berukuran 14pixel.

Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag

terdapat tag , maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup

.

 Baca juga:

Bagaimana Teknik Penulisan CSS pada Situs dalam desain web?

3.       Class selector atau selector pada class

Dengan menggunakan class selector, kita dapat mendefinisikan style yang berbeda untuk elemen HTML yang sama. Pada Class Selector akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Selector ini sering digunakan. Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class.

Secara umum syntax style untuk class addalah sebagai berikut:

.namaKelas {

            Property1: value1;

            Property2: value2;

      }

Contoh:

Jika kita ingin mendefinisikan tipe paragraph dengan rata kanan, maka bentuk penulisannya:

.kanan {

            text-align: right;

            }

Dalam bentuk dokumen HTML kita harus menambahkan attribut class:

Ini adalah sebuah paragraf yang akan berbentuk rata kanan

Ingat dalam penulisan nama class tidak boleh diawali dengan angka karena di beberapa browser tidak bekerja, dan penulisan class diawali dengan tanda titik (.).

Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class. Contoh:

Sub Judul Artikel

4.       Id selector atau selector pada ID

ID selector didefinisikan dengan mengggunakan karakter tanda pagar/ hashtag (#). ID Selector ini berguna untuk mengatur elemen yang mempunyai ID tertentu. Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut ID. Contoh penggunaan ID selector:

#hijau {

                   color: green;

                   }

Maka dalam HTML cara menggunakan ID selector sebagai berikut:

Ini sebuah paragraf yang akan berwarna hijau

Sebuah ID dapat digunakan untuk mendapatkan sebuah elemen secara unik, hal ini berbeda dengan class, sebagaimana diketahui, beberapa elemen boleh memiliki kelas yang sama.

 Baca juga:

Apa perbedaan Pseudo-class dan Pseudo-element pada selector di CSS?

5.       Attribute selector

Pada selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan. Penggunaan setiap atribut selector harus berada diantara tanda kurung siku “[” dan “]”. Attibut selector ini jarang digunakan meskipun memiliki kemampuan mencari tag yang sangat spesifik.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {

            font-size:20px ;

       }

[type="submit"] {

                width:30px;

    color: green;

                }

Pada penggunaan attibut selector diatas, “[href] ” akan cocok dengan seluruh tag yang memiliki atribut href. Untuk contoh “[type=”submit”] ”akan cocok dengan tag yang memiliki atribut type dengan nilai submit, dan cocok pada pembuatan tombol submit dalam form.

Semoga artikel tentang jenis-jenis selector dapat bermanfaat, dan artikel tentang pseudo selector dapat dilihat pada artikel berikutnya.