urutan prioritas pada selektor css

17.30 Cecep101 0 Comments

Asslamu'Alaikum..

Halo, sobat WTD sore ini saya ingin membahas kelanjutan dari dasar css yang sudah saya posting sebelumnya, kali ini saya akan membahas tentang prioritas pada selektor css, maksudnya adalah saat browser membaca css anda maka yang mana yang akan didahulukan. langsung saja lihat pada gambar :


Perhatikan baik-baik css diatas. saya sudah memberi background berbeda pada setiap selektor.

Aturan mainnya adalah selektor yang paling spesifiklah yang akan menjadi pemenangnya. lalu set background yang kalah akan kemana? tentusaja yang kalah hanya akan tertimpa oleh pemenang, seperti hukum Alam.

Jadi Aturannya adalah seperti ini!

1. Setiap element/tag selector bernilai 0.0.0.1
2. Setiap Class selector bernilai 0.0.1.0
3. Setiap id selector bernilai 0.1.0.0
4. dan setiap inline selektor akan bernilai 1.0.0.0

Semakin angkanya mendekat ke kiri maka semakin spesifiklah suatu selektor.

nah, jadi yang paling diutamakan oleh browser adalah yang inline selector. apa itu inline selektor, bagi yang belum tau haraf baca ini dulu penulisan dasar css. bagi yang udah ngerti kita lanjut gan.!

sekarang saatnya kita hitung ke-spesifikan dari code yang kita buat tadi.

1. selektor div bernilai 0.0.0.1
2. selektor p bernilai 0.0.0.1
3. selektor div p bernilai 0.0.0.2
4. selektor div p.text bernilai 0.0.1.2
5. selektor #string bernilai 0.1.0.0

jadi dari code diatas maka yang menang/ yang paling spesifik adalah #string jadi dia yang lebih diutamakan. silahkan cek codenya JSFiddle - prioritas CSS.

Selanjutnya perintah !important

!important pada css digunakan saat mendesak intinya adalah important akan merubah seluruh prioritas pada css dan !importantlah yang paling diutamkan.


Perhatikan code diatas! pastikan anda menggunkan !important. disaat terdesak, karena selain perintah ini akan menghancurkan urutan prioritas yang ada code juga akan semakin membingungkan bagi orang yang awam. silahkan cek JSFiddle - Prioritas css dengan perintah !important silahkan tambahkan !important pada selektor yang mana saja.

Sekian Tulisan saya kali ini, semoga membantu.

Asslamu'Alaikum..

struktur dasar penulisan css

11.21 Cecep101 0 Comments

Assalamu'Alaikum..

Halo, sobat WTD posting saya kali ini adalah struktur dasar penulisan css, css mempunyai block level prioritas yaitu css mana yang akan ditampilkan lebih dahulu oleh browser, ada 3 block level pada css, yaitu tag, id, Class. apa itu tag, id dan class?  langsung ke gambar aja ya :


gambar diatas menunjukan 3 tingkatan yang ada pada css.

pertama adalah tag
css manipulasi ini ditulis langsung pada tag HTML seperti gambar diatas yang pertama cssnya langsung merujuk pada tag  body. jadi pada saat anda memakai tag body maka akan mengasilkan background berwarna putih.

kedua adalah id ditulis dengan tanda [#] diawal penulisan css, jika anda telah menulis di css <code>#body</code> maka di HTML anda akan memasukan atribut id pada tag html tersebut. lihat gambar dibawah!

ketiga adalah class ditulis dengan tanda [.] diawal penulisan css, dan akan dipanggil menggunakan Atribut class pada HTML lihat gambar dibawah! 


lihat cara memakai id dan class pada gambar diatas, class dan id yang digunakan ada pada gambar pertama.

penulisan dasar css

10.48 Cecep101 0 Comments

Assalamu'Alaikum..

Haloo, sobat WTD mungkin anda berfikir mengapa saya langsung meng-implementasikan bagaimana cara menulis css, bagaimana struktur dasar html namun saya tidak membahas apa itu HTML atau apaitu CSS. ada beberapa alasan pertama saya berfikir pengetahuan dasar apa itu html atau css dll kalian dapat mempelajari di wikipedia dan web lainnya, dan kedua saya lebih suka langsung ke implementasi daripada belajar apa ini dan apa itu terlebih dahulu, karena sesuai pengalaman saya tentang apa ini dan apa itu pasti akan kalian ketahui seiring berjalannya waktu.

Yups, langsung saja kita bahas.

ada 3 penulisan dasar dari CSS (Cassade Style Sheet).
pertama adalah Internal Css. Cekidot :


Pertama adalah External Css
Yaitu penulisan css yang disimpan pada file tersendiri dengan extensi [.css] dan akan dipanggil oleh HTML melalui tag perhatikan gambar diatas,

lalu href pada tag link tersebut arahkan pada file css anda misal anda menaruh file css anda pada direktori root/path/style.css maka panggil dengan mengetik seperti yang ada di gambar.

kedua adalah Internal Css
Yaitu Css yang dimasukan dengan tag [style], tag ini dimasukan di dalam tag [head] seperti pada gambar.

ketiga adalah inline Css
Yaitu Css yang dimasukan langsung pada baris tag yang ingin dirubah, misalnya anda ingin merubah background pada tag p maka akan seperti ini:


Perhatikan gambar diatas. style langsung di manipulasi di line yang ingin dirubah. itulah yang disebut Inline CSS.

Semoga Posting kali ini bermanfaat.

Asslamu'Alaikum..

struktur dasar html

08.44 Cecep101 0 Comments

Assalamu'Alaikum..

Dalam menulis document HTML sangat penting bagi seorang Designer website untuk mengetahui Struktur dasar HTML, bahkan ini adalah hal yang paling mendasar saat pertama kali seseorang ingin merancang/mendesain website.Berikut adalah struktur dasarnya:


Pastikan dalam merancang sebuah website, anda jangan sampai lupa untuk merancang struktur HTML seperti gambar diatas, walau tanpa tag seperti diatas html masih dapat berjalan. namun jika sudah masuk ke Hosting/ di onlinekan, tag diatas akan sangat berpengaruh, kesalahan kecil saja dapat membuat website anda di rating bawah. oleh karena itu penting bagi kita untuk merancang Html mengikuti struktur dasarnya,

Sekian Posting dari saya semoga bermanfaat, tunggu posting-posting berikutnya yang akan membahas Design website lebih mendalam sampai pada tingkat Master. dan bagaimana membuat website kita compatible dengan semua device yang di era modern ini makin "Bejibun" mulai dari Lepi, Tablet, Android. DLL dimana Setiap Device mempunyai settingan sendiri dari segi lebar device, pixel per inch dll. kita akan membahas pelan-pelan semuaya.

Salamu'Alaikum.