Membuat sebuah website adalah mudah. Pakai saja aplikasi seperti Microsoft FrontPage atau Macromedia Dreamweaver, tinggal klik sana sini, sebuah website bisa dibuat dalam waktu 30 menit. Tapi seni desain website sesungguhnya bukanlah menggunakan aplikasi instant seperti itu. Barangkali Anda belum mengetahui, mengubah tampilan sebuah website dapat dilakukan hanya dengan memodifikasi CSS saja. Menarik?
Cascading Style Sheet (CSS)
Berdasarkan definisi yang diberikan oleh W3C dalam websitenya, CSS adalah mekanisme untuk mengubah tampilan seperti font dan warna ke dalam sebuah dokumen HTML. Dengan CSS, tampilan sebuah halaman HTML dapat didefinisikan pada halaman tersendiri. Dengan demikian, pengubahan variabel pada halaman CSS akan mengubah tampilan halaman HTML yang berhubungan. Anda dapat mulai mempelajadi CSS di sini.
Zen Garden CSS
Jika Anda telah mengenal lebih jauh tentang CSS, maka salah satu referensi yang mungkin bisa menjadi inspirasi adalah Zen Garden CSS. Zen Garden CSS adalah demonstrasi keunggulan desain website dengan CSS. Di sana Anda dapat melihat berbagai contoh desain yang sama sekali berbeda satu dengan yang lainnya dimana masing-masing desain hanya dibuat dengan melakukan perubahan pada file CSS saja. Dari sana Anda bisa mendapatkan file HTML dan CSS yang disediakan sebagai sarana berlatih desain website dengan CSS.
Keuntungan Desain Website Dengan CSS
Banyak sekali keuntungan yang bisa Anda dapatkan jika Anda telah menguasai desain website dengan CSS meski dalam tingkatan pemula sekalipun. Apalagi jika Anda adalah blogger yang mengandalkan aplikasi seperti WordPress. Anda mungkin bisa mendapatkan WordPress theme dengan gratis dari banyak sumber, tapi pastinya Anda selalu menemui kekurangan dalam theme yang Anda gunakan meski hanya berupa font yang kurang besar, misalnya.
Dengan menguasai teknik desain website dengan CSS, Anda bisa dengan mudah mengubah ukuran font dan lain-lain hanya dengan melakukan modifikasi file stylesheet.css theme Anda, apalagi WordPress menyediakan fasilitas untuk mengubah file ini dalam panel adminstrasi-nya. Apabila Anda telah cukup menguasai CSS, maka dengan mudah Anda bisa mengubah keseluruhan tampilan theme yang Anda gunakan, dan mungkin bahkan membuat theme untuk didistribusikan ke orang lain.
Jika Anda belum mengenal CSS lebih dekat, mulailah berkenalan dari sekarang sehingga nanti Anda akan bisa menggunakannya untuk memodifikasi theme apapun sesuka hati Anda.
27 comments on "Desain Website Dengan CSS"
belajar CSS yang bahasa indonesia bagusnya di mana ya? lha terus WP Worksheetnya mana bos?
Saya belon nemu resource nya, mang di W3C ga ada versi bahasa indonesia ya? hehehe, ga teliti saya.
Lha worksheet itu kan di tulisan saya tulis “nantinya”. itu berarti, belon selesai .. hehehe .. tunggu aja
iya..pake css lebih ringan loadna
Salam Kenal
Numpang cari cari dan jalan jalan
Salam semua ..
@rizoa .. selamat datang kembali
@Anton .. salam kenal juga pak. thx dah mampir
wew…tampilan baru…
hebat…
skali2 ajari aku mas trik CSS yang simpel and stylish kayak blog ini….
Ya nanti kalo ngajarin seorang doang yang lain ga kebagian. Ntar deh sambil jalan, trik CSS saya tulis juga di blog abal-abal ini .. hehehe .. thx
sekalian trik Cross Site Scripting bos… eh itu mah XSS yah bukan CSS….hehehehe *kabur*
Wah kalu “CSS” yang disebut XSS itu mah jatah dirimu bos … wakakak, jangan kabur, ga ada hansep!
Gak nyiptain buat blogspot bos?.. oh ya, prinsipku kaya bos rayearth aja.. dah dikasih gratisan ma blogger, terima apa adanya aja theme bawaannya..
ndak sabar nunggu proyek WP Worksheet-nya.
Saya jadi teringat proyek sejenis, sandbox kalau ndak salah. Seperti itu, ya?
@gratisanboy … nantinya juga iya akan bikin, one spot at a time ..
@mus … thx, dah finishing ini, sedang debugging, sapa tahu masih ada bug yang muncul, ntar kalo dah pede segera diluncurkan versi RC-nya
jadi kayak tarzan masuk kampung, iku istilah opo ae kang preaxz?
haduh … istilah apa yo? aku juga kadang ngeces mlongo kok denger istiliah kek gitu … pokoknya jalan aja dah …
waah, keren choy…
latihan moco sekrip CSS ah..
sapa tau bisa bkin theme sendiri…
nais inpoh gan…
hmmm….
Enak mana Boss, saya belajar sendiri ke Zen atau Anda yang membimbing saya untuk belajar lebih jauh tentang CSS?
Enakan pecel madiun minum kopi. Belajar itu gurunya bisa sapa saja, bahkan bisa saja dari orang yang kemampuannya ada di bawah kita. Hehehe … silakan saja kalo mau diskusi .. karena sebenernya kita semua sedang belajar. Agree?
Wew…
OOT:
untung setiap komentar di sini harus dimoderasi, coba tidak, pasti ada yang bisa pake nama preaxz pada from komentar? iya gak Mas Arie?
biar lain kali gak ada yang isengi blog Strategi SEO kesayanganku: preaxz.com
baca juga:
http://maseko.com/2008/10/26/membuat-database-dengan-blist/#comment-65677
atau,
http://maseko.com/wp_prevent_author_impersonation.zip
@patembe .. hahaha, tadi usah mau saya sobek sobek komen yang pake namaku, trus aku lihat ternyata yang komen dirimu … hehehe … sip lah, pencerahan … aku bikin CMS sendiri di kantor orang ga bisa komen pake nama adminnya, ini kok wordpress ternyata ga kepikiran sampe situ ya … thx
@Arie Putranto
gmana tuh komen disobek-sobekin..
pantesan aku liat kok gak muncul2… wkwkwk…
wew, mantab deh kalo udah buat CMS sendiri. HEBAT…
btw, kapan kita makan mecel madiun + minum kopi + rokok bareng…!
kabuuurrrr…..
Oh ya, Bos Arie.. Tolong kunjungi blog saya yach.. Saya meluncurkan halaman web khusus untuk iklan dan bisnis online, minta kritik dan sarannya juga.. Sekalian juga undangan buat kawan2 semua.. Thx..
wah…pelu belajar dari sekarang ya ?
sinau nyang ndi iki enake ?
thanks ya infonya…salam kenal ya…
Saya juga suka ngutak ngatik theme walow blm pnya ilmunya..
Berani belajar wad nyoba aj..
..
Hehehe, lagi butuh review mas… lagi anget juga disini, jadi…pass
Sampe sekarang rien belum nemu tutorial berbahasa Indonesia yang enak diikuti, jadi kalo gi mood setia sama yang pake english.
artikelx bagus banget so maksih bro
saya kesulitan mencocokan antara html dan css mas.keduanya gk saling nyambung jadinya ya berantakan penyusunan manual website html+css nya dech.
ibarat sepasang kekasih yg gk saling pengertian membina hubungan pernikahan.tlg mas yg bisa mengkombinasikan html+css biar cocok ajarin saya donk!
YOU ARE LOVELY CSS FOR MY HTML.
CAPEEEKKK DECH!…
5 trackbacks
[...] cascading style sheet here refers to the document itself. This concept is nothing new for the web Desain Website Dengan CSS – preaxz.com 01/08/2009 [ WP Worksheet Framework] WP Worksheet Framework Membuat sebuah website [...]
[...] struktur theme apa adanya sebagaimana telah saya perkenalkan pada artikel sebelumnya tentang Desain Website dengan CSS. Setelah persiapan file telah selesai maka yang perlu Anda lakukan adalah mencari hubungan kode [...]
[...] Cascading Stylesheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan menggunakan CSS, pengaturan tampilan halaman web dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website. [...]
[...] struktur theme apa adanya sebagaimana telah saya perkenalkan pada artikel sebelumnya tentang Desain Website dengan CSS. Setelah persiapan file telah selesai maka yang perlu Anda lakukan adalah mencari hubungan kode [...]
[...] Cascading Stylesheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan menggunakan CSS, pengaturan tampilan halaman web dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website. [...]