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
aku masih agak bingung... nanti dibaca lagi ya... makasih infonya... :)
ReplyDeletesama2...
ReplyDeletetrims ilmunya... ;D
ReplyDeletesama2 :)
ReplyDeleteSaya kira kita-kita di MP ini tidak akan pernah menikmati cara #2 dan cara #3 yang secara langsung inserted command di antara <head> dan </head>
ReplyDeleteYang bisa kita nnikmati adalah cara #1 dan "sebagian" cara #3 yang file css-nya disimpan di custom.css yang berada pada directory / alamat http://USER_ID.multiply.com/style-custom/USER-ID/REV_NUM/custom.css
Sebaiknya memang kita simpan di custom.css karena bersifat global, memudahkan editing. Tidak harus edit setiap style hehehehe ...
Ditunggu postingan berikutnya.
Get more dangdut! | Belajar & Berbagi
yayaya..benul.. :D
ReplyDeleteham.. TFS gan.
ReplyDeletesama2 Gan..wah budi jd kaskuser reek..
ReplyDeletethx mas
ReplyDeletetengkiu
ReplyDeletesama2..
ReplyDeletesama2 :)
ReplyDeletewah mas, gak ngti,,
ReplyDeleteini cuman ragam penulisan CSS saja kok..
ReplyDeletedan penggunaannya pun berbeda tergantung pada kebutuhan
Wah , bermanfaat sekali ilmunya gan.
ReplyDeleteTapi aku tetep belum ngerti .Karna aku memang gaptek...he he
hehehe..pelan2 saja...ndak perlu tergesa2, pelajarin 1/1 sampe ngerti
ReplyDeleteBy Kotak (OOT)
ReplyDelete*jitak Budi*
ReplyDeleteninggalin jejak dulu
ReplyDeletehmm..
ReplyDeleteiya yg kedua itu langsung sebut nama... *sambil mikir blank
nyebut namanya siapa yah?? *bingung*
ReplyDeletenama warna :D
ReplyDeletetapi ga bisa spesifikasi tingkat muda-tuanya to..