CSS (Cascade Style Sheet)

Dengan CSS, Anda tidak membutuhkan tabel dalam menata layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.

Berikut adalah contoh halaman web yang akan kita buat :

Listing CSS :

<html>

<head>

<title> belajar css </title>

<style type="text/css">

.header

{ padding : 10px ; border: 2px solid #81F7F3 ; margin:0 90px 0 90px}

.isi

{ padding :10px ; border : 2px solid #FFFF00 ; margin :10 0 10px 90px; width : 960px ; background-color: sienna}

.navigasi

{ padding : 10px ; float : right ; margin :10px 90px 0 0 ; border :2px solid #0080FF ; background-color: green}

.footer

{ padding : 10px ; margin:0 90px 0 90px ; border : 2px solid #FE2E2E ; background-color: blue}

</style>

</head>

<body>

<div class="header">

<h2 align="center"> Selamat datang di rumah saya </h2>

</div>

<div class="navigasi">

<h4 align="center"> <blink> Daftar isi </blik></h4>

<ul>

<li> Daftar pertama </li>

<li> Daftar kedua </li>

<li> Daftar ketiga</li>

<li> daftar keempat </li>

</ul>

</div>

<div class="isi">

<p>

Oh kiss me out of the bearded barley, <br>

Nightly , beside the green, green grass <br>

Swing, swing, swing the spinning step <br>

You'll wear those shoes and I will wear that dress

<br>

Oh, kiss me beneath the milky twilight<br>

Lead me out on the moonlit floor <br>

Lift you open hand <br>

Strike up the band, and make the fireflies dance <br>

Silvermoon's sparkling, <br>

So kiss me

<br>

Kiss me down by the broken tree house <br>

Swing me , upon its hanging tire <br>

Bring, bring , bring your flowered hat <br>

We'll take the trail marked on your father's map

</p></div>

<div class="footer">

<h4> copyright @2011-2012 by <a href="#" style="text-decoration: none" target="_blank"> D-Crow </a> </h4>

</body>

</html>

Hasil dari Listing Diatas :

Keterangan Dalam CSS:

Padding artinya jarak teks dari tepi kotak
border artinya membuat garis tepi 1 pixel
background artinya membuat warna latar
Float artinya memindahkan letak Elemen
Width merupakan Lebar elemen
margin artinya memberi jarak antar elemen satu dengan elemen yang lain

margin dengan cara seperti ini membuat penulisan lebih kelihatan simple ==>> margin :1px 2px 3px 4px

tetapi jika anda bingung di bawah ini adalah penjelasannya

1px merupakan 1px untuk atas atau bisa juga dituliskan dengan mengggunakan margin-top : 1px

2px merupakan 2px untuk arah dari kanan atau bisa juga dituliskan dengan menggunakan margin-right :2px

3px merupakan 3px dari arah bawah atau bisa juga dengan menggunakan margin-bottom : 3px

4px merupakan 4px dari arah kiri atau bisa juga dituliskan dengan menggunakan margin-left : 4px

D-Crow

Membuat Layout dengan CSS

CSS (Cascade Style Sheet)

Listing CSS :

Keterangan Dalam CSS:

Tambahkan Komentar

3 komentar: