ID Selector CSS

di awali dengan #(kres). #(kres) ini sudah aturan, dimana style yang di awali #(kres ) adalah id selector, ID = #

Kejujuran adalah batu penjuru dari segala kesuksesan, Pengakuan adalah motivasi terkuat. Frederick Smith

di awali dengan #(kres). #(kres) ini sudah aturan, dimana style yang di awali #(kres ) adalah id selector, ID = #

Last Modif at July 9th, 2011

apa kabar sobat, semoga baik-baik saya :)
masih tentang css, kali ini saya akan share tentang id selector css serta cara kerjanya.
mmmm, sudah tahukan cara penulisan css. kalau belum, sobat bisa baca tulisan saya yang berkategory css
sekarang saya anggap sobat sudah paham cara penulisan css, mari kita lanjutkan.
w3.org mengatakan kalau id selector ini unik, unik?. yups memang unik, biasanya id selector ini digunakan untuk menbuat box, content-box, header, sidebar, footer, dll(istilah orang barat), dengan id selector ini kita bisa membuat bagian-bagian dari website(body, sidebar, footer dll), kita juga bisa menentukkan lebar, letaknya dimana, seperti apa warnanya dan lain sebagainya, berikut penulisan aturan penulisan id selector


#namaidselector
{
property:value;
}

keterangan;

  • di awali dengan #(kres)
  • #(kres) ini sudah aturan, dimana style yang di awali #(kres ) adalah id selector
  • ID = #
  • ID = #
  • ID = #
  • ID = #
  • saya tulis berulang agar ngga lupa :)
  • setelah karakter #(kres)
  • penulisan selanjutnya ialah nama idnya
  • nama id nya ini terserah anda, tapi sangat ngga boleh pakai spasi
  • setelah tanda #(kres) dan nama id
  • untuk memulai, kita harus tambahkan {(buka kurung karawal)
  • abis itu baru deh kita 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 membuat sidebarleft, content-box, sidebarright(istilah orang barat), berikut;

copy code berikut;


<html>
<head>
<title>belajar id selector css </title>
<style>
body{width:100%;
height:900px;
clear:both;
background:silver;
margin:10px;
}
#sidebarkiri
{
background:red;
float:left;
width: 200px;
height:305px;
}
#badan{
background:yellow;
margin:0;
width: 500px;
height:305px;
float:left;
}
#sidebar-kanan
{
background:green;
margin:0;
width: 300px;
height:305px;
float:left;
}
#judulsidebarkiri
{
background:blue;
color:silver;
font-size:30px;
margin:0;
}
#judulbadan{
background:red;
color:silver;
font-size:30px;
margin:0;
}
#judulsidebar-kanan
{
background:orange;
color:silver;
font-size:30px;
margin:0;
}
</style>
<head>
<body>
<div id="sidebarkiri">
<h2 id="judulsidebarkiri">sidebar kiri</h3>
</div>
<div id="badan">
<h2 id="judulbadan">badan</h3>
</div>
<div id="sidebar-kanan">
<h2 id="judulsidebar-kanan">sidebar kanan</h3>
</div>
</body>
</html>

  • kemudian buka program notepad atau notepad ++ jika ada
  • paste
  • kemudian simpan dengan nama belajaridcss.htm
  • pastikan ekstensi filenya adalah[dot]html, bukan .text
  • jalankan
  • nah, gimana hasilnya

keterangan;

  • yah, seperti itulah id css, kita hanya perlu menulis id dan stylenya kemudian
  • kita menggunakan atribut id=”namaid” untuk mengaktifkan stylenya
  • mudah kan?
  • oia agar mudah di ingat
  • perhatikan saja ini
  • tanda # dan kata sesudah #(kres)
  • setelah itu
  • atribut id=” disininamaid

sekedar tambahan, dalam penulisan id, sobat ngga boleh sampai salah tulis satu hurufpun, trus tu dalam penulisan id ngga boleh pakai spasi.

Indam

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

2 thoughts on “ID Selector CSS”

  1. culunboy says:

    bos ,tag diakhiri ?yg bner aja

  2. Apasih perbedaan antara ID dan CLASS ?

    jika saya liat dari beberapa syntax CSS dibeberapa contoh yang abang berikan di post sebelumnya, CLASS bisa digunakan di beberapa tag sekaligus berbeda dengan ID, di ID itu hanya digunakan 1 kali seumur hidup :D hehe… apa hipotesis saya ini benar ?

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

+
-