Elemen - Elemen CSS Serta Cara PenulisanNya

Baca Juga

Assalamu Alaikum Wr WbElemen - Elemen CSS Serta Cara PenulisanNyaPostingan ini adalah post pertamaku di kategori Cara Buat CSS ( MyWapBlog ) Dan Post yang ke 6x nya sejak berdirinya blog ini .. Ok kita langsung aja ke pembahasan .. kali ini Catatan Si Oon Akan membahas mengenai Elemen - Elemen CSS Serta Cara PenulisanNya .. Perlu digaris bawahi kalau saya "bukan mengajarkan" tapi sekedar berbagi .. berbagi kepada yang mau .. dan sebagai cacatan saya sendiri sebagai pengingat .. Untuk para Master 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 ..
CSS Kependekan Dari Kata Cascading Style Sheets .. merupakan bahasa pemograman untuk membentuk tampilan web / blog .. Dengan CSS ini kita bisa mengatur Background .. Warna text .. Posisi text .. dll .. CSS sendiri mempunyai rumus yang disebut syntax .. yang terdiri dari .. Selector .. Property .. Dan Value ..
Rumusnya seperti ini :

Selector {Property:Value;}

Catatan :
1. Untuk memberi property pada setiap selector harus diawali dengan tanda baca { ( kurva buka ) dan diahiri dengan tanda baca } ( kurva tutup )
.. 2. Setiap penambahan propertiharus diberi tanda baca ; ( koma titik ) ..
3. Untuk memberi nilai value harus diberi tanda baca : ( titik dua ) ..
Contoh :

body {background:#369;padding:3px 5px; margin:2px;}

Keterangan :
body= Selector
background, padding, margin = Property
#369, 3px 5px, 2px = Value
Value adalah nilai dari Properti .. Property adalah elemen dari Selector dan Selektor elemen dari CSS ..
Setelah kita tahu rumus dan cara penulisan CSS .. itulah tahap awal untuk membuat CSS .. Tahap selanjutnya yaitu kenali element-element pada CSS .. Elemen apa saja yang ada pada CSS .. kita bahas satu-satu .. yang pertama adalah bagian selector ..
Berikut adalah selector - selector pada CSS dan fungsi dari selector tersebut serta cara penulisannya :
body
Adalah keseluruhan badan CSS dari header sampai footer ..

body {background:#fff; border:none; margin:0px; padding:0px}

a
Adalah warna link pada CSS ..

a {color:#f00}

#header
Adalah elemen bagian atas / kepala

#header {background:#000; border:none; margin:0px; padding:3px;text-align:center;}

.heading a
Adalah element untuk mengatur warna link judul Blog ..

.heading a {color:#00f; text-align:center; font-size:50px;}

#header h1
Adalah element pembungkus link judul Blog

#header h1 {margin:0px; padding:2px}

#header h2
Adalah element pembungkus diskripsi Blog

#header h2 {margin:0px: padding:2px}

.heading
Adalah element untuk mengatur warna pada link Blog setelah membuka postingan penuh

.heading {color:#00f; text-align:center; font-size:30px;}

.description
Adalah element untuk mengatur warna pada diskripsi Blog

.description {color:#00f; text-align:center; margin:0px; padding:0px;}

#navigation
Adalah element pembungkus link Home, About, Navigation

#navigation {background:#999; text-align:center; padding:10px 0px 0px 0px; border:none; margin:0px}

#navigation a
Adalah element untuk mengatur warna link Home, About, Navigation

#navigation a {color:#fff; border:none; margin:5px 8px 0px 8px; padding:5px 8px 5px 8px; text-align:center}

#search-form
Adalah element pembungkus pencarian artikel di Blog

#search-form {background:#fff; padding:5px; border:none; margin:0px; text-align:center}

#search-form [type=text]
Adalah element untuk memasukkan keyword artikel yang akan dicari di Blog

#search-form [type=text] {background:#fff; padding:1px; border:1px solid #000; margin:1px; color:#000; width:70%; height:22px;}

#search-form [type=submit]
Adalah element untuk mengatur tombol searh pada penarian artikel

#search-form [type=submit] {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;}

#comments,#content
Adalah element element pembungkus seluruh postingan

#comments,#content {background:transparent; border:none; margin:3px; padding:3px}

.post
Adalah elemen pembungkus postingan

.post {background:#fff; border:none; margin:5px; padding:3px}

.post .post-meta
Adalah element pembungkus judul postingan, by admin dan tanggal waktu postingan

.post .post-meta {background:#fff; padding:0px; border:1px solid #dcdcdc; margin:0px;text-align:left; color:#000}

.post .post-meta h2
Adalah element pembungkus judul postingan saja

.post .post-meta h2 {border:none; margin:0px; text-align:left;}

.post .post-meta h2 a
Adalah Adalah element mengatur link judul postingan

.post .post-meta h2 a {color:#00f}

post .post-content
Adalah element untuk mengatur isi postingan pada home page ( belum dibuka full )

.post .post-content {padding:7px; color:#000; text-align:left}

.thumbnail
Adalah element untuk mengatur gambar postingan pada home page ( belum dibuka full )

.thumbnail {border:1px solid #ccc !important; background:white !important; margin:2px !important; width:60px !important; height:60px !important; padding:3px !important}

post-meta2
Adalah element pembungkus jumlah komentar pada postingan home page ( belum dibuka full )

.post-meta2 {background:#fff; border:none; padding:5px; margin:0px;text-align:right}

post-meta2 a
Adalah element untuk mengatur warna link jumlah komentar pada home page ( belum dibuka full )

.post-meta2 a {color:#00f}

#pagination-links
Adalah element pembungkus link halaman pada home page .. [1][2][3][>]

#pagination-links {background:#fff; border:none; margin:5px; padding:5px 0px 5px 0px;text-align:right}

#pagination-links span
Adalah element untuk mengatur link halaman yang sudah dibuka

#pagination-links span {color:#000}

#pagination-links a
Adalah elwment untuk mengatur warna link halaman yang belum dibuka

#pagination-links a {color:#00f}

#bottom-content
Adalah element pembungkus Navigation, Category, Blogroll

#bottom-content{background:transparent; border:none; margin:0px; padding:3px}

#navigation-menu ul
Adalah element pembungkus daftar Navigasi

#navigation-menu ul {background:#fff; border:1px solid #000; margin:5px; padding:3px}

#navigation-menu h3
Adalah element pembungkus judul Navigasi

#navigation-menu h3 {background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}

#navigation-menu h3 a
Adalah element untuk mengatur warna Navigasi

#navigation-menu h3 a {color:#00f}

#navigation-menu li
Adalah element pembungkus link daftar Navigasi

#navigation-menu li {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}

#navigation-menu li a
Adalah element untuk mengatur warna link daftar Navigasi

#navigation-menu li a {color:#00f}

#navigation-menu ol
Adalah element untuk mengatur jarak antara link daftar Navigasi

#navigation-menu ol{margin:-3px; padding:3px}

#category-bottom h3
Adalah element pembungkus judul Categories

#category-bottom h3{background:url(http://url_gambar) repeat-x;border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}

#category-bottom h3 a
Adalah element untuk mengatur warna judul Categories

#category-bottom h3 a {color:#fff}

#category-bottom ul
Adalah element pembungkus daftar Categori

#category-bottom ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}

#category-bottom li
Adalah element pembungkus link daftar Categories

#category-bottom li {list-style-image:url(http:url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}

#category-bottom li a
Adalah element untuk mengatur warna daftar link Categories

#category-bottom li a {color:#00f}

#category-bottom ol
Adalah element untuk mengatur jarak antara link daftar Categories

#category-bottom ol {margin:-3px; padding:3px}

#blogroll h3
Adalah element pembungkus judul Blogrool

#blogroll h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}

#category-bottom h3 a
Adalah element untuk mengatur warna judul Categories

#category-bottom h3 a {color:#00f}

#category-bottom ul
Adalah element pembungkus daftar Categories

#category-bottom ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}

#category-bottom li
Adalah element pembungkus link daftar Categories

#category-bottom li {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#000}

#category-bottom li a
Adalah element untuk mengatur warna link daftar Categories

#category-bottom li a {color:#00f}

#category-bottom ol
Adalah element mengatur jarak antar link daftar Categories

#category-bottom ol {margin:-3px; padding:3px}

#blogroll h3
Adalah element pembungkus Blogroll

#blogroll h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}

#blogroll h3 a
Adalah element untuk mengatur warna judul Blogroll

#blogroll h3 a {color:#fff}

#blogroll ul
Adalah element pembungkus judul Blogroll

#blogroll ul {background:#fff; border:1px solid #ddd; margin:5px; padding:0px}

#blogroll li
Adalah element pembungkus link daftar Blogroll

#blogroll li {list-style-image:url(http://url_icon); list-style-position:inside; border-bottom:1px solid #000; padding:3px; color:#00f}

#blogroll li a
Adalah element untuk mengatur warna daftar link Blogroll

#blogroll li a {color:#00f}

#blogroll ol
Adalah element mengatur jarak antar link daftar Blogroll

#blogroll ol {margin:-3px; padding:3px}

.post-single .post-meta
Adalah element pembungkus postingan pada single post ( postingan yang sudah dibuka full )

.post-single .post-meta {background:#fff; color:#000; text-align:left; border:1px solid #ddd; padding:0px; margin:0px}

post-single .post-meta h1
Adalah element pembungkus judul postingan, by admin, tanggal waktu posting dan kategory postingan. Pada postingan single post ( postingan sudah dibuka full )

.post-single .post-meta h1 {background:#fff; border:none; padding:0px; margin:0px;text-align:left}

.post-single .post-meta h2
Adalah element pembungkus kategori postingan pada postingan single post ( postingan sudah dibuka full )

.post-single .post-meta h2 {background:#fff; color:#000; border:none; padding:0px; margin:0px}

post-content
Adalah element mengatur isi postingan pada single post ( postingan yang sudah dibuka full )

.post-content {padding:5px; color:#000; text-align:left}

#share-buttons
Adalah element pembungkus icon share facebook dan twitter

#share-buttons {background#fff; text-align:center; border-top:1px solid #ddd; margin:0px; padding:5px}

#share-buttons a
Adalah element untuk mengatur icon facebook dan twitter

#share-buttons a {text-align:center}

#recent-posts-list h4
Adalah element pembungkus judul recent post

#recent-posts-list h4 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}

#recent-posts-list h4 a
Adalah element mengatur warna recent post

#recent-posts-list h4 a {color:#00f}

#recent-posts-list li
Adalah element pembungkus daftar recent post

#recent-posts-list li {list-style:none; border-bottom:1px solid #000; padding:3px; color:#00f}

#recent-posts-list li a
Adalah element untuk mengatur warna daftar link recent post

#recent-posts-list li a {color:#00f}

#recent-posts-list ol
Adalah element untuk mengatur jarak antar link daftar recent post

#recent-posts-list ol {margin:-3px; padding:3px}

#comments
Adalah element pembungkus seluruh komentar

#comments {background:#fff; margin:0px; padding:0px; border:none}

#comments h3
Adalah elemen pembungkus jumlah komentar

#comments h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px;font-size:50px}

#comments h3 a
Adalah element untuk mengatur warna judul comment

#comments h3 a {color:#00f}

#comments h4
Adalah element mengatur jumlah tanggapan atau responses

#comments h4 {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #ddd}

#comments h5
Adalah element mengatur kalimat subcribe RSS | ATOM

#comments h5 {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #000}

#comments
Adalah element pembungkus isi komentar

#comments {background:#fff; margin:3px; padding:0px; border:none}

.comment-header
Adalah element pembungkus nama komentato

.comment-header {background:#fff; padding:0px; color:#00f; margin-top:5px; border:1px solid #ddd; text-align:left}

.comment-header h5
Adalah element pembungkus nama komentator yang tidak sign in

.comment-header h5 {background:#fff; color:#000; padding:0px; margin:0px; border:none; text-align:left}

.comment-header h5 a
Adalah element mengatur warna nama komentator yang sign in

.comment-header h5 a {color:#00f}

.comment-content
Adalah element mengatur isi komentar

.comment-content {padding:5px; color:#000; text-align:left}

#new-entry h3
Adalah element pembungkus new comment

#new-entry h3 {background:url(http://url_gambar) repeat-x; border:1px solid #ddd; margin:5px; padding:2px; font-size:50px}

#new-entry h3 a
Adalah element untuk mengatur warna new comment

#new-entry h3 a {color:#00f}

#comments form
Adalah element pembungkus form komentar

#comments form {background:#fff; text-align:center; border:none; margin:0px; padding:0px; color:#000}

#comments form [type=text]
Adalah element pembungkus nama dan email si komentar

#comments form [type=text] {background:#fff; padding:0px; border:1px solid #ddd; margin:0px; color:#000; width:200px; height:23px;}

#comments form textarea
Adalah element kotak tempat menulis komentar

#comments form textarea {width:200px; height:70px; text-align;center; color:#000; background:#fff; border:1px solid #000}

#comments form [type=submit]
Adalah element tombol post comment

#comments form [type=submit] {background:#ddd; padding:0px; border:none; margin:5px 0px 5px 0px; color:#fff; width:205px; height:25px;}

#comments li
Adalah element pembungkus posted succesfully

#comments li {list-style:none;text-align:center; border:none; padding:3px; margin:0px; color:#00f}

#comments ol
Adalah element mengatur jarak #comment li

#comments ol {margin:3px; padding:3px}

#comment-forms small
Adalah element mengatur tulisan You can Code BBcode

#comment-form small {color:#000; text-align:center}

.link top a
Adalah element mengatur Go to top

.link top a {color:#00f}

.highlight
Adalah element mengatur show filed under dan content posted sucsesfully

highlight {padding:6px; margin:0; background:#fff; color:#fff; text-align:center}

#footer
Adalah element paling bawah

#footer {background:#fff; text-align:center; margin:5px; padding:5px 0px 5px 0px; border:1px solid #dcdcdc; color:#00f}

#footer a
Adalah element untuk warna link pada footer

#footer a {color:#00f}

#footer h6
Adalah elemen pembungkus powered by mywapblog

#footer h6 {margin:0px; padding:0px}

#following list h4
Adalah element mengatur bagian judul following list di halaman about

#following list h4 {background:#fff; padding:3px; margin:2px 3px

#footer #powered by
Adalah element untuk mengatur tulusan powered by

#footer #powered-by {color:#000; font-size:12px}

#footer #powered-by a
Adalah element untuk mengatur link mywapblog

#footer #powered-by a {color:#00f; font-size:12px}

#footer span
Adalah element mengatur visitor counter

#footer span {background:#fff; border:1px dashed #000}

#footer:after
Adalah element untuk menambah kalimat bagian bawah ( by creator )

#footer:after {content:"simple.css by Ocha Love Wida Forever" !important;color:#000;}

Itulah selector - selector CSS .. Setelah kita tahu selector - selektor CSS .. langkah selanjutnya kita kenali dulu property dan nilai valuenya .. Agar kita tahu fungsi dari properti dan value .. Apa saja property dan value CSS ? .. Untuk mengetahui property apa saja pada CSS dan valuenya .. akan saya bahas pada post selanjutnya .. Insya Allah .. Akhir Kata Saya Ucapkan ..
Wassalamu Alaikum Wr Wb