Tugas CSS

Pengertian & Manfaat CSS
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup /
markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai
: CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman
HTML.
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:
“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak
antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta
masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan
Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun
penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena
merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan
aplikasi notepad untuk menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia
XHTML,
5. Digunakan dalam hampir semua web browser.

Keuntungan Menggunakan CSS
· CSS memberikan keseragaman pada halaman web.
· Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan
CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat
perubahan dalam style sheet.
· CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
· Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
· CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
Ini adalah contoh dari css itu sendiri..
<!DOCTYPE html>
<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 li{
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: #808080;
}
.footer{
background-color:#C0C0C0;
}
#isi h1 {
font-weight:700px;
font-size:35px;
color:#064475;
text-shadow:
1px 2px 1px #9ad2fe,
-1px -2px 1px #DCDCDC;
}
#text h2 {
font-weight:755px;
font-size:35px;
color:#fff;
text-shadow:
0 0 3px #FFFFA0,
0 0 5px #FFFF4D,
0 0 9px #FFFF41,

0 0 20px #FFFF2A,
0 0 25px #FFFF2B,
0 0 30px #FEFE00,
0 0 40px #F7F700;
}
#text1 li {
font-weight:400px;
font-size:10px;
color:black;
text-shadow:
1px 2px 1px #FFFFFF,
-1px -1px 1px #DCDCDC;
}
#header{
background-image:url(header.jpg);
width:1000px;
height:200px;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td id="header" colspan=2>
<h2 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font-
size: 20pt;">SAUDARA_PRODUCTION @2014</h2>
<h1 style="opacity: 0.5; filter: alpha(opacity=50); width: 100%; font-
size: 20pt;">kerja kerja kerja!!!</h1>
</td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a
href="www.faceboook.com" title="Depan | Saudara_Production">Depan</a></td>
href="www.faceboook.com" title="Profil | Saudara_Production">Profil</a></td>
href="www.faceboook.com" title="Produk | Saudara_Production">Produk</a></td>
href="www.faceboook.com" title="Kontak | Saudara_Production">Kontak</a></td>
href="www.faceboook.com" title="Forum | Saudara_Production">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"/>
<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>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>
</p>
</div>
</td>
<td style="color:black; font:11px Candara;" width="30%"
class="table-menu">
<font face="Aklatanic TSO" size="5"
color="white"><b><marquee behavior="alternate" scrollamount="5" loop="">::
PETUALANGAN ::</marquee></b></font>
<div id="text">
<h2 style="font:bold 13px Tahoma;">Bromo Tengger</h2>
<img src="bromo.jpg" width="50%" height="9%"
class="gambar"/>

<div id="text1">
<li>Bromo Tengger Semeru National Park is located in East
Java, Indonesia, to the east of Malang and to the southeast of Surabaya, the capital of East
Java. Wikipedia Address: Jl. Raden Intan No.6, Indonesia Area: 194.1 sq miles (502.8 km²)
Phone: +62 341 491828</li>
<div align="right" id="nex"><em><a href="">Read more --
></a></em></div>
<h2 style="font:bold 13px Tahoma;">Teluk Ijo</h2>
<img src="teluk.jpg" width="56%" height="16%"
class="gambar"/>
<li>Teluk ijo berlokasi di Kecamatan Pesanggaran tepatnya di
desa Sarongan. Berjarak sekitar 90 km arah selatan dari kota Banyuwangi. Untuk menuju
pantai ini dari Banyuwangi kita tinggal mengikuti petunjuk arah menuju Pesanggaran-
Sarongan-Sukamade yang masih satu jalur dengan rute menuju pantai sukamade Taman
Nasional Merubetiri.</li>
<div align="right" id="nex"><em><a href="">Read more --
></a></em></div>
</td>
</div>
</div>
</tr>
<tr>
<td colspan=2 height=50 class="footer" align="center">
<a href="https://Saudara_Production"><img src= fb.png ></a>
<a href="https://Saudara_Production"><img src= tw.png
></a></center>
<div style="color:black; font:bold 12px candara, arial,
tahoma;"id="nex"><a href="">About</a>
| Powered by Saudara_Production</div>
</tr>
</table>
</body>
</html>

Gambar diatas adalah contoh dari css, dimana terdapat banyak style
height : Mengeset tinggi dari sebuah elemen
width : Mengeset lebar dari suatu elemen
table : Mengeset algoritma yang digunakan untuk menampilkan sel tabel, baris, dan kolom
background-repeat : Mengeset apakah/bagaimana background akan diulang
background-image : Mengeset sebuah gambar menjadi sebuah background
background-color : Mengeset warna latar background suatu elemen
font : Mengeset semua properti untuk font(huruf) dalam satu deklarasi
color : Mengeset warna teks
text-align : Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada elemen
border : Mengeset semua properti untuk 4-border (yang tertutup) dalam satu deklarasi

Tugas CSS

More Related Content

What's hot (20)

Viewers also liked (10)

Recently uploaded (20)

Tugas CSS