<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

Di dalam div-nya ada tag h1 dan p, biar keliatan ada isinya. Nah, hasil dari kode html di atas bisa dilihat di sini. Terlihat khan bahwa div yang id-nya box2 terletak di bawah box1, ya itu karena sifatnya tag div, yang didefinisikan duluan akan terletak paling atas. Selanjutnya, kita coba menggunakan teknik float pada div-div ini, sebelumnya dua div ini dikasih background dulu biar lebih keliatan kotaknya.

Yang pertama di float, hmm.. box1 aja deh, di float left. Hasil yang diharapkan adalah box1 berada di sebelah kirinya box2. O iya, beberapa cara pada contoh kali ini sebenarnya sudah pernah diterapkan ketika saya membahas tentang cara membuat layout tanpa tabel, tapi diulang lagi dikit biar lebih paham..hehe…

#box1{
  float: left;
  background: green;
  color: white;
}

#box2{
  background: purple;
  color: white;
}

Lalu kita lihat hasilnya di sini, hmm… tidak ada perubahan ya box1 nya tetap berada di atas box2, kenapa itu terjadi? Apakah floatnya tidak berjalan? Sebenarnya float yang diberikan ke box1 itu sudah berjalan, box1 sudah mengambang/ melayang ke arah kiri. Namun, width / lebar dari box1 belum ditentukan dan ini membuat lebar dari box1 adalah sama dengan lebar browser, jadinya karena tidak muat maka box2 terpaksa terletak di bawah box1 tidak di sebelah kanannya, nah coba tentukan width dari box1 berapa pun asal jangan melebihi lebar browser Anda, lalu refresh browsernya dan liat hasilnya.

Sekarang yang box2 nya, di float left atau right? bisa keduanya sih, tapi hasilnya akan sedikit berbeda, kalau box2nya di float left, box2 akan berada di sebelah kanan box1 serta box1 dan box2 akan berdempetan kecuali kalau box1 dan box2 diset marginnya.

#box1{
  float: left;
  background: green;
  color: white;
  width: 400px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
}

Hasilnya ini. Sedangkan jika box2 di float right, tetap box2 ada di kanannya box1 tapi akan ada sedikit jarak antara box1 dan box2, coba lihat ini untuk yang box2-nya di float right.

Sudah mengerti??

Lalu, gimana kalau ada tiga div trus ingin dijadikan tiga kolom?? Kita coba saja, misal ketiga divnya seperti ini ,,hmmm

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box3">
 <h1>Box3</h1>
 <p>Etiam eu est est,....</p>
</div>

Nah, css-nya seperti apa?? simpelnya sih seperti ini :

#box1{
  float: left;
  background: green;
  color: white;
  width: 150px;
  height: 700px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
  height: 700px;
}

#box3{
  float: left;
  background: cyan;
  color: black;
  width: 150px;
  height: 700px;
}

Hasilnya

Box1, box2 dan box3 di float left, trus kalau mau box2 / box3 di float right bisa juga atau kalau semua ingin di float right juga bisa, silahkan dicoba-coba sendiri dan liat perbedaannya..

Download Source Code

h1{color : red;}

Sedangkan untuk background, property yang digunakan adalah background-color (sudah saya jelaskan penggunaannya di artikel tentang background.. )

Nah, yang akan di bahas kali ini adalah cara mendefinisikan warna-warna tersebut. Ada 5 cara untuk mendefinisikan sebuah warna pada css, hmm.. apa sajakah itu ??

1. Langsung menggunakan nama warnanya

Contohnya klo pengen ngasih warna putih di h1, langsung aja tulis begini :

h1{color : white;}

Tapi sayangnya klo pake cara ini, nama2 warna yang bisa didefinisakn oleh css cuman dikit. Klo gak salah cuman bisa 17 warna. Coba deh liat gambar di bawah ini

2. Menggunakan Hexadesimal

Nah, klo pake cara ini warna yang bisa didefinisikan bisa banyak. Contoh penulisannya begini nih :

h1{color : #FFFFFF;}

#FFFFFF = white, nah kamu bisa menggunakan photoshop untuk mendapatkan kode2 hexadesimal sesuai warna yang diinginkan.

3. Menggunakan Short Hexadesimal

Klo hexadesimal biasa khan kode nya ada 6 karakter ya, nah kode2 itu bisa disingkat menjadi 3 karakter aja (ini yang disebut dengan short hexadesimal). Contoh di CSSnya :

h1{color : #FFF;}

4. RGB Desimal

Contohnya :

h1{color : rgb(255,0,55);}

5. RGB Persen

RGB persen hampir sama dengan RGB desimal cuman nilai2 RGBnya itu dalam persen bukan dalam desimal. Cara ngedapetin nilai persennya gini nih. Hmm.. Misalkan RGB desimalnya : rgb(255,0,51) . Jadinya RGB persennya :

• red : 255/255 x 100% = 100%
• green : 0/255 x 100% = 0%
• blue : 51/255 x 100% = 20%

di css nya :

h1{color : rgb(100%,0%,20%);}

Sumber : video tutorial CSS dari Lynda.com

1. Meletakkan CSS sebagai atribut pada suatu tag HTML, contoh :

<h4 style=”color: #FFFFFF”>heading1</h4>

2. Meletakkan CSS  dengan memakai tag <style></style>. Contohnya:

<head>
<style type=”text/css”>
<!--
h4{
   color:#FFFFFF;
}
-->
</style>
</head>
<body>
<h4>contoh</h4>
</body>

3. Meletakkan CSS di luar dokumen HTML dengan file tersendiri biasanya berextension “.css”, cara agar file HTML dan CSS saling berhubungan, bisa menggunakan tag <link> di dalam tag <head>. Contoh :

<link rel=”stylesheet” type=”text/css” href=”file.css”/ >

Cara ini biasanya digunakan ketika kamu memiliki banyak file HTML yang memiliki style yang sama, jadi cukup dengan membuat satu file .css kamu tinggal panggil2 file itu di lebih dari satu dokumen HTML.

CSS itu singkatan dari Cascading Style Sheet, ada kata style, berarti ada hubungannya dengan desain mendesain. Gampangnya gini, CSS itu digunakan untuk mendesain konten-konten yang ada di web supaya keliatan lebih indah. Sebenernya ngedesain konten ini bisa langsung dilakukan dengan HTML, tapi akan merepotkan kamu dan juga akan membuat kodingan HTMLnya menjadi sedikit berantakan.

Contohnya gini, misal kamu pengen semua font di dalam tag <h4></h4> berwarna putih, nah kalo pake HTML langsung kamu bisa menambahkan tag <font></font> di dalam tag <h4></h4>, jadinya gini

<h4><font color =”#FFFFFF”>Putih</font></h4>

Kata Putih di dalam tag tersebut akan berwarna putih. Nah kalo ada misalkan ada 50 tag <h4> nya atau ada 100. Pegel khan tangannya…

Makanya ada CSS, klo pake CSS tinggal di tulis satu kode CSSnya seperti ini :

h4{ color : #FFFFFF }

semua yang memiliki tag <h4> akan berwarna putih tanpa perlu nulis kode tersebut berulang-ulang. simpel khan??

Nah, ketika kamu akan mendesain sebuah web, hal yang perlu kamu lakukan adalah menggunakan HTML hanya untuk menulis konten-konten web tersebut dan menyerahkan semua desain mendesain ke CSS, ini akan memperingan pekerjaan kamu sekaligus akan membuat kodingan kamu menjadi lebih clean / bersih dan gak berantakan.

Struktur dari CSS itu cukup simpel,coba kamu perhatikan h4{ color : #FFFFFF; } , itu salah satu contoh kode dari CSS. Sedikit penjelasan:

h4 itu namanya selector (menunjukkan bagian mana yang mau didesain/ dikasih style). Trus color itu property dan #FFFFFF itu valuenya. Color: #FFFFFF; adalah satu statement.

Di dalam CSS satu selector bisa diisi lebih dari satu statement, contohnya :

h4{
    color: #FFFFFF;
    font-size:24px;
}

Antar statement dipisahkan dengan titik koma (;). O iya lupa,, komentar di CSS itu nulisnya gini

/* ini komen */

Oke-oke,,dah mulai kenal khan sama CSS?? Biar semakin kenal kamu bisa nyari buku2 atau ebook2 tentang CSS.. atau kalo kamu males nyarinya kamu bisa tungguin artikel2 berikutnya dari blog ini. So,, kunjungin trus blog ini… /* Promosi_mode = [on] */