Cascading Stylesheet(CSS) adalah suatu teknik untuk mengubah tampilan halaman web agar menjadi lebih menarik.
Ada 3 (tiga) cara untuk memanfaatkan teknik ini, yaitu:
- Memisahkan script CSS pada sebuah file berekstensi *.css kemudian memanggilnya pada dokumen HTML
- Menuliskan secara langsung pada dokumen HTML pada kalang <STYLE>
- Code: Select all
<style type="text/css">
[script css di sini]
</style>
- Menuliskan secara langsung pada tag/elemen HTML tertentu pada dokumen HTML
<div style="[script css di sini]"
Desain Tampilan
Anggap saja Anda akan membuat tampilan web dengan kriteria memiliki 2 (dua) buah kolom dan 3 (tiga) buah baris. Anda bisa saja menggunakan tag <TABLE> untuk keperluan ini, tapi untuk sat ini Anda akan gunakan tag <DIV>. DIV atau division digunakan untuk menciptakan sesi (biasanya berupa baris) baru pada halaman web. Ketikkan script berikut ini:
- Code: Select all
<html>
<head>
<title>Websiteku</title>
</head>
<body>
<div style='border:1px solid #000'>
Baris 1
</div>
<div style='border:1px solid #000'>
Baris 2
</div>
<div style='border:1px solid #000'>
Baris 3
</div>
</body>
</html>
Simpan dengan nama “index.php” di C:\XAMPP\htdocs\websiteku. Dengan Mozilla Firefox bukalah alamat ini: “http://localhost/websiteku” pada Mozilla Firefox Anda. Akan ditampilkan 3 (tiga) buah baris pada halaman web Anda.
Pada script di atas saya tambahkan: [style='border:1px solid #000' ] di dalam tag <div>, ini digunakan untuk memformat tampilan yang dihasilkan DIV agar diberi bingkai di keempat sisinya.
Lalu bagaimana untuk menghasilkan kolom? Anda memerlukan tag <SPAN>. Hapuslah isi file “index.php” kemudian ketikkan script berikut ini:
- Code: Select all
<html>
<head>
<title>Websiteku</title>
</head>
<body>
<div style='border:1px solid #000'>
Baris 2
</div>
<div style='border:1px solid #000'>
<span style='border:1px solid #000'>
Kolom 1
</span>
<span style='border:1px solid #000'>
Kolom 2
</span>
</div>
<div style='border:1px solid #000'>
Baris 2
</div>
</body>
</html>
Refresh kembali tampilan pada browser Anda.
Untuk membuat kolom, nantinya Anda tidak akan menggunakan tag <SPAN>, Anda akan menggunakan tag <TABLE> agar mudah untuk mengaturnya.
Hapuslah isi file “index.php” kemudian ketikkan script berikut ini:
- Code: Select all
<html>
<head>
<title>Websiteku</title>
</head>
<body>
<div style='border:1px solid #000'>
Baris 1
</div>
<div style='border:1px solid #000'>
<table style='border:1px solid #000;width:100%'>
<tr><!-- Membuat baris baru di table -->
<td><!-- Membuat kolom ke-1 di baris tabel -->
Kolom 1
</td>
<td><!-- Membuat kolom ke-1 di baris tabel -->
Kolom 2
</td>
</tr>
</table>
</div>
<div style='border:1px solid #000'>
Baris 3
</div>
</body>
</html>
Pada tag <TABLE> saya sematkan [style='border:1px solid #000;width:100%'], ini bertujuan untuk memformat tampilan table agar diberi bingkai dengan warna hitam dan diatur lebarnya agar 100% (seluas) dari halaman browser.
Refresh kembali tampilan pada browser Anda.
Lengkapi script pada berkas “index.php” sehingga di dapat script sebagai berikut:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Websiteku</title>
</head>
<body>
<div>
<div>
<!-- Bagian Navigasi -->
Bagian Navigasi
</div>
<div>
<table>
<tr>
<td>
<!-- Bagian Sisi -->
Bagian Sisi
</td>
<td>
<div>
<!-- Bagian Kepala Halaman -->
Bagian Kepala Halaman
</div>
<div>
<!-- Bagian Isi Halaman-->
Bagian Isi Halaman
</div>
</td>
</tr>
</table>
</div>
<div>
<!-- Bagian Kaki Halaman-->
Bagian Kaki Halaman
</div>
</div>
</body>
</html>
Refresh browser Anda.
Untuk mengubah tampilan agar sesuai dengan yang Anda inginkan, Anda bisa mengaturnya dengan menggunakan file *.css. Buatlah dokumen baru pada Notepad++ Anda, ketikkan script berikut ini:
- Code: Select all
/*
Mengatur tampilan elemen body
*/
body {
/*
menentukan jarak bagian dalam
(dari sisi atas-kiri-kanan-bawah)
pada elemen body
*/
padding:20px 50px;
/*
mengubah warna belakang dengan
konstanta warna RGB
*/
background: rgb(150,150,150);
/*
menentukan jenis-jenis font
yang akan digunakan
*/
font-family: Arial,Verdana, 'Lucida Grande', 'Trebuchet MS';
/*
menentukan ukuran font
*/
font-size: 12px;
/*
mengatur perataan penulisan teks
(rata tengah)
*/
text-align: center;
}
/* Membuat ID halaman */
#halaman{
/*
mengatur perataan penulisan teks
(rata kiri)
*/
text-align: center;
/*
mengubah warna belakang
*/
background:#fff;
/*
Membuat bingkai
setebal 2 pixel, bentuk garis normal
warna keabu-abuan
*/
border:2px solid rgb(120,120,120);
}
/* Membuat ID bagian-navigasi */
#bagian-navigasi{
/*
mengatur perataan penulisan teks
(rata tengah)
*/
text-align: center;
/*
mengubah warna belakang
*/
background:rgb(132,201,237);
/*
menentukan padding:
atas dan bawah: 10px
kiri dan kanan: 12px
*/
padding:10px 12px;
}
/*
Membuat ID bagian-tengah
untuk mengatur tabel
*/
#bagian-tengah{
/*
mengatur lebar
*/
width:100%;
/*
mengatur jarak spasi bingkai
*/
border-spacing:0px;
/*
mengatur jarak padding
*/
padding:0px;
}
/* Membuat ID bagian-sisi */
#bagian-sisi{
/*
mengatur perataan penulisan teks
(rata kiri)
*/
text-align: left;
/*
menentukan padding
*/
padding:10px;
/*
mengubah warna belakang
*/
background:rgb(187,229,98);
/*
mengatur perataan vertikal penulisan teks
(rata atas)
*/
vertical-align: top;
/*
menentukan lebar
*/
width: 230px;
}
/* Membuat ID bagian-kepala */
#bagian-kepala{
/*
mengatur perataan penulisan teks
(rata tengah)
*/
text-align: center;
/*
menentukan padding
*/
padding:10px;
/*
mengubah warna belakang
*/
background:rgb(240,240,240);
/*
mengatur tinggi
*/
height:80px;
}
/* Membuat ID bagian-kaki */
#bagian-isi{
/*
mengatur perataan penulisan teks
(rata kiri-kanan)
*/
text-align: justify;
/*
mengubah warna belakang
*/
background:#fff;
/*
menentukan padding
*/
padding:4px;
/*
mengatur tinggi minimal
*/
min-height:200px;
}
/* Membuat ID bagian-kaki */
#bagian-kaki{
/*
mengatur perataan penulisan teks
(rata tengah)
*/
text-align: right;
/*
mengubah warna belakang
*/
background:rgb(220,220,220);
/*
menentukan padding
*/
padding:5px;
}
Simpan dengan nama “style.css”. Lakukan pengeditan pada berkas “index.php”, sehingga script menjadi seperti ini:
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Websiteku</title>
<!—mengkoneksikan berkas style.css -->
<link rel="stylesheet" href="style.css"
type="text/css" />
</head>
<body>
<!-- Mengubah ID div -->
<div id ="halaman">
<!-- Mengubah ID div -->
<div id="bagian-navigasi">
<!-- Bagian Navigasi -->
Bagian Navigasi
</div>
<div>
<!-- Mengubah ID table -->
<table id="bagian-tengah">
<tr>
<!-- Mengubah ID td -->
<td id="bagian-sisi">
<!-- Bagian Sisi -->
Bagian Sisi
</td>
<!-- Mengubah style div
agar sisi kiri diberi bingkai
-->
<td style="border-left:1px solid #e5e5e5;">
<!-- Mengubah ID div -->
<div id="bagian-kepala">
<!-- Bagian Kepala Halaman -->
Bagian Kepala Halaman
</div>
<!-- Mengubah ID div -->
<div id="bagian-isi">
<!-- Bagian Isi Halaman-->
Isi Halaman
</div>
</td>
</tr>
</table>
</div>
<!-- Mengubah ID div -->
<div id="bagian-kaki">
<!-- Bagian Kaki Halaman-->
Bagian Kaki Halaman
</div>
</div><!—penutup div "halaman" -->
</body>
</html>
Panggil ulang browser Anda, lihat tampilannya sekarang!
Membuat Kotak Apung
Kotak apung adalah suatu kotak yang dibuat dengan tampilan mengapung (di atas halaman utama), biasanya digunakan sebagai kotak informasi atau kotak alat. Untuk mencoba membuatnya, silakan edit berkas “style.css” Anda, tambahkan bagian script berikut ini di paling bawah dokumen “style.css”:
- Code: Select all
/* Membuat ID kotak-apung */
#kotak-apung {
/*
Position diset ke fixed
Agar posisi left dan top
bisa bebas diatur
dan ditampilkan di atas halaman
*/
position:fixed;
left:30%;
width:40%;
top:100px;
/*
display:block; artinya: kotak ditampilkan
lawannya adalah: display:none;
*/
display:block;
border:1px solid #555;
text-align:left;
}
/* Membuat class judul pada ID kotak-apung */
#kotak-apung .judul {
/*
font-weight:bold;
agar text yang ditampilkan dicetak tebal
*/
font-weight:bold;
padding: 2px 6px;
background: rgb(50,50,150);
/*
color:#fff;
mengubah warna text menjadi putih
*/
color: #fff;
}
#kotak-apung .isi {
padding: 2px 6px;
background: rgb(220,220,220);
}
#kotak-apung .kaki {
padding: 2px 6px;
background: rgb(240,240,240);
text-align:right;
}
Simpan berkas “style.css”, edit berkas “index.php”, sisipkan script berikut sebelum tag penutup body </body>.
- Code: Select all
<!-- Membuat kotak apung -->
<div id="kotak-apung">
<!-- Judul pada kotak apung -->
<div class="judul">
Judul Kotak Apung
</div>
<!-- Isi pada kotak apung -->
<div class="isi">
Ini adalah isi kotak apung.
Anda bisa saja mengisinya dengan teks,
form, dan sebagainya
</div>
<!-- Kaki pada kotak apung -->
<div class="kaki">
<!-- Tombol untuk menutup kotak apung -->
<input type="button" value="Tutup"
onclick="document.getElementById('kotak-apung')
.style.display='none';" />
</div>
</div>
<!-- Tombol untuk menampilkan kembali kotak apung -->
<input type="button"
value="Klik di sini untuk menampilkan kotak apung"
onclick="document.getElementById('kotak-apung')
.style.display='block';" />
Panggil ulang browser Anda, lihat tampilannya sekarang!
Begitu halaman dibuka, akan otomatis ditampilkan kotak apung. Cobalah untuk mengklik tombol “Tutup”, kemudian klik tombol “Klik di sini untuk menampilkan kotak apung”.
Membuat batang menu
Batang menu berisi menu-menu yang bila diklik akan menuju halaman-halaman tertentu. Batang menu akan diletakkan di bagian “Navigasi”. Menu-menu akan dibuat dengan menggunakan tag <LI>.
Tambahkan bagian script berikut ini di paling bawah dokumen “style.css”:
- Code: Select all
/* Membuat ID menu
dan memformat element ul
di dalam element dengan id = menu
*/
#menu, #menu ul {
padding:0;
margin: 0;
/*
menghilangkan gaya list
*/
list-style: none;
line-height: 1;
font-size:12px;
font-weight:bold;
}
/* memformat element li
di dalam element dengan id = menu
*/
#menu li {
float: left;
color: #fff;
padding: 4px 15px 4px 15px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
/* memformat element li
di dalam element dengan id = menu
ketika penunjuk mouse didekatkan
pada element li tersebut
*/
#menu li:hover {
background: rgb(240,240,240);
color: #000;
border-bottom: 2px solid rgb(150, 150, 150);
}
Buka dokumen “index.php”, cari elemen <DIV> dengan ID “bagian-navigasi”, tambahkan bagian script berikut ini:
- Code: Select all
<!-- Bagian Navigasi -->
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
<div style="clear:both"></div>
Catatan: Kode di atas ditambahkan setelah tag <DIV id="bagian-navigasi"> dan sebelum tag </DIV>
Refresh browser Anda.
Bila perlu, Anda bisa menambahkan menu pop-up pada batang menu.Pada berkas “style.css”, tambahkan script berikut di paling bawah dokumen.
- Code: Select all
/*
memformat element ul
di dalam element li
*/
#menu li ul {
margin-left: -25px;
position: absolute;
width: 120px;
left: -999em;
padding: 6px 10px;
}
/*
memformat element li
di dalam element li
*/
#menu li li {
color:#000;
background-color:rgb(255,255,255);
float:none;
text-align:left;
}
/*
memformat element li ketika
penunjuk mouse didekatkan untuk melarikan
elemen ul ke posisi tertentu
*/
#menu li:hover ul, #menu li.sfhover ul, #menuli li.sfhover ul {
left: auto;
}
Sementara itu, di berkas “index.php”, edit bagian <DIV> dengan ID “bagian-navigasi”, menjadi seperti ini:
- Code: Select all
<!-- Bagian Navigasi -->
<ul id="menu">
<li>Menu 1</li>
<li>
Menu 2
<ul>
<li>Menu 2-1</li>
<li>Menu 2-2</li>
</ul>
</li>
</ul>
Refresh browser Anda.
Sampai di sini dulu. Bila ada kesalahan dalam penyampaian, mohon koreksinya....
--------------------------
Salam CSS...
Keren banget nih.... Terima kasih tutorialnya.... 
News
Site map
SitemapIndex
RSS Feed