Tutorial CSS : #3 Selector, Property dan Value Pada CSS

Pengertian Selector CSS

CSS selector adalah salah satu rule set dari Css yang fungsinya tidak berbeda jauh dengan namanya (Selector) yakni memilih suatu elemen yang ingin anda beri gaya atau style css.

Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.

Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.

Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. Mengenai selector, akan kita bahas secara lebih detail dalam tutorial-turorial CSS selanjutnya.

Ada 5 macam selektor di CSS:

1. Selektor Tag
2. Selektor Class
3. Selektor ID
4. Selektor Atribut
5. Selektor Universal

1. Selektor Tag

Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag.

Contoh :

p { 
    color: blue; 
}

Artinya: Pilih semua elemen <p> lalu atur warna teksnya menjadi biru.

Kalau misalnya kita punya struktur HTML seperti ini :

<div>Helo apa kabar, saya sedang belajar CSS</div> 
<p>Materi yang sedang kita bahas adalah Selektor</p> 
<div>Saat ini sedang dibahas tentang selektor tag</div> 
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka akan menghasilkan output seperti ini:

Semua elemen <p> berwarna biru, sedangkan elemen <div> tidak.

2. Selektor Class

Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya.

Contoh :

.blue { 
    color: white; 
    background: blue; 
    padding: 5px; 
}

Kita memiliki selektor class beranama .blue , cara menggunakan selektor ini di HTML adalah dengan menambahkan atribut class di dalamnya.

Contoh :

<p>Saya sedang belajar 
    <b class="blue">CSS</b> 
    di agussuratna.net.
</p>

Hasilnya:

Selektor class dapat kita gunakan pada elemen yang kita inginkan, sebuah elemen HTML dapat menggunakan satu atau lebih class.

Contoh:

.text-white { 
color: white; 
} 

.bg-teal { 
background: teal; 
}

Lalu di HTML kita gunakan kedua class tersebut pada satu elemen:

<h2 class="text-white bg-teal">Tutorial CSS untuk Pemula</h2>

Hasilnya:

3. Selektor ID

Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.

Selektor ID ditandai dengan tanda pagar (#) di depannya.

Contoh:

#header { 
    background: teal; 
    color: white; 
    height: 100px; 
    padding: 50px; 
}

Lalu pada kode HTML:

<header id="header"> 
    <h1>Selamat Datang di Website Saya</h1> 
</header>

4. Selektor Atribut

Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag.

Contoh selektor Atribut:

input[type=text] { 
    background: none; 
    color: cyan; 
    padding: 10px; 
    border: 1px solid cyan; 
}

Kita akan memilih semua elemen <input> yang memiliki atribut type='text'.

Contoh kode HTML:

<input type="text" placeholder="ketik sesuatu..." />

Hasilnya:

5. Selektor Universal

Selektor universal adalah selektor yang digunakan unutk menyeleksi semua elemen pada jangkaua (scope) tertentu.

Contoh:

* { 
    border: 1px solid grey; 
}

Semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey.

Hasilnya:

Selektor universal bisanya digunakan untuk me-reset CSS. Pada halaman HTML, ada beberapa CSS bawaan browser seperti padding dan margin pada elemen tertentu. Reset bertujuan untuk menghilangkan padding dan margin tersebut.

Contoh CSS reset:

* { 
    padding: 0; 
    margin: 0; 
}

Maka semua elemen tidak akan memiliki padding dan margin.

Pengertian Property dan Value CSS

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.Jika selector digunakan misalnya untuk “mencari seluruh tag“, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll.

Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.