Dokumen ini membahas tentang pengenalan CSS, termasuk konsep dasar, keuntungan, dan sintaks dasar yang digunakan untuk mengatur tampilan halaman web. Selain itu, terdapat tugas praktis untuk menerapkan pengetahuan tentang CSS dalam desain web. Kesimpulan menyatakan bahwa CSS sangat penting untuk mendesain dan mempercantik tampilan web.

1. Page 1 of 10
Pertemuan 5
Pemrograman Berbasis Web
CSS
Disusun Oleh :
Naili Firohmati Robbi
1210651114
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2012/2013

2. Page 2 of 10
I. TUJUAN INSTRUKSIONAL KHUSUS (TIK)
 Memahami konsep dasar CSS dan penggunaannya pada web.
II. DASAR TEORI
 CSS adalah?
 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.
 Keuntungan CSS
 Memudahkan dalam penggantian format secara keseluruhan.
 Lebih praktis.
 Untuk mengubah tampilan web, tanpa mengubah layout utamanya.
 Sintaks CSS
 Terdiri dari beberapa set peraturan yang memiliki: selector, property, value.
selector {property: value;}
 Selector menunjukkan bagian mana yang hendak diatur/diformat.
 Property bagian dari selector yang hendak diatur.
 Value adalah nilai dari pengaturannya.
 Contoh sintaks CSS:
h1 {color: red;}
Keterangan:
Selector: h1
Property: color
Value: red
 Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah)
 Menggunakan syntax pembuka /* dengan penutup */ untuk menuliskan komentar di
CSS.
Contoh:
/* tulis komentar anda disini */
p {
text-align: justify;
/* tulis lagi komentar anda disini */
color: blue;
font-family: arial;
}
 Ada 3 cara memasang CSS ke dalam HTML:
 1.Inline CSS
 2.Embedded CSS
 3.Import CSS file

3. Page 3 of 10
III. ALAT DAN BAHAN
 LCD & KOMPUTER
 Kertas dan alat tulis
 XAMPP
 Web Browser

4. Page 4 of 10
IV. TUGAS
Silahkan dibuka folder css
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 anda (tidak ada CSS berarti juga
TIDAK ADA NILAI)
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
5. Dibuat laporan ya, upload di slideshare.net dan URLnya disubmit di elearning.
Berikut adalah sintaks dari CSS

5. Page 5 of 10

6. Page 6 of 10

7. Page 7 of 10
Berikut Sintaks HTML

8. Page 8 of 10
Sebelum edit

9. Page 9 of 10
Setelah diedit

10. Page 10 of 10
V. KESIMPULAN
Dari percobaan diatas dapat disimpulkan bahwa, CSS mempunyai peran penting dalam
mendesain atau mempercantik tampilan web. Dengan banyaknya fitur CSS akan
mempermudah user mengaplikasikan kedalam web maupun blog.