Dasar Teori
¡ 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.
Dalam CSS terdapat syntax yang terdiri dari :
1. Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
2. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
3. Value adalah nilai dari pengaturannya.
¡ Ada
4 cara memasang CSS ke
dalam HTML:
1. Inline
CSS
2. Embedded
CSS
3. Import
CSS file
4. External CSS
Keterangan :
Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format.
Penulisan cara ini tidak
memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya
digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh: <P
style=”color:blue”> Isi paragraf. </p>
Pada contoh di atas, elemen paragraf <P> di format
agar tulisannya menggunakan warnabiru.
Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini
hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di
ikuti dengan syntax property: value.
Embedded
CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman
yang sama dengan yang ingin diformat.
Contoh: <head>
<style type="text/css"
media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web
tersebut akan diformat menggunakan font berwarna biru.
Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh: @import
"style.css";
atau
@import url("style.css");
External CSS
Kode CSS external di tulis dalam satu file terpisah yang
disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil
file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini,
anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman
web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
1. Anda membuat satu file dengan notepad atau teks editor
lain, dan berinama, misalkan:style.css, lalu tuliskan kode-kode css di dalam
file tersebut.
p {font-family: arial; font-size: small;} h1
{color: red; }
2. Langkah kedua adalah memanggil file style.css dari semua
halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag
<head> dan </head>
<head>
<link
rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
Berikut contoh sederhana dari sebuah web menggunakan CSS :
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#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:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.footer{
background-color:yellow;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2><h2 align="center "style ="color:Blue;">SUSU ALAMI SEHAT DAN KUAT</h2><img src="header.jpg"></td>
</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</td>
<td align="center"><a href="">Produk</td>
<td align="center"><a href="">Kontak</td>
<td align="center"><a href="">Forum</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"/>
<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.</p>
<p>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>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu"><h2 align="center"style="color:white;">Manfaat susu</h2>
<a href ="">Semoga dengan adanya artikel manfaat susu bagi kesehatan dan perkembangan tubuh ini sahabat-sahabat semua dapat merasakan manfaatnya dan menjadi lebih tahu bagai mana susu sangat berperan penting dalam perkembangan dan kekuatan tubuh.</a>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>
Hasil Dari coding diatas akan jadi seperti ini
Tugas
- Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
- Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
- 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)
- Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
Penyelesaian
1.
Dengan script yang sama akan membuat paragraf pertama dan kedua akan sama bentuknya. disini terdapat
isi ul untuk membuat bullet. jadi pada line berikutnya harus ditulis <li> sebelum mengetik seprti berikut :
Keterangan Coding : Color : mengatur warna dari text
Font :mengatur font untuk suatu element HTML
Padding: fungsinya untuk membuat batasan-batasan pada konten web lain seperti tabel
2.
Diatas Adalah merupakan script untuk membuat Text menjadi LINK
keterangan Coding: dengan memasukan kata a href dalam sebuah text yang di ingin akan membuat text tersebut berubah menjadi link(ketika kursor diarahkan pada text tersebut)
keterangan Coding: dengan memasukan kata a href dalam sebuah text yang di ingin akan membuat text tersebut berubah menjadi link(ketika kursor diarahkan pada text tersebut)
Keterangan Coding : <td> membuat kolom pada tabel
<tr> membuat baris pada tabel
<a href=""> untuk menyisipkan Hyperlink
<align> untuk mengatur letak text
3.
Untuk Coding diatas sini sama seprti diatas sebelumnya
disini terdapat style="color:white;" untuk mengatur warna dari Text
4.
Dengan tambahan CSS dalam sebuah html akan memperindah sebuah tampilan-tampilan yang sangad menarik :)
a
