BELAJAR BIKIN CSS TEKNIK DASAR

Ass...wah binggun harus nyimpan data dimana buat belajar CSS lom ngerti-ngerti juga kwkwkwk.......ya sudah lah simpan disini aja kali aja bisa berguna buat yang mau belajar seperti ane.......




Karena nggak mau pusing sendirian,,,,akhir'x saya posting dech ''BELAJAR BIKIN CSS TEKNIK DASAR'' ini....
Sekalian ngajak2 para NEWBIe yang mau belajar bikin CSS, buat ikutan berPUSING-RIA seperti saya....hehehehe

Apa yang Harus Kamu Tahu Terlebih Dahulu?

Kamu harus paham tentang css, bila tidak tahu sama sekali, tidak masalah.

Melalui tutorial ini, kamu akan disulap menjadi MyWapBlog Designer dadakan secara cepat (insya allah).

Pengenalan CSS

CSS adalah bahasa/kode yang digunakan untuk mendesain tampilan halaman internet ( HTML, XHTML, dll.)
Dengan CSS, kamu bisa mengatur tampilan background, warna text, ketebalan text, perataan text/gambar/tabel/daftar, dll

Kode CSS

CSS memiliki syntax (kode baku) sebagai berikut:
selector { property: value }


contoh untuk mengatur paragraf:
p { background: red; color: white; }


maka paragraf akan tampil dengan background merah dan text berwarna putih.


Untuk memisahkan property, gunakan tanda titik-koma ( ; )


Keterangan:
1. SELECTOR, yaitu elemen/bagian halaman yang ingin kamu atur, misal:
paragraf, text, dll.
2. PROPERTY, yaitu atribut dari elemen yang ingin kamu atur, misal:
text diatur warnanya, ketebalannya, perataanya, dll.
3. VALUE, adalah nilai dari properti, misal:
warna merah, rata tengah, dll.

Penjelasan Syntax

1. SELECTOR, terdiri atas:
body= seluruh isi halaman.
p= paragraf.
a= anchor/link
#= id
. (titik)= class.

2. PROPERTY, terdiri atas:
color=warna text.
background= background.
align= perataan,,,terdiri atas: left, center, right, justify.
margin= batas tepi halaman dengan isi halaman.
border= bingkai halaman.
padding= batas bingkai dengan isi di dalam bingkai
VALUE =(diisi dengan).
color= di isi nama/kode warna.
background=diisi dengan warna atau url gambar.
margin= diisi dengan angka px (pixel) atau persen (misal: 12px atau 12%.)
border= (penjelasannya lumayan panjang).
padding= (penjelasannya lumayan panjang).

Dimana Kita Membuat dan Menyimpan Theme/CSS Kita?

Kamu harus punya wapsite atau situs lain yang bisa digunakan untuk membuat file CSS, misalnya wen.ru,
silakan buat wapsite di http://wen.ru
bila sudah punya, masuklah ke wExplorer > > add >> Create File (txt, css, js, wmls, xml) >> pada kotak atas,
isi nama halaman dengan nama yang kamu suka dan pada kotak bawahnya, pilih .css, klik OK.
masukkan kode CSS nya.
................................ berikut adalah pengaturan untuk seluruh isi halaman
body {...}
berikut adalah pengaturan standar paragraf
p {...}


berikut adalah pengaturan standar link
a {...}
pengaturan diatas berlaku apabila bagian-bagian dibawah ini tidak diatur.
berikut adalah pengaturan untuk judul blog
#header h1 a {...}
berikut adalah pengaturan untuk deskripsi blog
#header p {...}
berikut adalah pengaturan untuk Search Form
#search_form {...}
berikut adalah pengaturan untuk informasi saat seseorang mencari kata menggunakan Search Form
#search_info {...}
berikut adalah pengaturan untuk shortcut "[#] Comments"
#nav_shortcut {...}
berikut adalah pengaturan untuk judul post & nama komentator
.title {...}
berikut adalah pengaturan untuk isi posting
.post {...}
ralat: text penunjuk "Comments"
#comments h2 {...}
ralat: isi komentar
#comment p {...}
berikut adalah pengaturan untuk Comment Form
#comment_form {...}
berikut adalah pengaturan untuk judul Navigasi
#navigation h2 {...}
ralat: text pada bagian Navigasi
#navigation p {...}
berikut adalah pengaturan untuk link pada bagian Navigasi
#navigation a {...}
berikut adalah pengaturan untuk judul Blogroll
#blogroll h2 {...}
ralat: text pada Blogroll
#blogroll p {...}
berikut adalah pengaturan untuk link pada Blogroll
#blogroll a {...}
berikut adalah pengaturan untuk text pada footer
#footer p {...}
berikut adalah pengaturan untuk link pada footer
#footer a {...}
................................ Isilah ''{...}'' dengan kode CSS yang kamu kehendaki.
Misal:
body { background: #000000; color: #ffffff; text- align: center; text-size: small; margin: 5px; border: 2px solid #ff0000; padding: 10px; }
maka halaman akan tampil dengan warna hitam, text putih ukuran kecil, rata tengah, bingkai 2 pixel warna biru, margin 5 pixel, dan padding 10 pixel.
Silakan buang bagian yang tidak perlu.
Simpanlah file tersebut.
Masuk ke wExplorer, catat url file tersebut.
Sekarang masuk ke Dashboard MyWapBlog, pilih Blog Theme, masukan url theme buatan kamu.
Lihat hasilnya!

SUMBER