Dokumen ini membahas tentang CSS (Cascading Style Sheets) dan penggunaannya dalam pemrograman berbasis web. Penjelasan mencakup dasar teori, keuntungan, dan langkah-langkah praktis untuk mengubah tampilan halaman HTML menggunakan CSS. Kesimpulan menekankan pentingnya CSS dalam mempercantik dan mengatur tampilan website.

1. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 1
PEMROGRAMAN BERBASIS WEB
CSS (Cascading Style Sheets)
Oleh : Luszara Lucky Viona
Nim :120651229
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER

2. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 2
CSS
1. Tujuan
Memahami konsep dasar CSS dan penggunaannya pada web.
2. Dasar Teori
 CSS adalah singkatan dari Cascading Style Sheets. 
 CSS adalah aliran dari suatu kode ke kode lain yang saling
berhubungan.
 CSS merupakan kumpulan kode-kode berurutan dan saling
berhubungan untuk mengatur format / tampilan suatu
halaman HTML.
3. Keuntungan CSS
 Memudahkan dalam penggantian format secara keseluruhan.
 Lebih praktis.
 Untuk mengubah tampilan web, tanpa mengubah layout
utamanya.
4. Tools
Disini telah di sediakan sebuah tampilan web, tinggal
bagaimana kita mengatur dan menyesuaikan tampilannya sesuai
dengan keinginan kita.

3. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 3
File yang sudah ada di dalamnya:
bg-nav header
susu
index.php

4. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 4
Setelah itu buat file php, , yaitu index.php dengan menggunakan editor apa saja yang
anda sukai.

5. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 5

6. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 6

7. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 7
Dari tampilan web diatas, ada beberapa pembahasan cara merubah tampilan melalui
script diatas:
1.Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis
font, ukurannya sama dengan paragraf pertama)
2.Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan
kursor, warna teks dan background-nya berubah.
3.Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu
konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS
4.Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman.
PEMBAHASAN
1. Menyesuaikan Teks yang dimaksud dengan paragraf pertama.
Berikut adalah PARAGRAF PERTAMA:
DAN INI TEKS YANG AKAN DISESUAIKAN DENGAN PARAGRAF
PERTAMA:

8. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 8
Untuk merubah tampilannya, buka script
Lalu di bawahnya ditambahi dengan script berikut,
Maka Hasilnya:

9. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 9
2. Membuat menu menjadi sebuah link
Dalam script css, ada script untuk mengatur menu link
1. #menu : untuk membuat background menggunakan gambar bg-nav.jpg dengan
perulangan horizontal sesuai tinggi (height) dan lebar (width).
2. #menu table : membuat table tanpa border.
3. #menu a : tag a yaitu anchor untuk mengatur teks link.
4. #menu a:hover : (hover) untuk mengatur fungsi link setelah disorot oleh kursor.
5. #menu td : mengatur teks pada kolom menu.

10. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 10
Untuk membuat menu navigasi, buka script:
Tambahkan tag anchor dan penutup anchor ppada menu-menu yang akan dijadikan
sebuah link:
Hasilnya bisa dilihat dalam tampilan web:

11. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 11
3. Mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten
(misalnya daftar artikel, dsb) dengan menggunakan css.
Berikut kode css yang saya tambahkan, untuk menampilkan daftar artikel dan
gambar:
Maka beginilah hasilnya:

12. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 12
4. Menambahkan teks/ tulisan yang proporsional di bagian header halaman.
Tambahkan kode css, seperti berikut:
Maka seperti inilah hasilnya:

13. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 13
Dan inilah tampilan seluruhnya:

14. May 5, 2014 [PEMROGRAMAN BERBASIS WEB]
L u s z a r a L . V i o n a Page 14
Kesimpulan:
Cascading Style Sheet (CSS) merupakan bahasa pemrograman untuk mengatur tampilan
suatu website atau blog. Cascading Style Sheet merupakan bahasa pemrograman yang berguna
untuk pembuatan dynamic HTML. Dengan menggunakan Cascading Style Sheet , Anda dapat
mengatur atau mempercantik tampilan website atau blog, antara lain mengatur jenis , ukuran,
warna front; jarak antara baris dan panjangnya, marjin dan Indentasi, background dan warna,
serta masih banyak lagi. Penggunaan Cascading Style sheet (CSS) bukanlah hal yang wajib,
tanpa CSS Anda dapat membuat sebuah web tetapi penggunaan CSS (Cascading Style Sheet)
dalam pembuatan web merupakan kelebihan tersendiri.
Menggunakan CSS tidak merupakan perangkat lunak tertentu, karena merupakan script
yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk
menciptakan script CSS sendiri.