Laporan ini membahas penggunaan CSS (Cascading Style Sheets) untuk merancang tampilan web. Dokumen ini menjelaskan pengertian CSS, keuntungan menggunakannya, sintaks dasar CSS, dan contoh kode CSS embedded untuk mengatur tampilan tabel, menu, dan isi halaman web.

1. Laporan Pemrograman Berbasis Web
Membuat Design Web dengan CSS
(Cascading Style Sheets)
Disusun Oleh :
Diyah Apriliana Puspita Dewi
1210651136
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
UNIVERSITAS MUHAMMADIYAH JEMBER | 1210651152 | DIYAH APRILIANA PUSPITA DEWI

2. Pemrograman Berbasis Web
2012/2013
Penjelasan tentang CSS
Apa itu CSS | CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah
sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa komponen
didalam web sehingga menjadi tampak seragam,berstruktur dan teratur.CSS inilah yang
bertanggung jawab atas penampilan web anda dimata pengunjung melalui browser internet.
CSS yang buruk bisa membuat visitor Anda tidak kerasan lagi menjelajahi blog anda,apalagi
untuk kembali lagi.
Memaksimalkan CSS adalah penting (khususnya) blog agar lebih nyaman untuk dibaca
dilihat oleh visitor anda dan kalau bisa bikin lah CSS yang meringankan loading.
Jika anda tertarik untuk mengedit tampilan template blog sendiri,maka mengerti CSS adalah
wajib.Namun ingat,untuk menjadi seorang blogger tidak wajib untuk mengerti CSS karena banyak
template yang bisa didapat dari desainer blog.Tapi tak ada salahnya kan mengerti sedikit
saja?.....karena menggunakan tampilan blog hasil desain sendiri itu dapat memberikan kepuasan
tersendiri.
Keuntungan CSS
Memudahkan dalam penggantian format secara keseluruhan. Lebih praktis. Untuk
mengubah tampilan web, tanpa mengubah layout utamanya.
Syntaks 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)
Disini saya akan membuat tampilan website dengan syntax CSS dengan design yang juga
kita tentukan sendiri. Langsung saja kita ke project untuk membuatnya.
I. MEMBUAT SYNTAX CSS BERTIPE EMBEDDED
Buat file dengna nama index sebagai main untuk tampilan webnya.
Untuk file index ini kita beri syntax untuk membuat tata letak web, berikut syntaxnya :
Page 2 of 6

3. Pemrograman Berbasis Web
Keterangan:
Dimana title adalah sebagai judul halaman web, Syntax di atas yang berwarna hitam
merupakan syntax embaded yg berfungsi sebagai pengatur gambar, fontm color dst,
Syntax table merupakan pengatur ukuran tabel dimana hasil dari tabel tersebut akan
mengikuti sesui syntax tabel, Syntax #menu sebagai id pada setiap font, gambar dst,
Syntax-syntax css yang bertipe embedded fungsinya untuk memberi fungsi pada syntax html
yang berada di body
Page 3 of 6

4. Pemrograman Berbasis Web
Jadi ini semua sebagai syntax css bertipe embedded
II. APLIKASI CSS EMBEDDED PADA HTML
Dibagian kedua ini adalah penjelasan untuk aplikasi syntax css embedded ataupun
import, berikut codenya :
Page 4 of 6

5. Pemrograman Berbasis Web
Mulai dari tag table yang paling atas di dalam body dengan width 70% yang berarti ukuran
table tidak full 1 halaman melinkan hanya memenuhi sebagian atau sebesar 70% ukuran
halaman yang ada, dan dengan align bertipe center yang berarti posisinya berada di tengah
Dibawahnya ada tag “td” dengan id header yang berarti mengambil fungsi tas css diatas yang
berupa embedded css
Disini juga ada tag yang ber id mnu yang berisi tombol menu atas sebagai pokok halaman,
ditombol itu juga mengambil fungsi dari syntax css diatas, disini saya beri gambar untuk
background tombolnya dan dengan tipe “:hover” yang berarti jika kita arahkan mouse pada
tiap-tiap tombol yang memiliki fungsi tersebut maka akan ada perubahan padanya, perubahan
disini saya beri warna background hijau dan text warna hitam
Selanjutnya untuk isi dari website yang kita buat, saya beri space sebesar 70% untuk isinya,
dengan mengambil fungsi css dari id “isi” dengan fungsi yang berbeda-beda seperti fungsi
untuk li, image dan p/paragraf, saya beri fungsi isi li dan isi p dengan format yang sama agar
tampilannya terlihat rapi dan menarik
Berikut Hasilnya
Page 5 of 6

6. Pemrograman Berbasis Web
Page 6 of 6

7. Pemrograman Berbasis Web
Page 6 of 6