Lihatlah tampilan contoh paragraf pada artikel dibawah ini…!
Jika anda tertarik untuk membuatnya, silahkan ambil contoh kode html dan css sintak-nya dibawah ini……..

Caranya adalah sebagai berikut:

• Pertama, buatlah sebuah dokumen baru pada Notepad, lalu ketikan <div class=”kolom-wrap></div>.
• Ketik <h1>JUDUL ARTIKEL</h1><hr/>diantara tag <div class=”kolom-wrap></div>.
• Dibawah tag </hr/>, ketik lagi sebuah tag <div class=”kolom”></div>.
• Diantara tag <div class=”kolom”></div> adalah isi paragraf dari sebuah artikel yang diawali dengan tag <p> dan ditutup dengan tag </p>.

Contoh kode HTML nya seperti ini:

<div class=”kolom-wrap>
<h1>JUDUL ARTIKEL</h1>
<hr/>
<div class=”kolom”>
<p>Sebulan sebelum hari raya NYEPI,
biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.</p>
<p>Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh,
saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka,
sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.</p>
</div>
</div>

Setelah selesai membuat file HTML nya, sekarang kita buat style untuk mengatur tampilan nya agar seperti artikel di surat kabar, dengan menggunakan CSS seperti dibawah ini:

div.kolom-wrap {
border:1px solid #333333;
background: #ccc;
margin:0;
box-shadow: 3px 3px 3px #333333;
-moz-box-shadow: 3px 3px 3px #333333;
-webkit-box-shadow: 3px 3px 3px #333333;}

div.kolom-wrap h1 {
text-align:center;
color:#999999;
text-shadow: 2px 2px 0 #000;}

div.kolom-wrap hr {
border:3px solid #666666;
margin:0 2em;}

div.kolom {
-moz-column-count: 2;
-webkit-column-count: 2;
padding:5px 10px 0 10px;}

Langkah selanjutnya adalah melakukan test pada Browser anda…!
Catatan: Tampilan ini hanya berlaku pada Browser Mozilla versi 3.5.3 ke-atas, Google Chrome, Safari versi terbaru. Tidak berlaku untuk Intrenet Explorer.

Apa itu CSS 3 ?

Sambutlah Jaman Baru dengan teknik baru. Ketika jaman terus berkembang maka mau tidak mau kita harus mengikutinya jika kita tidak mau disebut ketinggalan jaman.
Sekarang kita seharus sudah mulai belajar teknik baru tentang CSS.  CSS 3 telah memberikan kita cara-cara yang mudah untuk membuat efek / style pada sebuah elemen HTML dengan meninggalkan cara lama yang dibantu oleh Javascript dan JQuery.
Saya yakin Anda pernah mendengar tentang CSS pada umumnya. CSS3 tidak jauh berbeda, dalam hal sintaksis, namun kekuatan CSS3 jauh lebih besar. Seperti yang akan Anda lihat dalam teknik berikut ini,  dengan CSS 3 anda dapat membuat sudut membulat (rounded corners), bayangan pada tulisan (Text Shadow), latar belakang bening (Transparency Background) dan masih banyak lagi.

CSS3 adalah anak baru di keluarga stylesheet. Menawarkan kemungkinan-kemungkinan baru yang menarik untuk menciptakan efek pada desain situs anda, memungkinkan Anda untuk menggunakan style sheet lebih beragam untuk berbagai kesempatan dan banyak lagi.

Pembahasan

Berikut ini adalah 11 teknik yang akan saya tunjukkan kepada Anda bagaimana menciptakan efek di CSS 3 tanpa JavaScript ataupun JQuery.
Ingat – efek ini hanya akan bekerja di browser modern yang mengimplementasikan fitur CSS3 ini.
Pilihan terbaik Anda adalah menggunakan browser: Safari 4, firefox 3.5.3 keatas, Google Chrome.

1. CSS 3 Rounded Corners
2. CSS 3 Box Shadow
3. CSS 3 Text Shadow
4. CSS 3 Fancy Font
5. CSS 3 Opacity
6. CSS 3 RGBA/ CSS 3 background
7. CSS 3 Background Size
8. CSS 3 Multiple Backgrounds
9. CSS 3 Columns
10. CSS 3 Border Image
11. CSS 3 Animations

<table border=”0″>
<tbody>
<tr>
<th colspan=”3″>List of Student Class IIIA</th>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Date of  Birth</td>
</tr>
<tr>
<td>Andy. R</td>
<td>Jl. Setia Budi, 20A</td>
<td>22-4-1992</td>
</tr>
<tr>
<td>Budianto</td>
<td>Jl. Merdeka, 23B</td>
<td>12-2-1993</td>
</tr>
<tr>
<td>Brandy. W</td>
<td>Jl. Anyelir, 11C</td>
<td>10-1-1992</td>
</tr>
<tr>
<td>Cyntia Dewi</td>
<td>Jl. Pahlawan. 10C</td>
<td>13-8-1993</td>
</tr>
</tbody>
</table>

Second, we make its CSS file as follows:

table.listItem {
width:100%;
padding:0.1em;
text-align:center;
border:1px #009966 solid;
background:#FFFFFF;}

table.listItem th {
font-size:1.4em;}

table .nameItem {
background:#006666;
font-weight:bold;
color:#FFFFFF;}

table .oldRow {
background:#009999;}

table .evenRow {
background: #00CC99;}

OK, download the HTML code and CSS code above, and if you see in the browser as a result will like Table above.
Congratulations ….! Testing

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

Nah, sekarang saya akan mencoba memberikan sedikit pengalaman saya kepada anda.
Pertama, buatlah text box diantara tag <body>…</body>pada halaman HTML seperti ini:

<div class=”kotak_teks”></div>

selanjutnya, ketikan isi atau artikel diantara tag <div>…</div> seperti contoh:

<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css
</div>

Kedua, buatlah style Css nya diantara tag <head>…</head> seperti contoh dibawah ini:

<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>

Untuk lebih jelasnya, lihatlah sintax HTML yang lengkap dibawah ini:

<html>
<head>
<title>Membuat texs scroll box dengan Css</title>
<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>
</head>

<body>
<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.
</div>
</body>
</html>

Dan hasilnya akan menjadi seperti text box dibawah ini:

Nah, semoga ada manfaatnya bagi yang belum mengetahui cara ini.

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.