CLASS Selector CSS

fungsi dari class selector ini adalah untuk menentukan style di beberapa tag html sekaligus, sebenarnya cara kerja class selector ini hampir mirip dengan id

Jika Anda dapat memimpikannya, Anda dapat melakukannnya. May Kay Ash

fungsi dari class selector ini adalah untuk menentukan style di beberapa tag html sekaligus, sebenarnya cara kerja class selector ini hampir mirip dengan id

Last Modif at July 9th, 2011

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 (). 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.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-