Oct 19, 2008
Apa itu CSS & Konsep Dasar CSS
oleh Fikri
Image courtesy @web-design.csssoft.net
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 :
- Buat desainnya. menggunakan .psd ( photoshop ) atau .cdr ( coreldraw )
- buat tabelnya. menggunakana tag <table>, <tr> dan <td>
- 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 :
- Buat halaman web, beri identitas pada bagian yang diinginkan menggunakan tag <div>
Buat halaman web
- buat file css, beri nilai dari definisi untuk identitas yang diinginkan
Beri Nilai dan Definisi Untuk Identitas
- 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 :
- halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
- anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Kelebihan Desain Menggunakan CSS
Bagaimana? ada pertanyaan? post kali ini hanya akan membahas pemahaman dasar dan definisi saja. untuk implementasi dari CSS itu sendiri, kita bahas pada post2 selanjutnya.
Enjoy! 
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini
berlangganan via email:
Apa itu JavaScript | Bloggingly | a blog about blog, blogging, and blogger bilang,
[...] Javascript dipanggil untuk memberikan fungsi pada halaman web dengan meletakannya secara internal pada halaman html diantara tag <script> </script> atau dibuat pada file terpisah ( eksternal ) dan lalu di link menggunakan <link rel=”” href=””> pada bagian <head>, seperti CSS [...]
on 21 Oct 2008 / 04:06
Mihael Ellinsworth bilang,
Ah, ya. Sekarang bukan hanya CSS. Bahkan jQuery sudah mengimplementasi teknik yang kurang lebih sama. Web menjadi semakin dynamic..
on 21 Oct 2008 / 22:03
imamura bilang,
Sip deh. Mau lihat koleksiku yah .
ada wallpaper cantik-cantik
on 02 Dec 2008 / 16:18
astra bilang,
makasih ya penjelasannya…jelas, soalnya aku baca buku cara bikin web, udah berkali2 masih gak ngerti2..sekarang lg pingin punya web yg super keren tapi bingung bikinnya..
tks
on 05 Dec 2008 / 09:24
F bilang,
Sama sama, senang bisa membantu.
Menurut saya, belajar pemrograman web itu masalah frekuensi. Semakin sering dilatih, pasti bisa juga.
Kalau CSS, saya belajar otodidak dan Alhamdulillah akhirnya bisa. Ada kemauan ada jalan
on 06 Dec 2008 / 05:30
puadi bilang,
seep dahh
jd tambah dan tambah ajah tuh pengetahuan…….
trims
truslah berkreasi bangsa indonesia
on 15 Apr 2009 / 10:00
noersilo bilang,
wah, makasih mas. baru belajar desain web nih.
mau nanya, apakah dreamweaver sudah terdapat CSS juga.??
apakah ada software selain dreamweaver yang digunakan untuk membuat web? bukan CMS lho ya..
thanks
on 13 Sep 2009 / 00:01
simahir bilang,
wah.. penjelasannya mantab,,
saya jadi lebih ngerti deh tentang CSS.
Trims mas..
saya suka blognya.
on 14 Sep 2009 / 11:43
MasWafa bilang,
mas, blo saya kok terlalu lebar ya, padahal sudah saya atur kok malah jadi amburadul
on 21 Sep 2009 / 16:09
Saung Web bilang,
Makasih infonya sobat.. kebetulan lagi cari arti dari css nih..
on 18 Oct 2009 / 20:21
yaswin bilang,
Makasih ya penjelasannya…lagi mulai icip-icip untuk mengembangkan e-commerce nih.Kalo untuk e-commerce saya mau membentuk tim, apa saja ya yang dibutuhkan? Terima kasih Fikri.
on 30 Nov 2009 / 09:56
dean_okay bilang,
waduh???
css membingungkan!
kok beda ya blogger ma WordPress??
on 02 Jan 2010 / 19:19
emilahud bilang,
the interesting blob..
thank for shared ilmunya..
mo nanyakni…gimana menurut mas?
sy lebih baik dalam membuat web pribadi?
punya domain sendiri dengan menyewa atau
yang garatisan ? sprt blogger or wordpress dll
masalahnya kemarin sy sempat ditawarin Kurang lebih 150 ribu untuk setahun ?dari http://idwebhost.com/
na menurut mas gimana ?
thank u
on 26 Jan 2010 / 13:55
Fikri bilang,
wah, OOT nih, tapi ngga apa2 lah kita jawab untuk sekarang mah
kalau saya lebih prefer menggunakan self hosted wordpress yang di host di server berbayar, soalnya saya jadi punya kontrol yang relatif lebih menyeluruh 
saya juga pakai idwebhost kok
on 28 Jan 2010 / 10:38
syaffak bilang,
thanks banget tutorialnya…
on 27 Jan 2010 / 05:38
andi bilang,
makasih banget mas infonya…
bermanfaat banget buat akhuw…
salam blogger
on 22 Feb 2010 / 07:53
Menelaah Trend Blogazine bilang,
[...] Kemampuan lain yang harus anda miliki untuk melakukan blogazine adalah CSS. [...]
on 15 Mar 2010 / 03:01
Muhammad Umar bilang,
bos, bisa minta tutorial atau yang berhubungan dengan programming web ga ? kalau bisa kirim ke e-mailku ya bos…
on 09 May 2010 / 20:04
Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia bilang,
[...] Apa itu CSS & Konsep Dasar CSS [...]
on 14 May 2010 / 00:44
Monika Tanu bilang,
Nice, Mas Fikri
Kita butuh penjelasan-penjelasan gamblang model tulisan Mas Fikri seperti ini 
Keep up the good job!
on 15 May 2010 / 23:15
Apa itu CSS & Konsep Dasar CSS – Deskripsi gamblang soal CSS « Web Designer Jakarta Indonesia MonikaTanu +62.888 0288 1288 bilang,
[...] gamblang soal CSS, bisa ditemuin di blognya Mas Fikri ini. Saya suka penggunaan gambar dengan sketsa tulisan tangannya, it gives a personal touch to the [...]
on 15 May 2010 / 23:44
grace bilang,
awalnya gak ngerti ttg CSS tapi mo blajar stlah baca ini
on 18 Jun 2010 / 12:46
jimmy bilang,
artikel ini sanggat berguna bagi saya jadi, terima kasih banyak, brooo
salam.
on 18 Jun 2010 / 14:27
pieter bilang,
salam,
boleh tanya ni, ini menyimpang dari CSS.
begitu, kalau kita buat website dan kalau kita ingin kontrol / edit harus pake cpanel.
Tapi kita ingin membuat control panel sendiri..adakah caranya?
Terima kasih
on 19 Jun 2010 / 09:40
Fikri bilang,
Kalau di cari ya mungkin ada saja. Coba d googling
on 19 Jun 2010 / 12:22
The Very First Google Event in Indonesia: Google Chrome Release Party | fikrirasyid.com bilang,
[...] ’sekedar’ berkunjung ke suatu halaman web. Untuk mempercantik tampilannya dibuatlah CSS. Untuk membuatnya lebih interaktif, dibuatlah JavaScript. That’s it. Hari ini, web lebih dari [...]
on 28 Jun 2010 / 10:49
A Fauzi bilang,
aku selama ini bikin themes pakai artisteer, karena praktisnya. tapi lama2 kok pingin juga belajar css. thanks sharingnya.
on 02 Jul 2010 / 00:39
Fikri bilang,
Kalau saya lebih suka buat sendiri. Fully customized, full control
on 02 Jul 2010 / 06:32
newbie bilang,
keren mas tulisannya, jadi pemacu semangat nih… salam kenal
on 02 Jul 2010 / 19:46
Fikri bilang,
Wah. Senang mendendengarnya. Salam kenal juga
on 03 Jul 2010 / 06:32
asto bilang,
Alhamdulillah dapat ilmu lagi… terimakasih mas fikri, salam kenal.
on 08 Jul 2010 / 11:19
Fikri bilang,
Salam kenal juga, senang apa yang saya tulis bermanfaat
on 09 Jul 2010 / 10:31
pipin bilang,
hemm
yang pinter2 bagi bagi ilmu dung tentg web, gue masih 0 . bner2 g ngerti ni aja suruh bkin wab yg ada css, javascript, html jg,,, i dont know
on 20 Jul 2010 / 08:06
ajip bilang,
Knapa kalo udah pake CSS, web aku yg tulisannya berisi link, ko warna nya jd sama smua ya?ada cara nya ga supa ya tiap link bisa beda warna, karna pas dirubah secara manual setelah ada css ko ga bs? mohon petunjuknya master
on 30 Jul 2010 / 16:49
Fikri bilang,
yaiyalah, kecuali di kasih value CSS secara inline/lebih spesifik ke DOM yang bersangkutan.
on 31 Jul 2010 / 07:10
roy bilang,
Aku pemula pengen membuat websait tapi nggak paham dengan CSS mohon kirim ke email ku bro cara kerja CSS. Makasi banyak bro..salam kenal
on 12 Aug 2010 / 18:32
lopez bilang,
manteb ni tutorial nya. mau tanya ni mas / kalo ngedit css ato buat script nya make software apa ya?. dan gmana cara kerjanya . makasih .
on 30 Aug 2010 / 07:49
Andrika bilang,
Keren, inispirasi banget buat gue pengen kuliah IT :’(
hikz hikz
on 01 Sep 2010 / 15:47