sebelumnya saya sudah share beberapa tulisan tentang css, sekarang saya akan melanjutkan tulisan yang berkategori css. dikesempatan kali ini saya akan share mengenai class selector css.
fungsi dari class selector ini adalah untuk menentukan style untuk beberapa tag html sekaligus, sebenarnya class selector ini cara kerjanya hampir mirip dengan id selector (baca id selector class). jika pada id selector kita menggunakan #(kres), sedangkan untuk class selector kita menggunakan .(dot), lihat contoh di bawah
.namaclassselector{
property:
value;
}
keterangan;
- diawali dengan .(dot)
- .(dot) ini sudah aturan, di mana setiap style yang di awali .(dot) adalah class selector
- class = .(dot)
- class = .(dot)
- class = .(dot)
- class = .(dot)
- saya tulis berulang agar ngga lupa
- setelah .(dot)
- penulisan selanjutnya ialah nama classnya
- nama class nya ini terserah anda, tapi sangat ngga boleh pakai spasai
- setelah .(dot) dan nama class
- untuk memulai, kita harus tambahkan {(buka kurung karawal)
- abis itu masukan beberapa property dan valuenya
- setelah property dan value,
- untuk mengakhiri, di tutup dengan }()tutup kurung karawal
- daripada bingung, mari kita ke contoh
- pada contoh di bawah kita akan menulis beberapa tag html yang berstyle sama.
copy code/markup berikut
<html>
<head>
<title>belajar id selector css </title>
<style>
body{width:100%;
height:900px;
clear:both;
background:silver;
}
.dicoba-dicoba{
color:red;/* warna */
font-family:Times, serif;/* font family*/
font-style: italic;/* font style*/
font-weight: bold;/* font weigt */
font-size: 30px;/* ukuran font*/
text-decoration:underline;
}
</style>
<head>
<body>
<h1 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h1</h1><br/>
<h2 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h2</h2><br/>
<h3 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h3</h3><br/>
<h4 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h4</h4><br/>
<h5 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h5</h5><br/>
<h6 class="dicoba-dicoba"> kita menggunakan class selector dengan tag h6</h6><br/>
<p class="dicoba-dicoba"> kita menggunakan class selector dengan tag p</p><br/>
<city class="dicoba-dicoba"> kita menggunakan class selector dengan tag city</city><br/>
<span class="dicoba-dicoba"> kita menggunakan class selector dengan tag span</span><br/>
<em class="dicoba-dicoba"> kita menggunakan class selector dengan tag em</em><br/>
</body>
</html>
- kemudian buka program notepad atau notepad ++ jika ada
- paste
- save as dengan nama belajarclasscss.htm(pilih all types)
- pastikan ekstensi filenya adalah[dot]html, bukan .text
- jalankan menggunakan browser paforit sobat
keterangan;
- pasti tampilannya sama semua, padahal tag htmlnya berbeda beda
- sekarang gimana, sudah pahamkan apa itu class selector
- kita bisa menulis stylenya kemudian mangaktifkannya di beberapa tag sekaligus
- seperti itulah class selector css, kita hanya perlu menulis class dan stylenya kemudian
- kita menggunakan/manambahkan atribut class=”namaclass” untuk mengaktifkan stylenya
- mudah kan?
- oia agar mudah di ingat
- perhatikan saja ini
- tanda .(dot) dan kata sesudah .(dot)
- setelah itu
<taghtml class="iniclasscss". . . . . . .
sekedar tambahan, dalam penulisan class, sobat ngga boleh sampai salah tulis satu hurufpun, trus tu dalam penulisan class ngga boleh pakai spasi.
satu lagi css itu sangat mengasikan.
Sorry, formulir komentar sedang dalam perbaikan