css (cascading style sheets)

10
CSS (Cascading Style Sheets) Perngertian dan Keuntungan CSS 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. Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan, Lebih praktis, Untuk mengubah tampilan web, tanpa mengubah layout utamanya. Sintaks 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 yang lain : h1 {color: red;} ¡ Selector:h1 ¡ Property=color ¡ Value=red Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah) lanjut saja dengan kasus <html> <head> <style type="text/css"> table{ border-colapse:colapse; border:1px solid black; } #menu{

Upload: iqbal-doang

Post on 02-Aug-2015

43 views

Category:

Software


3 download

TRANSCRIPT

Page 1: CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)

Perngertian dan Keuntungan CSSCSS 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.Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan, Lebih praktis, Untuk mengubah tampilan web, tanpa mengubah layout utamanya.

Sintaks CSSTerdiri 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 yang lain : h1 {color: red;}¡ Selector:h1¡ Property=color¡ Value=redTerjemahan bahasa manusia: mengatur color dari h1 ke red (warna merah)

lanjut saja dengan kasus

<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; }

Page 2: CSS (Cascading Style Sheets)

#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; }

Page 3: CSS (Cascading Style Sheets)

.footer{ background-color:blue; } .header{ background-color:red; </style> </head> <body> <table width="70%" align="center"> <td colspan=2 height=50 class="header"> <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"><p> <marquee><center> Belajar CSS dan HTML5 <br> Dengan Mudah dan gampang ^_^ </br></p></p></center></marquee> <tr> <td colspan=2 background="header.jpg" width="100%" height="200 px" align="left" valign="centre" > <font size="20" color="gold" ><b><i>Pemrograman Berbasis WEB</i></b></font></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</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"/> <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.

Page 4: CSS (Cascading Style Sheets)

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"> Blog Iqbal Doang membahas CSS</i></marquee><br> <br> Nama : Muhammad Iqbal <br> Jurusan : Teknik Informatika UNMUH Jember </br> <br><font face = "kristen ITC" size = "4">CSS (Cascading Style Sheets)</font></br> <p> CSS merupakan singkatan dari Cascading Style Sheets yaitu suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markah. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML,yang menggunakan Style untuk menampilkan elemen-elemen HTML. Style mendefinisikan bagaimana elemen-elemen HTML ditampilkan di browser. </p> <p> Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan, Lebih praktis,Untuk mengubah tampilan web, tanpa mengubah layout utamanya.</p> <p>Menurut penulisannya CSS dapat dibagi menjadi 3 jenis, yaitu : <li><a style ="color:black;">Internal Style Sheet <li><a style ="color:black;">External Style sheet <li><a style ="color:black;">Inline Style Sheet</a></li>

Page 5: CSS (Cascading Style Sheets)

</p> </td> </tr> <tr> <td colspan=2 height=50 class="footer"> <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"> <p><center><TT><b>TERIMA KASIH MELIHAT WEB INI <br> IQBAL DOANG ^_^ </TT><b></br></p></strike></center></p> </td> </tr> </table> </body></html>

dan ini lah hasil dari skrip di atas

penjelasan :

1. Mengubah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama) dengan cara menambahkan sintax css dibawah ini  diatas sintax </style>

isi ul{            color:black;                font: 11px Candara, Arial, Tahoma;                padding-bottom:5px;                }2. Mengubah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah menggunakan CSS

<td align="center"><a href="">Depan</a></td><td align="center"><a href="">Profil</a></td>

Page 6: CSS (Cascading Style Sheets)

<td align="center"><a href="">Produk</a></td><td align="center"><a href ="">Kontak</a></td><td align="center"><a href="">Forum</a></td>

3.Mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). dengan CSS dan source code HTML

<td width="30%" class="table-menu">                Blog Iqbal Doang membahas CSS</i></marquee><br>                    <br> Nama : Muhammad Iqbal                    <br> Jurusan  : Teknik Informatika UNMUH Jember </br>                    <br><font face = "kristen ITC" size = "4">CSS (Cascading Style Sheets)</font></br>                    <p> CSS merupakan singkatan dari Cascading Style Sheets yaitu suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan                     suatu dokumen yang ditulis dalam bahasa markah. Penggunaan yang paling umum dari CSS adalah untuk memformat                     halaman web yang ditulis dengan HTML,yang menggunakan Style untuk menampilkan elemen-elemen HTML.                     Style mendefinisikan bagaimana elemen-elemen HTML ditampilkan di browser. </p>                    <p> Keuntungan dari CSS, yaitu Memudahkan dalam penggantian format secara keseluruhan,                    Lebih praktis,Untuk mengubah tampilan web, tanpa mengubah layout utamanya.</p>                    <p>Menurut penulisannya CSS dapat dibagi menjadi 3 jenis, yaitu :                    <li><a style ="color:black;">Internal Style Sheet                    <li><a style ="color:black;">External Style sheet                    <li><a style ="color:black;">Inline Style Sheet</a></li>                    </p>                    </td>

5. tambahanmerubah warna footer dan header

            .header{                background-color:red;

6. tambahan <td colspan=2 height=50 class="header">                                 <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"><p>                    <marquee><center> Belajar CSS dan HTML5                    <br> Dengan Mudah dan gampang ^_^ </br></p></p></center></marquee>            <tr>

Page 7: CSS (Cascading Style Sheets)

         

7. tambahan     <td colspan=2 background="header.jpg" width="100%" height="200 px" align="left" valign="centre" >                <font size="20" color="gold" ><b><i>Pemrograman Berbasis WEB</i></b></font></td>

  8. tambahan 

footer{                background-color:blue;            }

<td colspan=2 height=50 class="footer">                    <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;">                    <p><center><TT><b>TERIMA KASIH MELIHAT WEB INI <br>                    IQBAL DOANG ^_^ </TT><b></br></p></strike></center></p>

 

9. tambahan<a style ="color:black;">Internal Style Sheet <li><a style ="color:black;">External Style sheet <li><a style ="color:black;">Inline Style Sheet

sekian tutorial dari saya terima kasih ^_^