Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
1. Laporan Pemrograman Berbasis WEB
Page 1 of 15
CASCADING STYLE SHEETS
(CSS)
Oleh
Darmawan Ramadana
1210651040
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER
2013/2014
2. Laporan Pemrograman Berbasis WEB
Page 2 of 15
1. Tujuan
Memahami konsep dasar CSS dan penggunaannya pada web
2. Teori
Definisi
Cascading Style Sheets dapat diartikan berupa aliran dari suatu kode ke kode lain yang
saling berhubungan dengan fungsi untuk mengatur format / tampilan suatu halaman
HTML.
Keuntungan Menggunakan CSS
- Memudahkan dalam penggantian format secara keseluruhan
- Lebih praktis
- Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
Perintah CSS
Perintah untuk CSS diawali dengan selector lalu diikuti dengan sepasang kurung kurawal
yang didalamnya berisi atribut dari css, Contoh
h1{color:red;}
Keterangan :
- h1 adalah selector (semua tag “h1” dalam kode html akan diatur disini)
- color merupakan sebuah property dari CSS
- dan red adalah value / nilai dari property CSS
Judul Laporan :
Cascading Style Sheets (CSS) – Tugas 4 Pemrograman Berbasis Web
3. Laporan Pemrograman Berbasis WEB
Page 3 of 15
Pengelompokan Selector :
Perintah CSS juga dapat dituliskan dengan berbagai macam selector dengan cara
menggunakan pemisah koma, contoh jika ingin mengatur tag-tag h1, h2, h3 dengan
pengaturan berwarna merah, maka perintah CSSnya sebagai berikut :
h1, h2, h3{color:red;}
Penggunaan Multi Property
- Untuk mengatur lebih dari satu property gunakan pemisah titik koma (;).
Contoh :
h1, h2, h3{
color:red;
font-family:arial;
font-size:150%;
}
Pemasangan CSS pada HTML
Ada 3 cara menggunakan CSS ke dalam HTML:
1. Inline CSS
Yaitu kode CSS yang dituliskan langsung ke dalam tag HTML, penulisan dengan
cara ini tidak memerlukan selector dalam CSS.
Contoh :
<p style=“color:blue;“>
Isi paragraph.
</p>
2. Embedded CSS
Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara
tag <body> dan </body>
4. Laporan Pemrograman Berbasis WEB
Page 4 of 15
Contoh :
<head>
<style type=”text/css”>
P{color:blue;}
</style>
</head>
3. Import CSS file
Yaitu kode CSS yang dituliskan pada file tersendiri berekstensi .css, untuk cara
penggunaannya menggunakan tag <link>
Contoh :
<head>
<link rel=“stylesheet“ type=“text/css“ href=“css/style.css“
media=“screen“>
</head>
Keterangan :
Pada kode href merujuk pada file CSS, yaitu berada pada folder css dengan nama file
style.css
Class Selector
Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan
pada beberapa elemen.
Format penulisan class selector :
.nama_class_selector{property:value;}
Deklarasi pada HTML menggunakan atribut class
Contoh :
<div class=”nama_class_selector”>isi</div>
5. Laporan Pemrograman Berbasis WEB
Page 5 of 15
Penulisan kode css :
.tengah{text-align:center;}
p.tengah{color:red;}
h1.kiri{color:blue;}
h1.tengah{color:black;}
Pemakaian kode CSS ke HTML :
<p class=“tengah”>Teks tengah akan berwarna merah</p>
<div class="tengah">
<h1>Tag h1 tengah akan berwarna hitam</h1>
</div>
<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>
ID Selector :
- ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik
- Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintaks
CSS
Contoh :
#selector{
color:red;
}
Pemanggilan pada Division :
<div id="selector">isi</div>
6. Laporan Pemrograman Berbasis WEB
Page 6 of 15
3. Tugas
Mengolah CSS pada folder css yang diberikan pada pertemuan ini:
1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis
font, ukurannya sama dengan paragraph pertama).
Pada paragraph pertama menggunakan pengaturan CSS ID Selector sebagai
berikut :
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
padding-left:10px;
text-align:justify;
}
Pada pemanggilan dalam division dengan nama “isi” seperti berikut :
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo
Minum Susu</h1>
<img src="susu.jpg" style="float:left;padding-right:10px;"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu
dari mamalia betina. Susu adalah sumber gizi utama bagi bayi sebelum
mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi)
juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim,
keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi
manusia. Semua orang di dunia ini membutuhkan susu untuk menopang
kehidupannya. Baik dari bayi sampai orang yang sudah lanjut
usia.<br>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak
digemari anak-anak ini disebut juga darah putih bagi tubuh karena
mengandung banyak viatmin dan berbagai macam asam amino yang baik
bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan pembuluh darah agar tetap
stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur
lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga
tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
7. Laporan Pemrograman Berbasis WEB
Page 7 of 15
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
Agar semua komponen yang berada pada division id selector isi sama maka
tambahkan saja tag yang berada division isi ke dalam css sebagai selector, maka
kode CSS menjadi seperti berikut :
#isi p, ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
padding-left:10px;
text-align:justify;
}
2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan
kursor, warna teks dan background-nya berubah.
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:white;
text-decoration:none;
}
#menu a:hover{
background-color:#cde;
color:blue;
}
8. Laporan Pemrograman Berbasis WEB
Page 8 of 15
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
Pemanggilan pada division id dengan nama “menu”
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="#">Depan</a></td>
<td align="center"><a href="#">Profil</a></td>
<td align="center"><a href="#">Produk</a></td>
<td align="center"><a href="#">Kontak</a></td>
<td align="center"><a href="#">Forum</a></td>
</tr>
</table>
</div>
3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten
(misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda.
Pada soal no 3 ini diselesaikan menggunakan metode import CSS dengan nama
file style.css, berikut pemanggilan file pada tag <link> didalam tag <head>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Berikut CSSnya :
/* berikut css yang sudah tertera dalam tag <style> didalam head */
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
9. Laporan Pemrograman Berbasis WEB
Page 9 of 15
/* berikut css yang sudah tertera dalam file style.css */
.text-menu h1, h2, h3, h4, h5, h6{
color: #023666;
padding:10px;
margin:10px;
background-color:#58b9f5;
text-align:center;
font-style:italic;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
}
.text-menu p{
color: #023666;
padding:10px;
margin:10px;
background-color:#58b9f5;
font-size:14px;
font-family:Calibiri;
text-align:justify;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
Pemanggilan classnya :
<td width="30%" class="table-menu text-menu">
<h3>Judul Konten</h3>
<p>
<?php
for($i=0;$i<20;$i++){
echo "ini adalah isi dari konten ";
}
?>
10. Laporan Pemrograman Berbasis WEB
Page 10 of 15
</p>
</td>
Keterangan : nama class yang berwana merah memanggil class pada tag <style>
dalam <head> sedangkan yang berwarna hijau memanggil class dalam file
style.css
4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman.
Untuk menambahkan teks / tulisan pada header menggunakan pengaturan CSS
sebagai berikut :
.teks-header{
height:200px;
font-size:25px;
color:#fff;
padding-left:120px;
background-image:url('header.jpg');
background-repeat:no-repeat;
}
Pada pengaturan CSS diatas terlihat diberikan sebuah gambar latar dengan nama
“header.jpg” agar tulisan bisa berada di atas gambar, berikut pemanggilan class
CSSnya :
<tr>
<td colspan=2 class="teks-header">
<p>CASCADING STYLE SHEETS (CSS)<br>By : Darmawan
Ramadana</p>
</td>
</tr>
14. Laporan Pemrograman Berbasis WEB
Page 14 of 15
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a
href="#">Depan</a></td>
<td align="center"><a
href="#">Profil</a></td>
<td align="center"><a
href="#">Produk</a></td>
<td align="center"><a
href="#">Kontak</a></td>
<td align="center"><a
href="#">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara,
Arial, Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg" style="float:left;padding-
right:10px;"/>
<p>Susu adalah sebuah cairan bergizi yang
dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi
sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah
menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu
bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu
untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut
usia.<br>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak
ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai
macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan
pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan
jantung.</li>
<li>Zat besi, mempertahankan kulit tetap
15. Laporan Pemrograman Berbasis WEB
Page 15 of 15
bersinar.</li>
<li>Tyrosine, mendorong hormon
kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan
sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak
cepat.</li>
<li>Seng, menyembuhkan luka dengan
cepat.</li>
<li>Vitamin B2, meningkatkan
ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu text-menu">
<h3>Judul Konten</h3>
<p>
<?php
for($i=0;$i<20;$i++){
echo "ini adalah isi dari
konten ";
}
?>
</p>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:#fff; font:bold 12px candara, arial,
tahoma; text-align:center;">
<?php echo "Bondowoso @ ".date('Y'); ?><br>
Tugas-4 Pemrograman Berbasis Web</p>
</td>
</tr>
</table>
</body>
</html>
