Dokumen ini membahas penggunaan CSS untuk merubah tampilan elemen tertentu pada halaman web seperti mengubah warna dan ukuran font pada list konten, mengubah teks menu jadi link yang warnanya berubah saat dihover, menambah iklan di sebelah kanan halaman, dan menambah teks proporsional di bagian header.

1. TUGAS PEMROGRAMAN BERBASIS WEB
CSS
Disusun Oleh :
Muhammad Gunarso
1010651090
Teknik Informatika
UNIVERSITAS MUHAMMADIYAH JEMBER
TAHUN 2014

2. 1. Untuk mengubah teks dalam list (kandungan susu) sehingga property font (warna, jenis font,
ukurannya sama dengan paragraf pertama) maka yang perlu ditambahkan adalah
#isi ul li{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
script ini ditambahkan pada area css sehingga tulisan kandungan susu sama seperti paragraf
pertama

3. 2. Untuk mengganti teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor,
warna teks dan background-nya berubah,kita harus menambah script dibawah ini :
<a href="#">
Script diatas akan mengubah teks menjadi link dan tambahkan pada setiap menu
#menu a:hover {
color:#000000;
background-color:#0161da;
}
Properti Color diatas akan mengubah warna teks menjadi hitam,sedangkan background-color
akan mengubah warna background menjadi warna biru
3. Selanjutnya kita akan mengisi bagian sebelah kanan halaman kosong (bagian berwarna biru)
dengan suatu iklan dibawah ini
<img src="perah.jpg"/>
<p>Susu Sapi Perah murni sehat dan bergizi Ayo beli disini</p>
<p>Hubungi</p>
<img id="panah" src="panah2.png"/>
h1 style="color:#ffffff; text-align:center;">085941009774</h1>
Hasilnya akan seperti ini

4. 4.Untuk menambah teks/ tulisan yang proporsional di bagian gambar header halaman kita perlu
script di bawah ini :
<div id="header">
<p style="color:#ffffff; font:bold 30px arial;margin:10px;">Susu Bernutrisi</p>
<p style="color:#ffffff; font:bold 30px arial;margin:10px;">Dijamin Halal</p>
</div>
Hasil keseluruhan setelah di edit :