Dokumen ini berisi ringkasan modul CSS yang mencakup definisi, sintaks, dan contoh penggunaan CSS untuk mengatur tampilan halaman web. Definisi CSS adalah bahasa gaya yang mengontrol format tampilan halaman web yang ditulis dengan markup language. Sintaks CSS terdiri dari selector, property, dan value yang menentukan bagian mana yang akan diatur. Contoh penggunaannya adalah mengatur warna teks menjadi merah.

1. MODUL PERTEMUAN 5 CSS
PEMROGRAMAN BERBASIS WEB
LAPORAN CSS
DIBUAT OLEH :
NAMA : ACHMAD NUR FADILLAH
NIM : 1210651001
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2014

2. MODUL CSS
Definisi CSS :
Apa itu CSS ?
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style
sheet language) yang mengontrol format tampilan sebuah halaman web yang
ditulis dengan menggunakan penanda (markup laguage). Biasanya CSS
digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi
sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG
dan XUL bahkan ANDROID.
CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen
yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkann daya
akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol
dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan,
memungkinkan untuk membagi halaman untuk sebuah formatting dan
mengurangi kerumitan dalam penulisan kode dan struktur dari konten,
contohnya teknik tableless pada desain web.
CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai
style dengan menggunakan metode pembawaan yang berbeda pula,
seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik
konten web bisa menentukan link yang menghubungkan konten dengan file
CSS.
Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan
dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang
web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web
diantaranya adalah warna, ukuran dan formatting. Dengan adanya CSS, konten
dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan
pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan
memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya
dapat memangkas waktu pembuatan web.

3. 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).
Anda dapat menulis satu kode CSS untuk berbagai macam selector
dengan cara menggunakan pemisah koma.
Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna
merah, maka CSSnya menjadi:
h1, h2, h3 {color: red;}
Untuk mengatur lebih dari satu property gunakan pemisah
titik koma ( ; )
Contoh:
h1, h2, h3 {
color: red;
font-family: arial;
font-size: 150%;
}

4. Tugas :
Editlah template web ini dengan CSS :
Langkah – langkah :
Disini saya menggunakan teks editor Sublime Text 2
Bagian yang harus diedit adalah :
 Deskripsi tulisan susu disetarakan dengan font penjelasan
kandungan susu.
 Bila kursor diarahkan ke link menu, maka background menu akan
berubah menjadi warna putih.
 Hiaslah dengan kreasi css
 Isi bagian- bagian web yang kosong / tambahkan beberapa
sentuhan agar hiasan web terisi dengan baik.

5. Jawab :
1.) Deskripsi font web susu yang telah di edit :
Script yang telah di edit :

6. 2.) Halaman link menu edit :
Script link menu :
3.) Efek 3D pada tulisan ayo minum susu
Script :

7. 4.) Isi bagian web yang kosong
Konten sebelah kanan
footer

8. Script konten :

9. Tampilan template web setelah di edit secara keseluruhan :
Demikian pengerjaan tugas ini, mohon maaf bila ada kekurangan dalam
pengerjaan seperti gambar yang tak menyatu dan lain-lain.