Tuesday 3 August 2010

penulisan CSS (bagian 1)

Bismillahirrohmaanirrohiiim...

sekedar mengingat kembali tentang dasar CSS :)
CSS (Cascading Style Sheets) sudah menjadi hal yang sering didengar oleh MP-ers. yang saya tau, CSS di tuliskan dengan beberapa cara berbeda (insyaAlloh ada 3 cara) antara lain sbb :
cara 1 :

contoh kode:
<div style='padding: 0 0 10px 0; min-height: 20px;' id='user_welcome_message'></div>
penjelasan:
perhatikan kode yang diwarnai merah, pada contoh diatas CSS di deklarasikan langsung di dalam tag div dengan menuliskannya diantara tanda single quote (') atau double quote (").
cara ini dirasa agak ribet karena harus menuliskan perintah CSS satu per satu untuk setiap tag yang ingin di custom (weleeehhhh...kebayang gimana ribetnya kalo pengen bikin website gede)
kekurangan: pseudo-element dan pseudo-class tidak dapat diperintah melalui cara ini, karena mereka hanya muncul pada kondisi tertentu.


cara 2 :

contoh kode:
<html>
<head>
<style type="text/css">
h1 {
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
penjelasan:
perhatikan kode yang diwarnai merah, pada contoh diatas CSS di deklarasikan dalam tag style. menurut saya, cara ini lebih ringkas dari cara pertama karena perintah CSS untuk semua tag dalam halaman html diatas dapat diakomodir dengan menuliskannya diantara tanda <style type="text/css"> dan tanda </style>. perintah-perintah yang ditulis diantara tag diatas dapat menjangkau hampir setiap elemen pada halaman dimaksud termasuk pseudo-element  dan pseudo-class.


cara 3 :

contoh kode:
<head>
<link rel="stylesheet" type="text/css" href="http://multiply.com/style/custom/redfrog/38.css">
</head>
penjelasan:
pada contoh diatas saya mengambil sebagian dari source-code multiply.com. css tipe ini dituliskan didalam tag link dan di simpan pada file yang berbeda dari halaman html. pada contoh diatas file css disimpan pada link http://multiply.com/style/custom/redfrog/38.css. penulisan css dengan cara ini saya anggap paling ringkas dan lebih memudahkan. ketika web editor ingin mengubah kode css dari halaman yang diinginkan tinggal mengubah file css yang sudah disimpan terpisah dengan file html.


alhamdulillah...selesaiii..semoga berguna  :)


nb: kalo kurang tolong ditambahin yah  :D
..................................bersambung ke postingan berikutnya.....................................
credits :
http://w3schools.com
http://multiply.com

41 comments:

  1. saya udah males mainan CSS di MP ... mending hitam putih standar aja

    ReplyDelete
  2. oalah tumben mas muha bagi2 ilmu...ckcikcickcici"

    sehat mas?

    ReplyDelete
  3. berguna mas..
    saya sukanya mainin header ajah.. :D

    ReplyDelete
  4. klo mo ngliat semua selector, linknya apaan yah?

    ReplyDelete
  5. #kang Tampah {
    Sekedar mengarsipkan kang..
    }
    #irud {
    Xixixi..biar g lupa Rud, Alhamdulillah sehat..
    }
    #mbak Nita {
    Heuheu..mari mari..dimaenin headernya..
    }

    ReplyDelete
  6. #SS {
    Itu yg susah, soalnyah g semua selector di tulis di cssnya MP
    Coba intip selector pake google chrome deh..
    }

    ReplyDelete
  7. sayah juga pake FF
    tapi demi pengen belajar yah maksa pake chrome...
    sampe sekarang malah jadi 4 browser yg nemplok di kumpie :
    FF, Flock, Opera, Chrome..eits..nambah 1 dink..Safari...

    ReplyDelete
  8. tau selector buat ngeganti warna link yg dibawah Headshot -Rail (user logo) ??
    klo kau kan mupengml nya warna putih tuh, klo diganti jadi merah gimana ya?

    ReplyDelete
  9. .rail a, .rail a:visited, .rail a:link {
    color:#FFF2E0;
    }

    contoh ini selector yang dipake sama mupengml.

    ReplyDelete
  10. wow.....suwun mas Muha.......jadi inget yah pernah minta tolong ma Mas Muha soal theme hehehehehe makasih yo mas

    ReplyDelete
  11. ini selectornya ada 3, dipake 33nya yah? ^^;
    klo satu doang?

    *nanya mlulu*

    ReplyDelete
  12. udah dijawabin si Ibra tuh :D

    ReplyDelete
  13. klo ganti warna font: "Buy Back'??

    ReplyDelete
  14. ituh yg sebelah mana yah?
    kok baru tau sayah....

    ReplyDelete
  15. dibawahnya Headshot user logo. nongolnya di Firefox doang keaknya, pas pake chrome tampilannya hanya satu garis lurus vertikal

    ReplyDelete
  16. btw gimana kabar kelanjutan kopdar yang dimalang??? moga lancar yah......

    ReplyDelete
  17. kok gak keliatan yah....inih sayah pake FF...hikss....

    ReplyDelete
  18. mumpung lagi OL, tulung liatin selectornya ngeganti warna font: " Inbox-MediaLocker-Apps-MySite" dunk~!
    plz.. ^^

    ReplyDelete
  19. aaaamiiin..acaranya jadi sabtu besok..kemungkinan sayah gak bisa hadir...hiks...

    ReplyDelete
  20. pake ini


    td.firstnav ul.gnopt li.gnopt a, td.firstnav ul.gnopt li.gnoptsel a {
    color: isi pake warna apa aja;
    }

    ReplyDelete
  21. HAH!!! gak hadir???? bukannya panitia???? kasihan dunk si ketua nya

    ReplyDelete
  22. hiks...iyah..ada tmn yg resepsi nikah di tulungagung, Juragan maksa semuanya ikut datang..termasuk sayah...T^T

    ReplyDelete
  23. oh begitu yah....temen yang pernah dibilang itu yah.....moga sukses dah buat semua acaranya yah.....

    ReplyDelete
  24. tfs, meski jarang menggunakannya. pakai yang standar saja

    ReplyDelete
  25. ketika menggunakan cara 1 untuk penulisan css di MP, maka di laptop saya sering error detect ketika dicentang verifikasi css?
    ada penjelasan kenapa?

    ReplyDelete
  26. cara 1 emang gak bisa di masukin ke kolom Custom CSS Multiply...
    tapi bisa dimasukin ke komen ato welcome box

    ReplyDelete
  27. hooo bunder....
    btw layout berantakan tuh..
    biar gak didelete MP yah hehehe

    ReplyDelete
  28. gsk berantakan...cuman diilangin imagenya doank..biar sekalian polos...haha
    daripada kena gusur... :D

    ReplyDelete
  29. gak berantakan...cuman diilangin imagenya doank..biar sekalian polos...haha
    daripada kena gusur... :D

    ReplyDelete

"berkatalah yang baik atau diam"