Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Beberapa CSS Yang Harus Dipahami

Bagi anda yang ingin Belajar CSS, anda harus latihan menggunakan berbagai property & value dari CSS atau tag & attribut dari HTML agar pada akhirnya anda mengerti sendiri untuk apa semuanya. Berikut ini adalah 5 permasalahan bagi seorang CSS Newbie (yang masih belum tau apa-apa tentang CSS) yang sering ditemukan

Masalah Pertama : CSS Reset

Ketika mendesain sebuah website dengan menggunakan css, ternyata hasil desain tersebut ada margin & padding bawaan dari browser. Bagaimana cara mengatasinya ? 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. Untuk itulah adanya CSS Reset. CSS Reset digunakan untuk mereset ulang nilai-nilai yang telah diterapkan pada file CSS bawaan browser. Anda bisa memilih CSS Reset mana yang ingin anda pakai entah punya Meyer Web CSS Reset (http://meyerweb.com/eric/tools/css/reset/) atau YUI CSS Reset (http://developer.yahoo.com/yui/reset/).]

Masalah Kedua : ID & Class

Ketika membuat markup HTML ada attribut ID dan juga Class, keduanya digunakan untuk menandai suatu tag. Apa bedanya ID dan Class ? Dalam sebuah markup, tidak boleh terdapat dua atau lebih ID yang sama. ID hanya boleh digunakan satu kali karena sifatnya yang unik. Jika suatu markup memiliki karakteristik yang sama, misalnya warnanya sama , ukuran hurufnya sama, jenis hurufnya sama. maka gunakanlah Class sebagai penanda.

Masalah Ketiga : Margin & Padding

Apa sih bedanya Margin & Padding ? Perbedaan keduanya terletak pada jarak yang diberikan. Margin memberikan jarak pada setiap element sedangkan Padding memberi jarak Antara Konten dengan Element.

Masalah Keempt : Relative & Absolute

Apa sih bedanya Relative & Absolute ? Setiap element secara default memiliki position static, ketika position bernilai static, anda tidak dapat menentukan jarak satu element dengan element lain menggunakan property Top, Bottom, Left, atau Right. sebagai contoh, tambahkan property left:100px; di class .dua , maka tidak akan terjadi perubahan sama sekali. Untuk itu kita perlu menset position menjadi relative, dengan begitu class dua akan bergeser 100px dari kiri. Dengan menambahkan position:relative anda dapat menentukan posisi suatu elemen berada. Lalu bagaimana dengan Absolute ?

Absolute position akan mengeluarkan elemen tersebut dari parentnya. Jika anda perhatikan, sebelumnya kita menambahkan 100px dari kiri, 100px ini dihitung/dimulai dari kotak, bukan dihitung dari ujung browser. Dengan menambahkan position absolute, 100px akan ditambahkan mulai dari element terdekat yang memiliki position:relative.

Kesimpulan

Itulah beberapa permasalahan yang sering ditemukan ketika pertama kali belajar css. Sebaiknya anda pahami beberapa fungsi diatas seperti penggunaan CSS Reset yang berfungsi untuk mereset CSS bawaan browser & sebagainya. Tulisan ini dikutip dari website ariona.net dalam artikel 5 Permasalahan Bagi CSS Newbie.

18 Comments

  1. Rohis FacebookReply

    yups benar banget gan!, sebenarx sy gk trlalu paham dgn CSS cuma klo lg bingung sy belajrx ke sini http://www.w3schools.com/css, thx ya.. *smile

    • Nurul ImamReply

      Refrensi yang sangat bagus mas, disitu sangat komplit sekali dan cocok bagi pemula yang mau belajar css.

  2. Mizz AizaReply

    sangat bermanfaat artikel ini untuk newbie seprti saya.. saya kurang arif berkenaan CSS sebelum ini..

    • Nurul ImamReply

      Syukurlah artikelnya bisa bermanfaat :)

  3. Intan SudibjoReply

    mantap mas Ilham, nambah ilmu lagi dari sini, sedikit-sedikit saya mulai paham nih hehe

    • Nurul ImamReply

      Tadinya belum paham, keseringan mampiir niat ga niat baca tetep dikunjungi dan semoga paham :)

  4. Irwan AlessaReply

    ilmunya boleh di manfaatkan bagi penggemar CSS.. mantap juga olahanya dan penerangannya bisa saya fahami dengan mudah..

    • Nurul ImamReply

      Pembelajaran cssnya masih tahap awal mas, jadi olah bahasanya yang mudah dimengerti bagi css newbie

  5. blogditter.comReply

    Aaaak… CSS benar-benar merupakan hal yg asing bagi saya >_<

    • Nurul ImamReply

      Sabaaarrr… Nanti juga suka sendiri :D

  6. Cara RirinReply

    Kalau nggak paham kode css diatas, gimana mas? ehehe :D

    • Nurul ImamReply

      Y gak gimana-gimana, cari cara instant aja mbakyu :p

  7. Ismail NReply

    Minat juga hendak mendalami CSS ni tapi otak dah payah nak paham bila dah berumur ini. :D Sekarang cuma mampu edit yg simple-simple seperti warna, margin, alignment, fonts,background etc. Yg payah-payah, harap plugin jer.

    • Nurul ImamReply

      Iya pak, disesuaikan dengan kebutuhan aja untuk memahaminya. Untuk ekspresi lebih lanjut kita serahkan pada CSS Creative :D

  8. IwanReply

    Yth. Mas Nurul, kebetulan saya pernah baca di web lain .
    Sepertinya Mas Nurul ambil materi dari web ini

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

    Boleh saja mengambil , tapi sebaiknya sebutkan referensinya :-)

    • Nurul ImamReply

      Hehehe diperhatikan yah artikelnya biar ga salah presepsi :D

  9. IwanReply

    Maaf…ternyata Mas Imam juga sudah menuliskan referensinya ….:-)

    • Nurul ImamReply

      Iya, memang dari awal artikel ini di publish sudah menuliskan referensinya :)

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=""> <s> <strike> <strong>