Sebelumnya telah dibahas tentang belajar css sebagai pendahuluan yaitu dengan judul Belajar css Pendahuluan. Di sana diuraikan mengenai latar belakang css, sintaks css dan komentar css yang mudah-mudahan sudah difahami dengan baik. Kali ini dilanjutkan pembahasan berikutnya yaitu Belajar css Selector Id dan Class. Berikut pembahasannya.
Ketika kita memberi gaya/style css pada dokumen html secara external style ( dokumen css terpisah dengan html ), maka gaya seluruh halaman web akan mengikuti gaya/style yang telah diatur dalam file css tadi. Nah, bagaimana kalau kita menghendaki tampilan yang lain pada point tertentu?. Untuk menjawab pertanyaan itulah pembahasan kali ini ditampilkan.
Dalam css, selain kita dapat mengatur satu gaya pada satu elemen html untuk seluruh halaman web, kita juga bisa mengatur gaya pada elemen yang sama dengan gaya yang berbeda dan spesifik dari gaya yang telah ditetapkan.
Misalnya kita telah menetapkan elemen h3 yang berposisi tengah dengan properti : { warna:merah } , lalu kita menginginkan elemen h3 yang lain yang berposisi kiri dengan properti: { warna:biru } . Nah, untuk solusinya dapat diatasi dengan menambahkan selector id dan selector class, dengan pengaturan yang lebih spesifik lagi. Berikut, uraian tentang selector id dan class.
Selector id
Selector id digunakan untuk mengatur gaya pada elemen tunggal yang unik, yang biasanya seperti : header, footer, sidebar ataupun logo.Selector id menggunakan atribut id dari elemen html, yang didefinisikan dengan tanda " # ".
Sintaks selector id :
#nama-id { properti: value; }
Contoh :
.
#gaya-1
{
color:red;
text-align:center;
font-size:20px;
}
#gaya-2
{
color:blue;
text-align:left;
font-size: 14px;
}
.
jangan memulai selector id dengan menggunakan angka.
pada satu dokumen, tidak boleh memiliki elemen html dengan selector id yang sama.
Dan contoh menerapkan pada elemen html :
<h3 id="gaya-1">
ini heading
</h3>
<h3 id="gaya-2">
ini heading
</h3>
ini heading
ini heading
Selector class.
Jika dalam selector id memberikan gaya pada elemen tunggal, pada selector class dapat memberikan gaya pada kelompok elemen. Artinya dapat mengatur pada beberapa elemen, misalnya dalam pengaturan properti: seperti color, size, text-align dan yang lainnya.Selector class dalam penulisannya harus didahului dengan tanda titik ( "." ).
Sintaksnya :
.nama-class { properti:value; }
Contoh :
.bold { font-weight:bold; }
.center { text-align:center; }
<h3 class="center"> ini heading </h3>
<p class="bold"> ini sebuah paragraf yang memiliki class=bold </p>.
<a href="http://url_link.com" class="bold"> ini sebuah link blog </a>
Contoh diatas hasilnya seperti ini.
Contoh penerapan dalam dokumen html
Contoh di bawah ini adalah bagaimana menempatkan selector class dan selector id pada dokumen html secara internal style, yaitu ditempatkan diantara tag header.
<head>
<style>
#ruang
{
width:240px;
background-color:#ffa500;
padding:5px;
margin-top:20px;
border:1px blue solid;
}
.kelas1
{
color:white; font-size:18px;
text-align:center;
}
.kelas2
{
color:#800080; font-size:14px;
text-align:left;
}
</style>
</head>
.
<div id="ruang">
<h2 class="kelas1"> ini heading
</h2>
/*heading diatas mengikuti gaya yang diatur dengan class=kelas1*/
<p class="kelas1">
ini paragraf yang diatur mengikuti aturan class=kelas1
</p>
<p class="kelas2">
sedangkan paragraf ini mengikuti aturan pada class=kelas2.
</p>
</div>
Yang tampil di browser adalah seperti berikut ini :
ini headingheading diatas mengikuti gaya yang diatur dengan class=kelas1.ini paragraf yang diatur mengikuti aturan class=kelas1 sedangkan paragraf ini mengikuti aturan pada class=kelas2 |
Demikianlah pembahasan materi tentang Belajar css selector id dan class.
back to top
