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:

• Border Top, untuk mengatur garis pinggir sebelah atas.
  Contoh:

div {border-top-style:solid;
    border-top-width:1px;
    border-top-color:#FF0000;}

• Border Right, untuk mengatur garis pinggir sebelah kanan.
  Contoh:

div {border-right-style:double;
    border-right-width:4px;
    border-right-color:#000000;}

• Border Bottom, untuk mengatur garis pinggir sebelah bawah.
  Contoh:

div {border-bottom-style:dashed;
    border-bottom-width:thick;
    border-bottom-color:#FF0000;}

• Border Left, untuk mengatur garis pinggir sebelah kiri.
  Contoh:

div {border-left-style:dotted;
    border-left-width:thin;
    border-left-color:#FF0000;}

Apabila anda ingin menggabungkan semua properti border menjadi satu deklarasi, caranya adalah seperti berikut ini:

div {border-top:1px solid #000000;
    border-right :2px dashed #cccccc;
    border-bottom:3px dotted #999999;
    border-left :4px double #333333;}