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 :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 :
contoh kode:
<div style='padding: 0 0 10px 0; min-height: 20px;' id='user_welcome_message'></div>
<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 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>
<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>
<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
manteeepp ...
ReplyDeletetengkyu mase ;)
sami2 maass :)
ReplyDeletesaya udah males mainan CSS di MP ... mending hitam putih standar aja
ReplyDeleteoalah tumben mas muha bagi2 ilmu...ckcikcickcici"
ReplyDeletesehat mas?
berguna mas..
ReplyDeletesaya sukanya mainin header ajah.. :D
klo mo ngliat semua selector, linknya apaan yah?
ReplyDelete#kang Tampah {
ReplyDeleteSekedar mengarsipkan kang..
}
#irud {
Xixixi..biar g lupa Rud, Alhamdulillah sehat..
}
#mbak Nita {
Heuheu..mari mari..dimaenin headernya..
}
#SS {
ReplyDeleteItu yg susah, soalnyah g semua selector di tulis di cssnya MP
Coba intip selector pake google chrome deh..
}
browserku pake FireFox
ReplyDeletesayah juga pake FF
ReplyDeletetapi 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...
tau selector buat ngeganti warna link yg dibawah Headshot -Rail (user logo) ??
ReplyDeleteklo kau kan mupengml nya warna putih tuh, klo diganti jadi merah gimana ya?
link-nya ini:
ReplyDeletehttp://laptopmini.multiply.com/journal/item/140/
.rail a, .rail a:visited, .rail a:link {
ReplyDeletecolor:#FFF2E0;
}
contoh ini selector yang dipake sama mupengml.
wow.....suwun mas Muha.......jadi inget yah pernah minta tolong ma Mas Muha soal theme hehehehehe makasih yo mas
ReplyDeleteini selectornya ada 3, dipake 33nya yah? ^^;
ReplyDeleteklo satu doang?
*nanya mlulu*
udah dijawabin si Ibra tuh :D
ReplyDeleteklo ganti warna font: "Buy Back'??
ReplyDeletesami2 Raas :D
ReplyDeleteituh yg sebelah mana yah?
ReplyDeletekok baru tau sayah....
dibawahnya Headshot user logo. nongolnya di Firefox doang keaknya, pas pake chrome tampilannya hanya satu garis lurus vertikal
ReplyDeletebtw gimana kabar kelanjutan kopdar yang dimalang??? moga lancar yah......
ReplyDeletekok gak keliatan yah....inih sayah pake FF...hikss....
ReplyDeletemumpung lagi OL, tulung liatin selectornya ngeganti warna font: " Inbox-MediaLocker-Apps-MySite" dunk~!
ReplyDeleteplz.. ^^
aaaamiiin..acaranya jadi sabtu besok..kemungkinan sayah gak bisa hadir...hiks...
ReplyDeletepake ini
ReplyDeletetd.firstnav ul.gnopt li.gnopt a, td.firstnav ul.gnopt li.gnoptsel a {
color: isi pake warna apa aja;
}
HAH!!! gak hadir???? bukannya panitia???? kasihan dunk si ketua nya
ReplyDeletehiks...iyah..ada tmn yg resepsi nikah di tulungagung, Juragan maksa semuanya ikut datang..termasuk sayah...T^T
ReplyDeleteoh begitu yah....temen yang pernah dibilang itu yah.....moga sukses dah buat semua acaranya yah.....
ReplyDeleteiyah..aamiiiiinnn.... :)
ReplyDeletetfs, meski jarang menggunakannya. pakai yang standar saja
ReplyDelete#mas Willy
ReplyDeletehehe..sama2..^^
wah,big tengkiyu deh.. :)
ReplyDeletesama2 ^^
ReplyDeleteasik2,, bljar lagi ^^b
ReplyDeletemonggo...silahkeun :)
ReplyDeleteketika menggunakan cara 1 untuk penulisan css di MP, maka di laptop saya sering error detect ketika dicentang verifikasi css?
ReplyDeleteada penjelasan kenapa?
cara 1 emang gak bisa di masukin ke kolom Custom CSS Multiply...
ReplyDeletetapi bisa dimasukin ke komen ato welcome box
hooo bunder....
ReplyDeletebtw layout berantakan tuh..
biar gak didelete MP yah hehehe
gsk berantakan...cuman diilangin imagenya doank..biar sekalian polos...haha
ReplyDeletedaripada kena gusur... :D
gak berantakan...cuman diilangin imagenya doank..biar sekalian polos...haha
ReplyDeletedaripada kena gusur... :D
sesuai dugaan^^
ReplyDelete