Class dan ID Selector Pada CSS


Assalamualaikum

Posting kali ini saya akan share tentang class dan id selector pada css. Maksud dari class dan id selector di sini adalah konsep pembagian untuk merubah tampilan yang ada pada setiap tag contoh kita ingin merubah membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika kita ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, kita ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam. Untuk kasus seperti ini, kita bisa menggunakan Class selector dan ID selector.

Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

Cara penulisan Class Selector:

.nama-class {property:value;}


Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div> dan di akhiri dengan tag </div>.

Contoh:

Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS

<div class="tengah"> <p>Teks tengah akan berwarna merah.</p> <h1 > Tag H1 tengah akan berwarna hitam</h1> </div> <h1 class="kiri">Tag H1 kiri akan berwarna biru</h1>

ID Selector

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika kita ingin menggunakan class selector di luar kode HTML kita menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

credit for mba dini semoga bermanfaat ^-^


		
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: