Masalah Yang Sering Ditemui Bagi Pemula Belajar CSS

Masalah ke-1 : CSS Reset

Sewaktu latihan CSS, saya berniat untuk membuat bar yang berada di atas halaman web, seperti pada gambar berikut ini.

Untitled1

 

 

 

 

#topbar{

                                   width:100%;

                                   height:30px;

                                   background:#333;

}

saya save dan langsung melihat previewnya di browser. yes topbarnya udah diatas, tingginya bener, lebarnya udah bener 100%, tapi kok serasa ada yang mengganjal :(. apaa yah.. ?

Untitled

Ada jarak !!??, gimana nih. coba pake margin:0 juga g mau nempel tuh topbar.

Solusi

Untuk kasus diatas, anda harus mengerti apa yang sebenarnya terjadi. hal ini terjadi karena setiap browser memiliki css defaultnya masing-masing. file css bawaan ini akan diterapkan disetiap halaman web yang di load pada browser.
pernahkan anda bertanya, dari mana datangnya besar huruf H1 sampai H6 ?, atau jarak antara Ul atau Ol, atau kenapa tag i bisa miring, tag b bisa tebal dan seterusnya dan seterusnya?.
Untuk itulah CSS reset hadir. CSS reset digunakan untuk mereset ulang nilai-nilai yang telah diterapkan pada file CSS bawaan browser.
sekarang coba anda tambahkan, baris style berikut :

*{

                                   margin:0;

                                   padding:0;

}

Tanda bintang (*) adalah selector untuk semua element html, sama halnya dengan memberikan style pada html.

Untitled11

If “Reset” sounds complicated, don’t worry. it’s quite simple. Mostly it involves zeroing out margins and padding.
-Jeffrey Way-

Reff : http://www.ariona.net/5-permasalahan-yang-membingungkan-bagi-css-newbie/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s