Pada artikel sebelumnya kita telah membahas tentang cara membuat web HTML sederhana. Pada artikel kali ini, kita akan belajar CSS. Bagi yang belum tahu apa itu CSS, CSS merupakan singkatan dari Cascading Style Sheet yang berfungsi untuk memperindah dalam pembuatan web baik itu membuat background web, mengatur jenis dan ukuran huruf, mengatur warna halaman, warna huruf, membuat layout web dan lain sebagainya. Pertanyaannya kenapa harus menggunakan CSS bukankah hanya dengan menggunakan HTML saja kita sudah bisa membuat tamlilan web dengan baik? Benar, dengan menggunakan HTML saja kita masih bisa membuat web dengan tampilan yang baik. Namun, dilihat dari sudut pandang yang lain hal tersebut tidak efektif dan efisien. Misalnya dilihat dari segi pembuatan, jika tidak menggunakan CSS untuk membuat tampilan beberapa halaman web membutuhkan waktu yang cukup lama sedangkan dengan menggunakan CSS waktu yang dibutuhkan jauh lebih singkat. Dengan menggunakan CSS, untuk mengubah tampilan suatu halaman web hanya perlu mengubah satu file saja yaitu file CSS tanpa harus mengubah semua file halaman web yang akan diubah. Selain itu, masih terdapat banyak manfaat atau kelebihan dari penggunaan CSS.
CSS mempunyai tiga jenis penulisan salah satunya adalah eksternal CSS. Pada eksternal CSS, file CSS tidak terdapat didalam file HTML melainkan terpisah. Untuk memahami cara membuat halaman web dengan menggunakan CSS, kita membutuhkan satu file HTML dan satu file CSS. Misalnya kita buat sebuah file index.html dan file style.html didalam folder CSS.
index.html:
<html>
<head>
<title>Belajar HTML | IlmuWeb.Net</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
<li>HOME</li>
<li>HTML</li>
<li>PHP</li>
<li>JAVASCRIPT</li>
<li>ILMUWEB.NET</li>
<li><a href="atur_artikel.html">CONTOH TABEL</a></li>
<li><a href="view_tambah.html">CONTOH FORM</a></li>
</ul>
</div>
<div class="leftbar">
Contoh CSS dengan menggunakan class, pada file css (dalam hal ini style.css, nama class diawali dengan . (titik) sehingga penulisannya menjadi .leftbar<br>
Berikut adalah contoh penggunaan CSS untuk class="leftbar" : <br>
<pre>
.leftbar{
padding:4px;
float:left;
width:25%;
height:70%;
border:solid #BEBEBE;
}
</pre>
</div>
<div id="rightbar">
Contoh CSS dengan menggunakan id, pada file css (dalam hal ini style.css, nama id diawali dengan # (kres) sehingga penulisannya menjadi #rightbar<br>
Berikut adalah contoh penggunaan CSS untuk id="rightbar" : <br>
<pre>
#rightbar{
padding:4px;
float:right;
width:25%;
height:70%;
border:solid #BEBEBE;
}
</pre>
</div>
<div class="main">
<p><h2>Selamat datang di Ilmuweb.net</h2></p>
<p>Contoh menampilkan gambar: </p>
<img src="http://ilmuweb.net/wp-content/uploads/2011/06/aplikasi-web.png">
<p>Tempat belajar membuat web secara gratis</p>
<p>Untuk belajar mebuat web, terus kunjungi Ilmu Web Dot Net di http://ilmuweb.net atau bisa langsung klik <a href="http://ilmuweb.net">DISINI</a></p></p>
</div>
<div class="footer">
</div>
</body>
</html>
Coba perhatikan syntak dibawah ini yang terdapa pada file index.html:
<link rel="stylesheet" href="css/style.css" type="text/css" />
Syntak tersebu digunakan untuk menghubungkan file index.html dengan file style.css yang terdapat pada folder css.
style.css:
Your ads will be inserted here by
Easy AdSense.
Please go to the plugin admin page to paste your ad code.
</p>
body {
background-color:#E2E0E0;
font-family:Arial,Helvetica,sans-serif;
color:#333;
line-height:1.5em;
margin:0;
padding:0;
}
#header {
width:100%;
background:url(../images/header.jpg) no-repeat left;
height:135px;
margin:0 auto;
margin-bottom:0 auto;
border-bottom:1px solid #BEBEBE;
}
ul
{
list-style-type:none;
margin:10px;
padding:5px;
}
li
{
display:inline;
padding:10px;
}
.leftbar{
padding:4px;
float:left;
width:25%;
height:70%;
border:solid #BEBEBE;
}
#rightbar{
padding:4px;
float:right;
width:25%;
border:solid #BEBEBE;
height:70%;
}
.main{
padding:4px;
margin:auto;
border:solid #BEBEBE;
width:47%;
height:70%;
}
Perhatikan syntak dibawah ini yang terdapat pada file index.html;
<div class="leftbar">
Contoh CSS dengan menggunakan class, pada file css (dalam hal ini style.css, nama class diawali dengan . (titik) sehingga penulisannya menjadi .leftbar<br>
Berikut adalah contoh penggunaan CSS untuk class="leftbar" : <br>
<pre>
.leftbar{
padding:4px;
float:left;
width:25%;
height:70%;
border:solid #BEBEBE;
}
</pre>
</div>
Untuk melakukan perubahan pada tampilan tersebut baik itu mengganti jenis huruf, mengganti warna, mengganti ukuran huruf, menambahkan gambar background dll, hal yang diperlukan adalah mengedit syntak dibawah ini pada file style.css yang terdapat di dalam folder CSS:
.leftbar{
padding:4px;
float:left;
width:25%;
height:70%;
border:solid #BEBEBE;
}
Untuk lebih memahami penggunaan CSS, silakan download file pada link di bawah ini:
Setelah didownload, ekstrak file rar tersebut dan simpan didalam folder htdocs pada folder XAMPP Anda. Untuk melihat perbedaan halaman yang menggunakan CSS dengan yg tidak menggunakan CSS, silakan hapus ganti nama file style.css yang terdapat pada folder CSS, dan ubah kembali nama file tersebut menjadi style.css agar halaman web kembali menggunakan CSS. Semoga bermanfaat 
Seorang manusia biasa, tempatnya salah dan lupa, yang ingin turut berpartisipasi mencerdaskan kehidupan bangsa dan negara.
Really good css tip i like it
Good Trick Sob!!!!!!!!
Program yang lazim dipake namanya apa ya gan?dream weaver kah?yang lain yang bagus apa ya gan..makasih
Untuk CSS bisa menggunakan dreamweaver. Supaya lebih mudah dalam pnggunaan sintak-sintaknya. Seperti dalam mwnentukan warna sehingga kita tidak perlu menghapal satu demi satu kode warna yg akan digunakan. Slain itu dgn mnggunakan dreamweaver kita bisa melihat perubahannya scara langsung tanpa harus membuka melalui browser terlebih dahulu. Hanya saja dreamweaver berbayar. Semoga membantu
thanks yo mas bro………………………
thx infox
DOWNLOADNYA KOK UDAH G ADA
saya pakai HP jadul. Nokia 3230. Bisa gak ya kayak kalian?
Blog saya masih kosong, gak bisa ngapa2in. Mohon info/bantuanya.