�ݺ�ߣ

Pemrograman Web (Teori)
CSS (Cascading Style Sheet)

Wawan Darmawan, S.Kom
darmawan.wawan@gmail.com

STMIK MUHAMMADIYAH JAKARTA - 2012

CSS
• Cascading Style Sheet (CSS) merupakan salah
satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur
dan seragam.


• Sama halnya styles dalam aplikasi pengolahan
kata seperti Microsoft Word yang dapat
mengatur beberapa style, misalnya heading,
subbab, bodytext, footer, images, dan style
lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file). Pada umumnya
CSS dipakai untuk memformat tampilan
halaman web yang dibuat dengan bahasa
HTML dan XHTML.

• CSS dibagi menjadi 3 yaitu:
- Dengan menambahkan langsung di tag dokumen html (Inline Style)
- Dengan menaruhnya di dalam header dokumen html (Internal Style Sheet)
- Membuat file CSS tersendiri yang tespisah dari dokumen html
(External Style Sheet)


1. Contoh Inline Style

<p style="color:blue">Membuat tulisan warna biru</p>
<p style="font-family:arial;font-size:150%;color:green">Membuat jenis font, ukuran dan warna</p>
<p style="color:yellow;background-color:red;width:60px;text-align: center">Test</p>
<p style="font-style:italic;">Membuat tulisan miring</p>


2. Contoh Internal Style Sheet
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di
dokumen html, cara penulisannya adalah sebagai berikut:

<style>
<!–
p { color:green;font-family:arial;font-size:120%;}
-->
</style>

Kemudian kita masukkan style tersebut di antara tag <head> dan </head> :

<html>
<head>
<style>

</style>
</head>
<body>
<p>Saat ini saya sedang belajar CSS</p>
<p>Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen
html</p>
<p>Dengan contoh ini, maka setiap paragraf atau yang berada diantara
< p > dan < /p > akan memiliki format yang sama</p>
</body>
</html>

Contoh lainnya:

<HTML>
<HEAD>
<TITLE>:hover and :focus Example</TITLE>
<STYLE>
A:link
{ COLOR: red }
A:visited
{ COLOR: blue }
A:active
{ COLOR: lime }
A:hover
{ COLOR: yellow }
A:unknown
{ COLOR: green }
BODY
{
FONT-WEIGHT: bold; FONT-SIZE: 40px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
</STYLE>
</HEAD>
<BODY>
<A href="http://www.detik.com">Satu</A>
<A href="http://www.bola.net">Dua</A>
<A href="http://www.google.com">Tiga</A>
</BODY>
</HTML>

3. Contoh External Style Sheet
Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang terpisah dari
dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan.
Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan
yang berikut ini di header dokumen html:

<link rel="stylesheet" href="style.css" type="text/css">

Sehingga di dokumen html akan terlihat seperti berikut ini:
<html>
<head>
<title>Titel websiteku</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
</body>
</html>
Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website,
berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.
Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama
“csstest.html”


<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman">
<div id="judul">
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2>
</div>
<div id="konten">
<div class="kiri">
<p>Disini navigasi bagian kiri</p>
</div>
<div class="tengah">
<p>Disini konten websiteku</p>
</div>
<div class="kanan">
<p>Disini navigasi bagian kanan</p>
</div>
</div>
<div class="footer">
<p>Disini Footer websiteku</p>
</div>
</div>
</body>
</html>

Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih
mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut
dengan browser, maka kita akan melihat halaman yang polos dengan tulisan
seadanya.

Sekarang salin CCS berikut kemudian simpan ke folder yang sama
dengan “csstest.html” dengan nama “style.css”
#halaman { /* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto; /* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0; /* pengaturan sisi bagian luar */
padding: 0; /* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri { /* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}


.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p{
padding-left: 10px; /* penulisan untuk satu sisi saja */
}


Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih
mudah dimengerti, anda bisa menghapusnya.

Sekarang buka file “csstest.html” dengan browser anda.


CSS Sekarang
• Pada perkembangannya CSS sudah masuk level 3 untuk sekarang,
dimana dimulai CSS level 1 atau yang sering di sebut CSS aja,
kemudian level 2 yang merupakan penyempurnaan dari CSS level
sebelumnya, yaitu CSS level 1.
• CSS merupakan alternatif bahasa pemrograman web masa yang
akan datang, dimana mempunyai banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1
halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya
saja.
- Dan banyak lagi yang lainnya.


Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-
perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite.
Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-
perubahan dan refresh browser untuk melihat hasilnya.

Be creative…


CSS Framework
• CSS framework adalah library CSS yang
digunakan untuk membuat standarisasi layout
dan thema dari website. Dengan CSS
framework kita bisa membuat Front-end
website dengan cepat mengingat layout dan
tampilan sudah disediakan. CSS Framework
bertugas membuat tampilan layout yang
standar, rapih, dan tampil sempurna disetiap
browser atau device.

�ݺ�ߣ

Pengenalan web minggu ketiga

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Pengenalan web minggu ketiga (20)

Pengenalan web minggu ketiga