Jenis selector CSS

Assalamu’alaikum

Dalam pembuatan website, CSS menjadi bumbu wajib dalam memperindah tampilan website.  Berikut ini adalah struktur penulisan CSS.

Keterangan: Selector digunakan untuk menentukan element mana yang akan diatur stylenya.

Jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.

1. Class selector
Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam css disimbolkan dengan tanda titik ( . ).

Contoh :

Penulisan code di dalam dokumen HTML

….
<h3 class=’judul’>
Belajar Membuat Website
</h3>
….

Penulisan code dalam cssnya

.judul {
Font : 12pt Impact;
}

Perlu di tekankan sekali lagi, sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

2. ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.

Contoh :

Penulisan code dalam dokumen HTML
….
<div id=’footer’>
copy-Right Fajar Loebis -2012
</div>
….

Penulisan code di css nya
#footer {
color: blue;
border: 1px solid black;
}

Sekali lagi di tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #footer diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 footer.

3.Tag selector
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.

Contoh :

Penulisan code di dokumen HTML
….
<h1> Mengarungi Samudera PHP </h1>
<h1> Belajar HTML dan CSS </h1>
….

Penulisan code di cssnya
h1{
font: 12pt Impact;
color:red;
}

Semoga bermanfaat, jangan lupa likes & share ^_^

Wassalamu’alaikum

oleh: mas iyo (Agustus 12, 2018 @9:47) kategori: CSS, Komputer, Programming