Tuesday, 11 May 2010

Apa itu CSS & Konsep Dasar CSS

Tulisan ini dibuat untuk memenuhin salah satu tugas kuliah Web Base Programming gw yang deadlinenya tanggal 17 Mei 2010


Apa sih CSS itu? Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain halaman web. Entah berurusan dengan theme / template blog hingga mengedit halaman profile friendster, anda pasti mendengar istilah CSS. Jika anda mencari penjelasan untuk dapat memahami konsep CSS, anda datang ke halaman yang tepat.
Agar konsepnya nyambung, pastikan anda membaca post mengenai HTML terlebih dahulu.

Apa itu 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.
Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.

Desain dengan tabel :

  1. Buat desainnya. menggunakan .psd ( photoshop ) atau .cdr ( coreldraw )
  2. buat tabelnya. menggunakana tag <table>, <tr> dan <td>
  3. potong – potong desain sesuai dengan kolom pada tabel, lalu “selipkan” desain pada kolom tabel menggunakan sebagai elemen image tabel atau background.
Dengan CSS, cara kerja ini dirubah. Anda membuat halaman HTML, lalu anda berikan identitas pada bagian2 tertentu dengan tag <div> baik itu menggunakan atribut id <div id=”"> atau class <div class=”">. Lalu anda buat satu file css, bisa di selipkan pada bagian <head> atau dalam file berbeda dan di hubungkan dengan tag <link rel=”stylesheet” type=”text/css” href=”">. File CSS tadi memberikan nilai dan definisi pada bagian tertentu dari halaman html tadi yang diberikan identitas melalu tag <div>.

Desain dengan CSS :

1. Buat halaman web, beri identitas pada bagian yang diinginkan menggunakan tag <div>
2. Buat file css, beri nilai dari definisi untuk identitas yang diinginkan

  1. hubungkan CSS pada halaman yang dimaksud. bisa ditaruh diantara <head>, atau dibuat file terpisah dan dilink menggunakan tag <link rel=”"> pada area <head>

Kelebihan penggunaan CSS :

  1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
  2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
 .............................................................................................................
Jika dengan HTML,saya menuliskan sebuah kalimat:
Apa Itu CSS?
Maka saya akan menuliskan kode:
<font-size="12px";font-family="arial"><b>Apa itu CSS?</b></font>
---------------------------------------------------------------------
Tapi dengan CSS,kita bisa menghemat penerapan kode,hanya dengan mengatur atribut kalimat yang akan kita tulis,di bagian atas kode <HEAD>,pada halaman HTML anda.
--------------------------------------------------------------------------------------------
Contoh,tulisan Apa itu CSS? di atas,akan saya tulis memakai CSS.
Pertama,saya meletakkan kode ini di atas kode <Head> pada halaman HTML saya.

<style type='text/css'>
#Contoh {
color:black;
font-size:12px;
font-weight: bold;
font-family: arial;
}
</style>

-----------------------------------------------------------------------
Setelah itu,saya menuliskan kode di bawah ini sesudah kode <Head>
<script type='text/javascript'/>
<div id="Contoh">
Apa Itu CSS?
</div>

-----------------------------------------------------------------------
Hasilnya akan seperti ini :

Apa Itu CSS?
Sama khan ?Nah itu penjelasan dikit tentang CSS.
Kurang Jelas,anda bisa pelajari CSS di http://learn-css-tutorial.com/.
 
Bookmark and Share

2 comments:

Yoan_nita said...

sil, gambar kaosnya ampuun dahh..

hahahha..
ada gt yang mau ngerayu pake istilah HTML...
--"

ShapYdoLLs said...

Hahahaha... iya tuh dapet aja gambar begitu yoan --'