Blog Ponsel Si Oon: Seputar MyWapBlog

<div style="text-align: justify;"><center><span style="background: #0f0; color: red;"><b>Assalamu Alaikum Wr Wb</b></span></center><center><img alt="membuat-css-sendiri.jpg" height="85" src="http://ahmad-whydoerie.yu.tl/files/membuat-css-sendiri.jpg" width="70" /><span style="background: #0f0; color: red;"><b>Elemen - Elemen CSS Serta Cara PenulisanNya</b></span></center>Postingan ini adalah post pertamaku di kategori <span style="background: #0f0; color: red;"><b>Cara Buat CSS ( MyWapBlog )</b></span> Dan Post yang ke 6x nya sejak berdirinya blog ini .. Ok kita langsung aja ke pembahasan .. kali ini <a href="http://catatan-sioon.yu.tl/"><b>Catatan Si Oon</b></a> Akan membahas mengenai <span style="background: #0f0; color: red;"><b>Elemen - Elemen CSS Serta Cara PenulisanNya</b></span> .. Perlu digaris bawahi kalau saya <u><b>"bukan mengajarkan"</b></u> tapi sekedar berbagi .. berbagi kepada yang mau .. dan sebagai cacatan saya sendiri sebagai pengingat ..  Untuk para <span style="background: #0f0; color: red;"><b>Master</b></span> silahkan diteliti .. barang kali saya dalam pemaparan ada yang keliru / salah atau masih ada yang kurang .. Kalau ada yang keliru / salah akan saya perbaiki .. dan kalau ada yang kurang akan saya tambahkan ..<br /><span style="background: #0f0; color: red;"><b>CSS</b></span> Kependekan Dari Kata <span style="background: #0f0; color: red;"><b>Cascading Style Sheets</b></span> .. merupakan bahasa <b>pemograman</b> untuk membentuk tampilan <b>web / blog</b> .. Dengan CSS ini kita bisa mengatur   <span style="background: #0f0; color: red;">Background</span> .. <span style="background: #0f0; color: red;">Warna text</span> .. <span style="background: #0f0; color: red;">Posisi text</span> .. dll .. CSS sendiri mempunyai rumus yang disebut <span style="color: blue;"><b>syntax</b></span> .. yang terdiri dari ..  <span style="background: #0f0; color: red;">Selector</span> .. <span style="background: #0f0; color: red;">Property</span> .. Dan <span style="background: #0f0; color: red;">Value</span> ..<br /><b><u>Rumusnya seperti ini :</u></b><br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;"><b>Selector</b></span> <b>{</b><span style="color: blue;"><b>Property</b></span><b>:</b><b>Value;}</b></div><span style="background: #0f0; color: red;"><b>Catatan :</b></span><br /><b>1.</b> Untuk memberi <b>property</b> pada setiap <b>selector</b> harus diawali dengan tanda baca <span style="color: blue;"><b>{</b></span> <u>( kurva buka )</u> dan diahiri dengan tanda baca <span style="color: red;"><b>}</b></span> <u>( kurva tutup )</u><br />..  <b>2.</b> Setiap penambahan <b>properti</b>harus diberi tanda baca <span style="color: red;"><b>;</b></span> <u>( koma titik )</u> ..<br /><b>3.</b> Untuk memberi nilai <b>value</b> harus diberi tanda baca <span style="color: red;"><b>:</b></span> <u>( titik dua )</u> ..<br /><span style="background: #0f0; color: red;"><b>Contoh :</b></span><br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">body</span> {<span style="color: blue;">background</span>:<b>#369</b>;<span style="color: blue;">padding</span>:<b>3px 5px</b>; <span style="color: blue;">margin</span>:<b>2px</b>;}</div><br /><span style="background: #0f0; color: red;"><b>Keterangan :</b></span><br /><span style="color: red;">body</span>= <span style="color: red;">Selector</span><br /><span style="color: blue;">background, padding, margin</span> = <span style="color: blue;">Property</span><br /><b>#369, 3px 5px, 2px</b> = <b>Value</b><br /><b>Value</b> adalah nilai dari <b>Properti</b> .. <b>Property<b> adalah elemen dari <b>Selector</b> dan <b>Selektor</b> elemen dari <b>CSS</b> ..<br />  Setelah kita tahu rumus dan cara penulisan CSS .. itulah tahap awal untuk membuat CSS .. Tahap <b>selanjutnya</b> yaitu kenali element-element pada CSS .. Elemen apa saja yang ada pada CSS .. kita bahas satu-satu .. yang pertama adalah bagian <b>selector</b> ..</b></b><br />Berikut adalah <b>selector - selector</b> pada CSS dan fungsi dari selector tersebut serta cara <b>penulisannya :</b><br /><span style="color: red;">body</span><br />Adalah keseluruhan badan <b>CSS</b> dari <b>header</b> sampai <b>footer</b> ..<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">body</span> {background:#fff; border:none; margin:0px; padding:0px}</div><span style="color: red;">a</span><br />Adalah warna link pada CSS ..<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">a</span> {color:#f00}</div><br /><span style="color: red;">#header</span><br />Adalah elemen bagian atas / kepala<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#header</span> {background:#000; border:none; margin:0px; padding:3px;text-align:center;}</div><span style="color: red;">.heading a</span><br />Adalah element untuk mengatur warna link judul Blog ..<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.heading a</span> {color:#00f; text-align:center; font-size:50px;}</div><span style="color: red;">#header h1</span><br />Adalah element pembungkus link judul Blog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#header h1</span> {margin:0px; padding:2px}</div><span style="color: red;">#header h2</span><br />Adalah element pembungkus diskripsi Blog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#header h2</span> {margin:0px: padding:2px}</div><span style="color: red;">.heading</span><br />Adalah element untuk mengatur warna pada link Blog setelah membuka postingan penuh<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.heading</span> {color:#00f; text-align:center; font-size:30px;}</div><span style="color: red;">.description</span><br />Adalah element untuk mengatur warna pada diskripsi Blog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.description</span> {color:#00f; text-align:center; margin:0px; padding:0px;}</div><span style="color: red;">#navigation</span><br />Adalah element pembungkus link Home, About, Navigation<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation</span> {background:#999; text-align:center; padding:10px 0px 0px 0px; border:none; margin:0px}</div><span style="color: red;">#navigation a</span><br />Adalah element untuk mengatur warna link Home, About, Navigation<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation a</span> {color:#fff; border:none; margin:5px 8px 0px 8px; padding:5px 8px 5px 8px; text-align:center}</div><span style="color: red;">#search-form</span><br />Adalah element pembungkus pencarian artikel di Blog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#search-form</span> {background:#fff; padding:5px; border:none; margin:0px; text-align:center}</div><span style="color: red;">#search-form [type=text]</span><br />Adalah element untuk memasukkan keyword artikel yang akan dicari di Blog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#search-form [type=text] </span>{background:#fff; padding:1px; border:1px solid #000; margin:1px; color:#000; width:70%; height:22px;}</div><span style="color: red;">#search-form [type=submit]</span><br />Adalah element untuk mengatur tombol searh pada penarian artikel<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#search-form [type=submit] </span>{background:#fff url(http://url_icon_search) center no-repeat; padding:1px; border:1px solid #000; margin:1px; font-size:0; width:25%; height:25px;}</div><span style="color: red;">#comments,#content</span><br />Adalah element element pembungkus seluruh postingan<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments,#content</span> {background:transparent; border:none; margin:3px; padding:3px}</div><span style="color: red;">.post</span><br />Adalah elemen pembungkus postingan<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post</span> {background:#fff; border:none; margin:5px; padding:3px}</div><br /><span style="color: red;">.post .post-meta</span><br />Adalah element pembungkus judul postingan, by admin dan tanggal waktu postingan<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post .post-meta</span> {background:#fff; padding:0px; border:1px solid #dcdcdc; margin:0px;text-align:left; color:#000} </div><span style="color: red;">.post .post-meta h2</span><br />Adalah element pembungkus judul postingan saja<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post .post-meta h2</span> {border:none; margin:0px; text-align:left;}</div><span style="color: red;">.post .post-meta h2 a</span><br />Adalah Adalah element mengatur link judul postingan<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post .post-meta h2 a</span> {color:#00f}</div><span style="color: red;">post .post-content</span><br />Adalah element untuk mengatur isi postingan pada home page ( belum dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post .post-content</span> {padding:7px; color:#000; text-align:left}</div><span style="color: red;">.thumbnail</span><br />Adalah element untuk mengatur gambar postingan pada home page ( belum dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.thumbnail</span> {border:1px solid #ccc !important; background:white !important; margin:2px !important; width:60px !important; height:60px !important; padding:3px !important}</div><span style="color: red;">post-meta2</span><br />Adalah element pembungkus jumlah komentar pada postingan home page ( belum dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-meta2</span> {background:#fff; border:none; padding:5px; margin:0px;text-align:right}</div><span style="color: red;">post-meta2 a</span><br />Adalah element untuk mengatur warna link jumlah komentar pada home page ( belum dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-meta2 a</span> {color:#00f} </div><span style="color: red;">#pagination-links</span><br />Adalah element pembungkus link halaman pada home page .. <b>[1][2][3][>]</b><br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#pagination-links</span> {background:#fff; border:none; margin:5px; padding:5px 0px 5px 0px;text-align:right}</div><span style="color: red;">#pagination-links span</span><br />Adalah element untuk mengatur link halaman yang sudah dibuka<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#pagination-links span</span> {color:#000}</div><span style="color: red;">#pagination-links a</span><br />Adalah elwment untuk mengatur warna link halaman yang belum dibuka<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#pagination-links a</span> {color:#00f}</div><span style="color: red;">#bottom-content</span><br />Adalah element pembungkus Navigation, Category, Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#bottom-content</span>{background:transparent; border:none; margin:0px; padding:3px}</div><span style="color: red;">#navigation-menu ul</span><br />Adalah element pembungkus daftar Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu ul</span> {background:#fff; border:1px solid #000; margin:5px; padding:3px}</div><span style="color: red;">#navigation-menu h3</span><br />Adalah element pembungkus judul Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu h3</span> {background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}</div><span style="color: red;">#navigation-menu h3 a</span><br />Adalah element untuk mengatur warna Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu h3 a</span> {color:#00f}</div><span style="color: red;">#navigation-menu li</span><br />Adalah element pembungkus link daftar Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu li</span> {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}</div><span style="color: red;">#navigation-menu li a</span><br />Adalah element untuk mengatur warna link daftar Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu li a</span> {color:#00f}</div><span style="color: red;">#navigation-menu ol</span><br />Adalah element untuk mengatur jarak antara link daftar Navigasi<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#navigation-menu ol</span>{margin:-3px; padding:3px}</div><span style="color: red;">#category-bottom h3</span><br />Adalah element pembungkus judul Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom h3</span>{background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}</div><span style="color: red;">#category-bottom h3 a</span><br />Adalah element untuk mengatur warna judul Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom h3 a</span> {color:#fff}</div><span style="color: red;">#category-bottom ul</span><br />Adalah element pembungkus daftar Categori<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom ul </span>{background:#fff; border:1px solid #ddd; margin:5px; padding:0px}</div><span style="color: red;">#category-bottom li</span><br />Adalah element pembungkus link daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom li</span> {list-style-image:url(http:url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}</div><span style="color: red;">#category-bottom li a</span><br />Adalah element untuk mengatur warna daftar link Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom li a</span> {color:#00f}</div><span style="color: red;">#category-bottom ol</span><br />Adalah element untuk mengatur jarak antara link daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom ol</span> {margin:-3px; padding:3px}</div><span style="color: red;">#blogroll h3</span><br />Adalah element pembungkus judul Blogrool<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll h3</span> {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}</div><span style="color: red;">#category-bottom h3 a</span><br />Adalah element untuk mengatur warna judul Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom h3 a</span> {color:#00f}</div><span style="color: red;">#category-bottom ul</span><br />Adalah element pembungkus daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom ul </span>{background:#fff; border:1px solid #ddd; margin:5px; padding:0px}</div><span style="color: red;">#category-bottom li</span><br />Adalah element pembungkus link daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom li</span> {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#000}</div><span style="color: red;">#category-bottom li a</span><br />Adalah element untuk mengatur warna link daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom li a</span> {color:#00f}</div><span style="color: red;">#category-bottom ol</span><br />Adalah element mengatur jarak antar link daftar Categories<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#category-bottom ol</span> {margin:-3px; padding:3px}</div><span style="color: red;">#blogroll h3</span><br />Adalah element pembungkus Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll h3</span> {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}</div><span style="color: red;">#blogroll h3 a</span><br />Adalah element untuk mengatur warna judul Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll h3 a</span> {color:#fff}</div><span style="color: red;">#blogroll ul</span><br />Adalah element pembungkus judul Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll ul</span> {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}</div><span style="color: red;">#blogroll li</span><br />Adalah element pembungkus link daftar Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll li</span> {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}</div><span style="color: red;">#blogroll li a</span><br />Adalah element untuk mengatur warna daftar link Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll li a</span> {color:#00f}</div><span style="color: red;">#blogroll ol</span><br />Adalah element mengatur jarak antar link daftar Blogroll<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#blogroll ol</span> {margin:-3px; padding:3px}</div><span style="color: red;">.post-single .post-meta</span><br />Adalah element pembungkus postingan pada single post ( postingan yang sudah dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-single .post-meta</span> {background:#fff; color:#000; text-align:left; border:1px solid #ddd; padding:0px; margin:0px}</div><span style="color: red;">post-single .post-meta h1</span><br />Adalah element pembungkus judul postingan, by admin, tanggal waktu posting dan kategory postingan. Pada postingan single post ( postingan sudah dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-single .post-meta h1</span> {background:#fff; border:none; padding:0px; margin:0px;text-align:left}</div><span style="color: red;">.post-single .post-meta h2</span><br />Adalah element pembungkus kategori postingan pada postingan single post ( postingan sudah dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-single .post-meta h2 </span>{background:#fff; color:#000; border:none; padding:0px; margin:0px}</div><span style="color: red;">post-content</span><br />Adalah element mengatur isi postingan pada single post ( postingan yang sudah dibuka full )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.post-content</span> {padding:5px; color:#000; text-align:left}</div><span style="color: red;">#share-buttons</span><br />Adalah element pembungkus icon share facebook dan twitter<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#share-buttons</span> {background#fff; text-align:center; border-top:1px solid #ddd; margin:0px; padding:5px}</div><span style="color: red;">#share-buttons a</span><br />Adalah element untuk mengatur icon facebook dan twitter<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#share-buttons a</span> {text-align:center}</div><span style="color: red;">#recent-posts-list h4</span><br />Adalah element pembungkus judul recent post<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#recent-posts-list h4</span> {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}</div><span style="color: red;">#recent-posts-list h4 a</span><br />Adalah element mengatur warna recent post<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#recent-posts-list h4 a</span> {color:#00f}</div><span style="color: red;">#recent-posts-list li</span><br />Adalah element pembungkus daftar recent post<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#recent-posts-list li</span> {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}</div><span style="color: red;">#recent-posts-list li a</span><br />Adalah element untuk mengatur warna daftar link recent post<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#recent-posts-list li a</span> {color:#00f}</div><span style="color: red;">#recent-posts-list ol</span><br />Adalah element untuk mengatur jarak antar link daftar recent post<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#recent-posts-list ol</span> {margin:-3px; padding:3px}</div><span style="color: red;">#comments</span><br />Adalah element pembungkus seluruh komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments</span> {background:#fff; margin:0px; padding:0px; border:none}</div><span style="color: red;">#comments h3</span><br />Adalah elemen pembungkus jumlah komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments h3 </span>{background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}</div><span style="color: red;">#comments h3 a</span><br />Adalah element untuk mengatur warna judul comment<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments h3 a</span> {color:#00f}</div><span style="color: red;">#comments h4</span><br />Adalah element mengatur jumlah tanggapan atau responses<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments h4</span> {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #ddd}</div><span style="color: red;">#comments h5</span><br />Adalah element mengatur kalimat subcribe RSS | ATOM<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments h5</span> {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #000}</div><span style="color: red;">#comments</span><br />Adalah element pembungkus isi komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments</span> {background:#fff; margin:3px; padding:0px; border:none}</div><span style="color: red;">.comment-header</span><br />Adalah element pembungkus nama komentato<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.comment-header </span>{background:#fff; padding:0px; color:#00f; margin-top:5px; border:1px solid #ddd; text-align:left}</div><span style="color: red;">.comment-header h5</span><br />Adalah element pembungkus nama komentator yang tidak sign in<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.comment-header h5</span> {background:#fff; color:#000; padding:0px; margin:0px; border:none; text-align:left}</div><span style="color: red;">.comment-header h5 a</span><br />Adalah element mengatur warna nama komentator yang sign in<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.comment-header h5 a</span> {color:#00f}</div><br /><span style="color: red;">.comment-content</span><br />Adalah element mengatur isi komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.comment-content</span> {padding:5px; color:#000; text-align:left}</div><span style="color: red;">#new-entry h3</span><br />Adalah element pembungkus new comment<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#new-entry h3</span> {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}</div><span style="color: red;">#new-entry h3 a</span><br />Adalah element untuk mengatur warna new comment<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#new-entry h3 a</span> {color:#00f} </div><span style="color: red;">#comments form</span><br />Adalah element pembungkus form komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments form</span> {background:#fff; text-align:center; border:none; margin:0px; padding:0px; color:#000}</div><span style="color: red;">#comments form [type=text]</span><br />Adalah element pembungkus nama dan email si komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments form [type=text]</span> {background:#fff; padding:0px; border:1px solid #ddd; margin:0px; color:#000; width:200px; height:23px;}</div><span style="color: red;">#comments form textarea</span><br />Adalah element kotak tempat menulis komentar<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments form textarea</span> {width:200px; height:70px; text-align;center; color:#000; background:#fff; border:1px solid #000}</div><span style="color: red;">#comments form [type=submit]</span><br />Adalah element tombol post comment<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments form [type=submit]</span> {background:#ddd; padding:0px; border:none; margin:5px 0px 5px 0px; color:#fff; width:205px; height:25px;}</div><span style="color: red;">#comments li</span><br />Adalah element pembungkus posted succesfully<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments li</span> {list-style:none;text-align:center; border:none; padding:3px; margin:0px; color:#00f}</div><span style="color: red;">#comments ol</span><br />Adalah element mengatur jarak #comment li<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comments ol</span> {margin:3px; padding:3px}</div><span style="color: red;">#comment-forms small</span><br />Adalah element mengatur tulisan You can Code BBcode<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#comment-form small</span> {color:#000; text-align:center}</div><span style="color: red;">.link top a</span><br />Adalah element mengatur Go to top<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">.link top a</span> {color:#00f}</div><span style="color: red;">.highlight</span><br />Adalah element mengatur show filed under dan content posted sucsesfully<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">highlight</span> {padding:6px; margin:0; background:#fff; color:#fff; text-align:center}</div><span style="color: red;">#footer</span><br />Adalah element paling bawah<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer</span> {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #dcdcdc; color:#00f} </div><span style="color: red;">#footer a</span><br />Adalah element untuk warna link pada footer<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer a</span> {color:#00f}</div><span style="color: red;">#footer h6</span><br />Adalah elemen pembungkus powered by mywapblog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer h6</span> {margin:0px; padding:0px}</div><span style="color: red;">#following list h4</span><br />Adalah element mengatur bagian judul following list di halaman about<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#following list h4</span> {background:#fff; padding:3px; margin:2px 3px </div><span style="color: red;">#footer #powered by</span><br />Adalah element untuk mengatur tulusan powered by<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer #powered-by</span> {color:#000; font-size:12px}</div><span style="color: red;">#footer #powered-by a</span><br />Adalah element untuk mengatur link mywapblog<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer #powered-by a</span> {color:#00f; font-size:12px}</div><span style="color: red;">#footer span</span><br />Adalah element mengatur visitor counter<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer span</span> {background:#fff; border:1px dashed #000}</div><span style="color: red;">#footer:after</span><br />Adalah element untuk menambah kalimat bagian bawah ( by creator )<br /><div style="background: #ccc; border: 3px solid #000; margin: 20px; padding: 3px;"><span style="color: red;">#footer:after</span> {content:"simple.css by Ocha Love Wida Forever" !important;color:#000;}</div>Itulah <span style="background: #0f0; color: red;"><b>selector - selector CSS</b></span> .. Setelah kita tahu <span style="background: #0f0; color: red;"><b>selector - selektor CSS</b></span> .. langkah <b>selanjutnya</b> kita kenali dulu  <span style="background: #0f0; color: red;"><b>property</b></span> dan nilai <span style="background: #0f0; color: red;"><b>valuenya</b></span> .. Agar kita tahu <b>fungsi</b> dari <span style="color: red;"><b>properti</b></span> dan <span style="color: blue;"><b>value</b></span> .. Apa saja <span style="background: #0f0; color: red;"><b>property dan value CSS ?</b></span> .. Untuk mengetahui <span style="color: blue;"><b>property</b></span> apa saja pada <span style="color: red;"><b>CSS</b></span> dan <span style="color: green;"><b>valuenya</b></span> .. akan saya bahas pada <span style="background: #0f0; color: red;"><b>post selanjutnya</b></span> .. <b>Insya Allah</b> .. Akhir Kata Saya Ucapkan ..<br /><center><img alt="4338649.png" src="http://images.cooltext.com/4338649.png" /></center><center><span style="background: #0f0; color: red;"><b>Wassalamu Alaikum Wr Wb</b></span></center></div>

Elemen - Elemen CSS Serta Cara PenulisanNya

Assalamu Alaikum Wr Wb Elemen - Elemen CSS Serta Cara PenulisanNya Postingan ini adalah post pertamaku di kategori Cara Buat CSS ( MyWapBlog...

Blog Ponsel Si Oon

Cara Buat Cloud Category dan Blogroll di CSS MyWapBlog

Elemen - Elemen CSS Serta Cara PenulisanNya

Popular

Labels

Archive