Sesuai janji pada seseorang, maka aku akan secara berkala posting tutorial dan tips about web stuff seperti css, javascript, photoshop, php and stuff :p Nah untuk memulainya, aku akan bagikan tips-tips berguna untuk pemula yang baru belajar CSS.

Tips-tips di bawah mungkin terlihat simple buat kalian yang udah tau, tapi i’m sure these tips will come in handy for you who just started learning CSS. So without further adeu … Here is the tips :

1. Make the element center

code :

#container {
width: 600px;
margin: 0 auto;
}

voila ! that’s it. rule ini membuat element dengan nama id container akan berada di tengah.
Yang harus kamu perhatikan adalah, rule di atas tidak akan berjalan kalau tidak ada doctype di dokumen html kamu. So make sure you have specified your doctype first

2. Menghilangkan outline link di firefox

code :

a { outline: 0; }

Apa yang dilakukan rule di atas adalah menghilangkan efek outline yang muncul saat kamu mengeklik sebuah link. ( note — outline hanya muncul di browser Firefox ) Karena buat sebagian orang ini sangat mengganggu.

3. Div dengan scrollbar

code :

div#content {
width: 600px;
height: 500px;
overflow: auto;
}

Rule ini akan membuat elemen ber id content, memiliki width 600 px dan height 500 px dan apabila content di dalam melebihi panjang atau tinggi lebih dari ukuran elemen tersebut, maka otomatis akan muncul sebuah scrollbar. value auto bisa diganti dengan hidden untuk menyembunyikan isi yang melebihi dari area elemen tersebut.

4. Reset cssmu

Masing masing browser memiliki nilai default untuk masing masing elemen HTML yang mereka support. Dan nilai mereka berbeda beda. Karena itulah kadang kalau kita buat koding web dengan css, di IE bisa terlihat berbeda dengan di Firefox dan bahkan beda lagi di Opera. Semua karena 3 browser tersebut mempunyai nilai default yang berbeda beda untuk masing masing elemen. Maka, akan lebih baik sebelum kita mulai menulis rule CSS kita sendiri, kita reset value value tersebut agar konsisten di semua browser ( meskipun tetap harus ada beberapa perubahan yang dilakukan nantinya ).
Banyak sekali file reset.css yang tersedia di internet, yang dibuat oleh orang orang yang berbeda namun dengan tujuan yang sama. Beberapa di antaranya adalah reset stylesheet dari Yahoo!UI, Eric Meyer dll. Pakailah yang mana saja, karena perbedaannya tidak terlalu terlihat.
Proses selanjutnya adalah menginclude ke dalam dokumen, dan diinclude sebelum kita me load css kita sendiri.

5. Clear

code :

div.cleaner { clear: both; }

Rule simple yang sering dilupakan oleh para pemula CSS. Fungsi dari rule ini adalah menghilangkan efek float yang ada pada sebuah elemen. Tanpa clear, elemen yang diberi rule float akan mengapung di atas elemen di bawah, meski sudah kita beri kode baris baru ( <br /> ). Yang hanya perlu kita lakukan, cukup buat rule di atas dan taruh <div class="cleaner"></div> di bawah elemen yang ber float.

Well i guess that’s all for now. Kalau ada masukan untuk post ini, please let me know And feel free to correct me too, because i’m still learning, after all
Tutorial tutorial yang akan datang akan membahas php, html, mysql, photoshop dll. So stay tune !

Over and out …

Tags: CSS

This entry was posted on Wednesday, July 2nd, 2008 at 9:05 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.