Jenis – Jenis Selector Pada CSS
DAFTAR ISI

Untuk bisa memakai CSS secara maksimum, pastinya harus tahu jenis-jenis selector, berikut cara penggunaanya. Jenis selector semacam ini cuma berlaku untuk External dan Embedded style sheet.

» Selector bebas

Cara pemakaian selector bebas mirip seperti pemakaian tag di HTML, cuma selector memakai nama yang dapat kita atur sendiri sesuai kemauan. Bentuk umunya semacam ini :

<style type=”text/css”>
testing{ text-decoration: underline; color:green; }
</style>

Untuk bisa memakai style ini, dalam dokumen harus di tulis semacam ini :

<testing>Teks ini berwarna hijau dan bergaris bawah</testing>

» Selector dengan class

CSS memperbolehkan kita untuk menggunakan class, dimana didalam sebuah class kita bisa mengelompokkan elemen-elemen dan menerapkan aturan CSS didalamnya. Bingung dengan penjelasan?. Sama, saya juga. Oke, biar ngga’ sama-sama bingung, langsung liat contoh berikut :

<style type=”text/css”>
.toplink { text-align : right; }
</style>

Nah, beda dengan selector pertama, dalam dokumen penulisannya menjadi semacam ini:

<h2 class=”toplink”>Class Heading 2 </h2>

Heading 2 (h2) di dalam kode di atas bukan sebuah harga mati, h2 mungkin saja diganti dengan tag-tag lain sesuai kemauan. Bergantung tag mana yang akan di atur untuk memakai style toplink dalam CSS di atas.

» Selector id

Berikut ada namanya selector id. Bila selector dengan class dimulai dengan titik, selector id memakai tanda pagar. Contoh penulisannya semacam ini:

<style type=”text/css”>
#title { font-size: 10px; text-transform:uppercase; color: red; }
</style>

Penulisannya dalam dokumen tak jauh beda dengan selector class. Cuma tulisan “class” kita ganti dengan “id”. Contoh:

<p id=”title”>Tulisan ini berukuran 10, kapital dan berwarna merah</p>
Baca Juga:  Function (Bahasa C)

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Infanthree Digital Administrator
Infanthree Digital Administrator
Website, Mobile Apps, IoT, Digital Marketing Agency, IT Konsultan
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WhatsApp chat