Pertama: Siapkan waktu dan pikiran yang sehat.
maksudnya adalah semakin banyak anda punya waktu untuk belajar CSS maka semakin cepat anda pintar dan tentu harus didukung dengan pikiran yang sehat agar selalu menghasilkan yang terbaik.

Kedua: Cobalah jangan takut salah.
maksudnya adalah pada kode CSS anda akan banyak menemukan bahasa yang asing didengar/dilihat dan sulit diterangkan satu persatu, maka daripada itu anda harus berani mencoba satu persatu dan lihat perbedaan efek yang terjadi pada browser. Dengan demikian saya rasa anda akan lebih cepat ingat daripada anda diberitahu langsung oleh seseorang.

Ketiga: Cari tutorial sebanyak mungkin.
maksudnya adalah segala yang ada dibumi ini tidak ada yang abadi termasuk CSS, pelajari hal hal yang baru tentang CSS melalui media, baik itu internet ataupun buku buku yang menjelaskan tentang CSS.

Keempat: Jangan pernah putus asa.
maksudnya adalah kalau anda benar benar tekun dan serius belajar CSS dan menjadikan CSS bagian dari permainan anda maka saya yakin anda adalah orang  yang  tak kenal menyerah.

Properti Display, befungsi untuk mengatur tampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti display adalah: inline, block, list-item, run-in, inline-block, compact, inline-table, marker, table, table-caption, table-cell, table-column, table-row, table-footer-group, table-header-group, table-column-group, table-row-group, inherit dan none.

contoh:

div#topMenu {display:inline;}

Properti Overflow, berfungsi untuk menentukan keadaan yang diperlakukan pada suatu elemen apabila isinya melebihi box diluarnya. Nilai nilai yang dapat ditulis pada properti overflow adalah: auto, visible, scroll, hidden dan inherit.

contoh:

.content { overflow:scroll;}

Properti Visibility, berfungsi untuk menentukan penampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti visibility adalah: collapse, visible,  hidden dan inherit.

contoh:

.content img  { visibility:hidden;}

Properti Cursor, berfungsi untuk menentukan penampilan cursor ketika mouse melewati suatu elemen. Nilai nilai yang dapat ditulis pada properti cursor adalah: crosshair, pointer, move, text, wait, auto, default, help, e-resize, n-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize, progress dan inherit.

contoh:

img a:hover  { cursor:pointer;}

Jika anda ingin melihat tampilan cursor yang lain pada browser, cobalah satu persatu dari nilai nilai properti cursor tersebut.

Properti Padding

Cara penulisan properti padding, hampir sama dengan cara penulisan properti margin, yaitu:

1.

div#sidebox {padding:10px;}

maksud dari code diatas adalah menunjukan bahwa ke empat sisi dari selector sidebox bejarak 10 pixel antara border dan content.

2.

div#sidebox {padding:10px 20px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content pada sebelah atas dan bawah dari selector sidebox adalah 10 pixel sedangkan pada sebelah kiri dan kanan berjarak 20 pixel.

3.

div#sidebox {padding:10px 20px 30px 40px;}

atau bisa juga dengan cara seperti dibawah ini:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content dari selector sidebox pada sebelah atas 10 pixel, kanan 20 pixel, bawah 30 pixel, dan kiri  adalah 40 pixel.

4.

div#sidebox {padding-top:10px;}

maksud dari code diatas adalah menunjukan bahwa border dan content dari selector sidebox pada sebelah atas adalah 10 pixel, sedangkan batas yang lainnya bernilai Default. Dan selain padding-top, juga bisa dengan properti padding-right, padding-bottom dan padding-left.

Selain dengan satuan px (pixel) juga bisa dengan satuan emphasis (em) atau persentase (%), seperti contoh:

div#sidebox {padding:1em 2%;}

Hasilnya ?…
anda bisa melakukan eksperimen sendiri kemudian test pada browser anda. dengan cara demikian akan membuat permainan anda semakin menantang.

Cara penulisan properti margin, hampir sama dengan cara penulisan properti padding, yaitu:

1.

div#sidebox {margin:10px;}

maksud dari code diatas adalah menunjukan bahwa ke empat sisi dari selector sidebox bejarak 10 pixel antara border dan sisi selector.

2.

div#sidebox {margin:10px 20px;}

maksud dari code diatas adalah menunjukan bahwa batas atas dan bawah dari selector sidebox bejarak 10 pixel sedangkan batas kiri dan kanan berjarak 20 pixel.

3.

div#sidebox {margin:10px 20px 30px 40px;}

atau bisa juga dengan cara seperti dibawah ini:

div#sidebox {margin-top:10px; margin-right:20px;
margin-bottom:30px; margin-left:40px;}

maksud dari code diatas adalah menunjukan bahwa batas atas dari selector sidebox bejarak 10 pixel, batas kanan berjarak 20 pixel, batas bawah berjarak 30px dan batas kiri berjarak 40px.

4.

div#sidebox {margin-top:10px;}

maksud dari code diatas adalah menunjukan bahwa batas atas dari selector sidebox bejarak 10 pixel sedangkan batas yang lainnya bernilai Default. Dan selain margin-top, juga bisa dengan properti margin-right, margin-bottom dan margin-left.

Selain dengan satuan px (pixel) juga bisa dengan satuan emphasis (em) atau persentase (%), seperti contoh:

div#sidebox {margin:1em 2%;}

Hasilnya ?…
anda bisa melakukan eksperimen sendiri kemudian test pada browser anda. dengan cara demikian akan membuat permainan anda semakin menantang.

Ada beberapa macam properti Font antara lain:

• Font, untuk mengatur secara keseluruhan nilai-nilai yang digunakan pada suatu elemen.
  contoh:

p { font:bold 20px Arial, Helvetica sans-serif ;}

• Font-family, untuk mengatur model/jenis font pada suatu elemen.
  contoh:

p { font-family:”Verdana” Arial Helvetica sans-serif ;}

• Font-size, untuk mengatur ukuran font pada suatu elemen. Nilainya dapat berupa satuan unit, persentase, ataupun inherit, xx-small, x-small, small, smaller, xx-large, x-large, large, larger dan medium.
  contoh:

p { font-size:xx-large ;}

• Font-style, untuk mengatur model/gaya font pada suatu elemen. Nilainya dapat berupa inherit, italic, normal dan oblique.
  contoh:

p { font-style:italic ;}

• Font-weight, untuk mengatur tebal/tipis font pada suatu elemen. Nilainya dapat berupa bold, normal, inherit, bolder, lighter, ataupun satuan angka dari 100-900.
  contoh:

p { font-weight:bold;}

Properti Text berfungsi untuk mengatur gaya atau style teks pada suatu elemen.
Ada beberapa macam properti Text antara lain:

• Text-align, untuk menentukan perataan teks pada suatu elemen.Nilainya dapat berupa left,center dan right.
  contoh:

p {text-align:left;}

• Text-transform, untuk merubah teks menjadi huruf besar atau kecil pada suatu elemen. Nilainya dapat berupa uppercase, lowercase, capitalize dan none.
  contoh:

p {text-transform:uppercase;}

• Text-indent, untuk mengatur jarak masuk teks pertama pada paragraf pada suatu elemen. Nilainya dapat berupa inherit atau satuan unit.
  contoh:

p {text-indent:4px;}

• Line-height, untuk mengatur jarak baris antar teks pada suatu elemen. Nilainya dapat berupa persentase atau satuan unit.
  contoh:

p {line-height:14px;}

• Letter-spacing, untuk mengatur jarak spasi antar teks pada suatu elemen. Nilainya dapat berupa inherit, normal, persentase atau satuan unit.
  contoh:

p {letter-spacing:1px;}

• Text-decoration, untuk menentukan dekorasi teks pada suatu elemen. Nilainya dapat berupa underline, line-through, overline, blink dan none.
  contoh:

p {text-decoration:underline;}

ID Selector adalah selector yang dapat digunakan hanya satu kali pada suatu elemen, sedangkan Class Selector dapat digunakan beberapa kali pada suatu elemen.

Penulisan ID Selector pada CSS diawali dengan simbol # (octothorpe) sedangkan penulisan Class Selector pada CSS diawali dengan tanda titik (.)

Contoh:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ID Selector dan Class</title>
<style type=”text/css”>
.box {border:2px solid #666666; padding:10px; margin-bottom:10px;}
#header_title {font-size:24px; color:#FF0000; text-transform:uppercase; text-align:center}
#header_desc {font-size:16px; color: #666600; text-transform:uppercase; text-align:center}
</style>
</head>
<body>
<div class=”box”>
<p id=”header_title”>Gus Dwi&acute;s Blog<br/><span id=”header_desc”>Tentang CSS tutorial</span></p>
</div>
<div class=”box”>
<p>Isi keterangan tentang Blog anda disini</p>
</div>
</body>
</html>

Kalau dilihat pada browser akan menjadi seperti ini: