CSS tutorial: Apa itu css?


Pertanyaan yang paling sering masuk ke personal messagenya mbot.multiply.com adalah:

“Gimana sih caranya ngerubah tampilan MP jadi kaya gini?”

Hwaduuh… gimana ya? Bukannya pelit nggak mau bagi ilmu, cuma bingung aja mau mulai dari mana. Sama aja kayak elo abis masak sebuah kue rumit yang menggunakan 30 bahan, masing-masing harus disiapin terpisah sebelum dimasak, masaknya juga melalui sekian puluh tahap menggunakan sebuah oven khusus yang makan waktu berjam-jam, setelah jadi harus dihias sedemikian rupa dengan aneka ramuan coating gula dan coklat, trus ada orang nyicip sesendok dan nanya sambil ngunyah, “eh, ini bikinnya gimana sih?”

Selain itu, gue juga belajar ngutak-atik MP ini dengan cara nyoba-nyoba sendiri. Akibatnya, gue sering nggak tau istilah-istilah teknis yang bener dari komponen-komponen CSS dan HTML tuh apa. Gimana gue mau njelasin cara bikinnya kalo namanya aja nggak tau? Makanya selama ini kalo si penanya domisilinya masih di seputar wilayah Jabotabek, gue lebih milih nyuruh dia dateng aja ke rumah – daripada harus keriting njelasin secara tertulis.

Tapi begitu ngeliat MP sekarang ngebuka lagi akses untuk ngerubah CSS, kayaknya topik2 tentang CSS customization akan kembali naik daun di message boar dalam minggu-minggu mendatang. Maka mumpung sempet, gue coba mulai deh tutorial ala gue tentang CSS.

Seperti biasa, perlu gue sebutkan di depan bahwa gue sebenernya nggak menguasai bidang ini. Sekedar tau sedikit hasil nyoba-nyoba doang. Jadi, kalo ada kesalahan dalam tutorial ini, mohon dikoreksi ya. Please DO correct me if I’m wrong. Kemungkinan besar gue akan melakukan banyak kesalahan dalam hal penyebutan istilah-istilah elemen dalam CSS.

Selain itu, buat yang tertarik belajar CSS, gue sarankan membiasakan diri dulu dengan perintah-perintah HTML yang basic seperti <u>, <i>, <b>, <a>, <table> beserta <tr> dan <td>-nya, <h1> dkk, <ol> dan <ul>, <img>, hexcodes untuk warna, serta perintah-perintah basic lainnya. Gue pernah mengulas sedikit tentang perintah hex-code untuk warna di journal gue yang ini, tapi biar lebih komplit lo bisa buka-buka website berisi panduan HTML yang udah ada, antara lain:

  • Webnya Jonru – berisi panduan HTML mulai dari dasar – dalam bahasa Indonesia.
  • Panduan ringkas HTML – berisi daftar ringkas elemen HTML, lebih cocok buat yang udah sedikit paham tentang prinsip-prinsip HTML dan cuma butuh daftar referensi buat pengingat. – dalam bahasa Indonesia.
  • Bram Web Tutorial – berisi penjelasan langkah demi langkah membuat web. Cocok buat yang masih baru belajar tentang HTML.- dalam bahasa Indonesia.
  • W3schools – panduan HTML dalam bahasa Inggris.
  • Webmonkey – salah satu situs ‘pionir’ dalam urusan tutorial web. Sayangnya sekarang udah inactive, tapi artikel-artikel lamanya masih tetep bisa dibaca. Dikemas dalam penyampaian yang ringan dengan selipan-selipan humor. – dalam bahasa Inggris.
  • Lissa explains it all – dikemas sebagai panduan web design buat anak-anak… tapi tetep aja masih banyak hal yang gue belum ngerti… hehehe. Pernah gue link di sini. – dalam bahasa Inggris.

Kalo udah selesai baca-baca referensi di website-website tadi, kita bisa mulai dengan CSS.

Super-duper-mega-ultra-basic CSS tutorial
-pelajaran no. 1-

Apa itu CSS?

CSS adalah singkatan dari Cascading Style-Sheet, sebuah pengembangan atas kode HTML yang udah ada sebelumnya. Dengan CSS, kita bisa menentukan sebuah struktur dasar halaman web secara lebih mudah dan cepat, serta irit size.

Analogi: bayangin sebuah pasar yang sangat tertata rapi. Pengelola pasarnya menentukan identitas dari setiap pedagang. Para pedagang sayur dikasih seragam warna ijo, dan ditempatkan di kios yang bergambar sayuran. Pedagang daging dikasih seragam merah dan ditempatkan di kios bergambar hewan. Dan seterusnya.

Pada suatu hari, datanglah seorang pedagang baru ke pasar tersebut. Pengelola pasarnya nanya, “mas mau jualan apaan?”
“Saya biasa jualan daging, pak,” katanya.
“Wokeh, kalo gitu Anda pake seragam merah ini, dan silakan menempati kios bergambar hewan di sebelah sana, ya!”

Seperti itulah kurang lebih peran CSS: dengan struktur yang udah kita tentukan sebelumnya, seluruh elemen HTML di website kita akan ditampilkan mengikuti struktur tersebut.

Misalnya, kalo kita udah tentuin semua <ol> (ordered list, atau daftar yang bernomor) akan berhuruf italic, maka begitu suatu tulisan di halamn kita “kurung” dengan tag <ol> dan </ol>, maka secara otomatis tulisan di dalamnya akan menjadi italic. Jauh lebih praktis ketimbang kita harus menambahkan tag <i> secara manual, satu per satu.

CSS juga membantu kita untuk menyeragamkan seluruh halaman website dengan tampilan yang konsisten. Misalnya, kita mau seluruh font yang ada di website kita adalah font “Tahoma”, maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti2 font secara manual di setiap halaman.

Di mana letaknya sih si CSS ini?

CSS terletak di bagian head dari sebuah website. Buat yang udah familiar dengan struktur dasar HTML, tentunya tau bahwa setiap halaman html akan terdiri atas 2 bagian, <head> dan <body>. CSS terletak di bagian <head>, sesudah <title> seperti ini:

Dalam contoh ini, kita menggunakan css untuk memformat seluruh font di dalam website kita menjadi arial. Perhatikan bahwa perintah css selalu mengikuti format sebagai berikut:

tabel 1.1

selector spasi kurung kurawal buka spasi declaration spasi kurung kurawal tutup
body { font-family: arial }

Sedangkan format standar sebuah declaration adalah:

tabel 1.2

property titik dua value
font-family : arial

Ingat, dalam property, TIDAK BOLEH ada spasi! Itulah sebabnya ada tanda hubung (-) antara tulisan ‘font’ dan ‘family’.

Loh, tapi gue nggak mau seluruh font di website gue arial! Gue mau di bagian tertentu verdana, di bagian lainnya tahoma… gimana tuh?

Tenang, itu akan dijelasin juga kok belakangan. Yang penting, pelajaran pertama kita hari ini adalah:

Kita bisa menggunakan CSS untuk memformat setiap elemen dalam website kita secara otomatis.

Latihan:

  1. Buat sebuah file html menggunakan program notepad. Caranya, bikin file baru di notepad, klik “Save as…”, ganti “save as type…” menjadi “all files” lalu di bagian “file name” beri nama dengan extension *.htm atau *.html, misalnya “testing.html”
  2. Isi file tersebut dengan struktur <html>, <head>,<title>, dan <body> seperti dicontohkan di bagian sebelumnya.
  3. Isi dengan beberapa tulisan di antara <body> dan </body>. Terserah mau nulis apa, puisi juga boleh.
  4. Format beberapa kata dalam tulisan tersebut menggunakan perintah <h1>, <body>, dan <u>.
  5. Save dan tutup file notepad tersebut.
  6. Perhatikan, file “testing.html” yang tadinya dibuat dengan notepad sekarang telah jadi file html, ikon / lambangnya berubah – bukan lambang notepad lagi, tapi udah jadi lambang browser internet sesuai dengan browser internet yang terinstall di komputer elo (kalo adanya IE ya jadi lambang IE, kalo adanya Firefox ya jadi lambang Firefox). Dobel klik file tersebut, maka dia akan terbuka dengan program internet browser.
  7. Perhatikan baik-baik font apa yang terpampang pada file tersebut. Tutup lagi.
  8. Sekarang buka lagi file tersebut, kali ini dengan menggunakan notepad. Kalo elo pake IE, caranya cukup dengan membuka file itu di browser IE, lalu klik kanan dan pilih “view source” > dia akan terbuka secara otomatis di notepad. Tapi kalo browser elo Firefox, lo harus buka dulu program notepadnya, terus seret dan jatuhin (drag and drop) ikon file “testing.html” ke dalam notepad lo.
  9. Masukkan kode <style> di dalam <head>, setelah <title>.
  10. Masukkan property dan value untuk: <h1> – font Arial, <body> – font Tahoma, dan <u> – font Verdana di antara kode style tersebut. Ikuti panduan style seperti telah dicontohkan di tabel 1.1 dan 1.2.
  11. Save dan tutup file notepad tersebut.
  12. Buka lagi menggunakan internet browser. Lihat perubahan apa yang terjadi dengan file elo.

Selamat mencoba!

Posting CSS berikutnya:
Ukuran-ukuran dalam CSS


Iklan baris:

Iklan
Tinggalkan komentar

69 Komentar

  1. Wah, thank’s infonya Mas. Jadi tau lebih ttg CSS dan HTML.Maklum msh belajar kode2 itu.Mampir juga ya di Cerita Zebhi

    Suka

    Balas
  2. Ga’ ngerti…!Kalo aku sih simpel aja,ngubah tampilan lay-out MP tinggal ngambil aja di customizedmysite-nya MP itu.Copas..gratis..tis..Pengen si, ngotak-atik ndiri (palagi nampang foto hasil jepretan jadi background..cling…cling..pasti keren) tapi aku belum bisa…hiks…

    Suka

    Balas
  3. Mas Mbot.. keknya puyeng ya bikin n ngutak ngatik tampilan MP.. apa mesti perlu waktu khusus yak?? ngliat aja dah lier’ apalg mulainya..btw, aq pasti bisa kan? mas aja bs.. he he he..salam kenal

    Suka

    Balas
  4. Thank’s Mas. Infomrasinya sangat bermanfaat. Ditunggu info lainnya.

    Suka

    Balas
  5. waduuuuhh… malah bingung buanget….. sekalian nanya dech ya…mas apa harus belajar editor perintah CSS dulu???apa nggak ada yang semudah Friendster yang tinggal klik N drug (alah emang narkoba)…..gimana mas ?? (apanya ya)ya CSSnya la….boleh liat contoh program untug ganti background N headernya mas…. ya kalo bisa balas ke MP saya ya mas…sebelum dan sesudahnya salam kenal dan terimaksihhh…..

    Suka

    Balas
  6. Thx ya…gw ud coba,,,sukses koq sukses…stidaknya skrg gw sdikit lbh mngerti mngenai CSS…Yasu,gw tunggu tutorial slnjtnya ya….

    Suka

    Balas
  7. Makasih infonya Om…

    Suka

    Balas
  8. mbot gmn cara buat buku tamu kayak lo ajarin ya bro jgn 1/2 geh mbot cara masukin kodenya juga ok mbot…..cayo mbot

    Suka

    Balas
  9. bagus nih info, terlambat saya bacanya ,,,,,,,,,,

    Suka

    Balas

Ada komentar?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

  • Komentar Terbaru

    mbot di Yang Terjadi Pada Bahu Ayah In…
    Tjetje [binibule.com… di Yang Terjadi Pada Bahu Ayah In…
    [sharing HRD] negosi… di [sharing HRD] WASPADA! 5 gelag…
    Koper | (new) Mbot… di Realita, Cinta, dan Rock n…
    mbot di Yang Terjadi Pada Bahu Ayah In…
    ganganjanuar di Yang Terjadi Pada Bahu Ayah In…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    Tjetje [binibule.com… di OGC 2017: Udah Pernah ke Roma,…
    mbot di OGC 2017: Udah Pernah ke Roma,…
    enkoos di OGC 2017: Udah Pernah ke Roma,…
  • Terfavorit

  • Terbanyak diklik

  • Masukin email lu di sini agar dapat notifikasi tiap kali ada tulisan baru

    Bergabunglah dengan 4.241 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Sensasi Nonton Pengabdi Setan Bareng Emak-Emak Setan 8 Oktober 2017
      Sejak lama, Joko Anwar terobsesi dengan film horor. Menurutnya, horor adalah genre film yang paling jujur. Tujuannya ya nakut-nakutin penonton, bukannya mau ceramah, motivasi, atau menyisipkan pesan moral. Di kesempatan berbeda, gue juga pernah denger dia bilang, secara komersial film horor lebih berpotensi laku. Alasannya sederhana: karena takut, orang cend […]
    • Parodi Film: Jailangkung (2017) 26 Juni 2017
      SPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTSPOILER ALERTFerdi (Lukman Sardi) diketemukan nggak sadar di sebuah rumah terpencil oleh pilot pesawat carterannya. Dia dirawat di ICU, tapi dokter nggak bisa menemukan apa penyakitnya.Anak Ferdi, Bella (Amanda Rawles), tentu kepikiran. Dia minta bantuan Rama (Jefri Nichol), seorang... yah, dib […]
    • Parodi Film: Suicide Squad (2016) 14 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Amanda Waller, pejabat intelijen, presentasi di depan sekumpulan pejabat militer. AMANDA: “Kita beruntung Superman yang barusan ini, yang sekarang lagi mati suri dan dipastikan akan hidup kembali dalam film berikut karena demikianlah pakem da […]
    • Parodi Film: Bangkit (2016) 12 Agustus 2016
      SPOILER ALERT!Jangan baca kalo masih ingin penasaran dengan cerita film ini.SPOILER ALERT!SPOILER ALERT!SPOILER ALERT!Ada bus kejeblos jurang. Muncul sang pahlawan, anggota Basarnas, bernama Addri. Ya, dengan 2 huruf D. Addri: “Saya akan menyelamatkan Anda semua, satu per satu. Kita mulai dari wanita dan anak-anak!”Beberapa menit kemudian, hampir semua penum […]
    • Kalo Fans Turun Tangan Ngeberesin Trailer Film 15 Mei 2016
      Hari gini, jadi produsen film 'mainstream' itu semakin nggak gampang. Masalahnya, software pembuat film makin gampang didapat, film bisa dibikin secara "rumahan" dan akibatnya: penonton makin kritis. Sepuluh tahun lalu, saat produsen film melempar trailer promosi ke pasar, kemungkinannya cuma dua: orang tertarik atau nggak tertarik. Sekar […]
    • Review: My Stupid Boss (2016) 14 Mei 2016
      Nggak kerasa udah 7 tahun sejak gue pertama kali bikin review tentang buku My Stupid Boss. Dalam kurun waktu tersebut bukunya udah masuk jilid 5, plus sempet ada antologi cerita boss-boss bego kiriman pembaca juga, dan… difilmkan!Kemarin gue kembali beruntung dapet kesempatan nonton premiere film My Stupid Boss the Movie, sebagai (kalo nggak salah) premiere […]
    • Review: 5th Wave (2016) 17 Januari 2016
      Coba deh tonton trailer film ini:Action? Check.Alien? Check.Chloë Grace Moretz? Check.Jelas, gue langsung memutuskan nonton.Ekspektasi gue adalah film sejenis Battle Los Angeles (2011) atau War of the Worlds (2005) atau Independence Day (1996), tentang bumi yang diserang alien jahat dan berisi adegan-adegan perang seru.Begitu filmnya mulai, adegan dibuka den […]
    • Review: Ngenest: Kadang Hidup Perlu Ditertawakan (2015) 5 Januari 2016
      Tentang kenapa di sini kaum Cina ‘diperlakukan khusus’ adalah pertanyaan yang belum berhasil gue temuin jawabannya. Kenapa kita bisa santai bilang, “Si Joko Jawa, Si Tigor Batak, Si Asep orang Sunda,” tapi giliran “Si Ling Ling” mendadak kagok, lantas jadi nginggris: “Chinese”? Atau yang lebih absurd lagi: pencanangan sebutan Cina diganti jadi Tionghoa oleh […]
    • Obrolan Film Merangkap Ujian Kesabaran 9 April 2015
      Setiap orang punya penghayatan beda tentang film. Ada yang suka ngapalin berbagai detil tentang film favoritnya, ada juga yang bisa inget judul aja udah syukur. Sah-sah aja sih sebenernya. Yang bikin senewen adalah NGEDENGERIN orang-orang tipe terakhir saling ngobrol. Kemarin, karena udah kemaleman untuk jalan kaki, gue pulang naik angkot. Di dalemnya ada 2 […]
    • Review: Guru Bangsa: Tjokroaminoto (2015) 6 April 2015
      Baru kali ini gue sampe merasa perlu "belajar" dulu sebelum nonton film. Ada dua pemicunya. Pengalaman nonton film Lincoln: udah mana pengetahuan gue tentang sejarah Amerika minim banget, cuma ngerti Lincoln itu anti perbudakan dan matinya ditembak, eh di filmnya muncul tokoh banyak banget yang mukanya nampak sama semua karena rata-rata berewokan.  […]
  • RSS Bisnis bareng Ida Yuk!

    • Banyak orang gagal jalanin MLM? Bukan..mereka BERHENTI. 1 September 2016
      'Udah pernah join dulu mbak, tapi gagal….’ Pernah denger kalimat ini saat mengajak seseorang join oriflame? Saya sering..  Alasan ‘kegagalan’-nya macam-macam.. Ada yg karena modalnya mandeg gara-gara jualan produk oriflamenya sistem hutang maka menilai bisnisnya gagal , ada yg ditolak 10 orang lalu merasa gak bakat dan gagal, ada yg gak naik-naik level […]
    • Konsultan Oriflame seperti siapakah Anda: Neil Armstrong atau Lance Armstrong? 26 Agustus 2016
      Ada dua orang Armstrong yang menempati ruang khusus di hati rakyat Amerika. Keduanya berjasa, telah terbukti komitmennya, dan menunjukkan keberanian yang menginspirasi banyak orang. Namun, kisah mereka memiliki akhir yang berbeda. Yang pertama adalah Neil Armstrong, astronot Amerika. Sebagai orang pertama yang menginjakkan kaki di bulan, namanya kondang ke s […]
    • Bangga Jualan, Sekarang Juga! 25 Agustus 2016
      "Malu Jualan", barengan sama "Gampang Percaya Hoax" dan "Jam Karet"adalah kebiasaan-kebiasaan yang penting segera diberantas karena bikin Indonesia susah maju. Tapi "Malu Jualan" adalah yang paling parah. Beberapa waktu lalu, seorang teman yang lama nggak kedengeran kabarnya tiba-tiba muncul dengan pertanyaan, "Gu […]
    • Kerja Oriflame itu seperti apa sih? 24 Agustus 2016
      Dulu, waktu pertama kali baca tentang Oriflame, liat cerita sukses para top leader yang berhasil dapat penghasilan bulanan hingga puluhan juta, dapat mobil, jalan-jalan ke luar negeri, aku bertanya-tanya, "Ini kerjanya gimana sih sebenernya? Kok kayaknya seru banget. Nggak harus terikat jam kerja kayak kantoran tapi bisa pada punya uang jutaan!" Se […]
    • Skin Pro Oriflame, Membersihkan Wajah 5x Lebih Bersih 23 Agustus 2016
      Membersihkan wajah itu penting! Aku menyarankan metode 2 langkah untuk pembersihan wajah, yaitu: 1. Susu Pembersih 2. Toner Untuk menuntaskan pembersihan, kita mencuci muka menggunakan sabun muka yang sesuai dengan jenis kulit. Cuci muka pakai tangan saja hasilnya ternyata kurang maksimal, karena kotoran dalam pori-pori tidak bisa terangkat sepenuhnya. Orifl […]
    • Edukasi MLM untuk Abang Gojek 22 Agustus 2016
      Aku baru pulang dari training skin care di Oriflame Daan Mogot. Pulangnya seperti biasa panggil Gojek. Di jalan, abang Gojeknya tanya, kenapa ramai sekali kantor Oriflame Daan Mogot hari itu. Rupanya dia biasa mangkal di depan kantor Oriflame dan keramaian hari itu lebih dari biasanya. Aku bilang, habis ada training besar, yang pesertanya sampai 300 orang. T […]
    • Scrub Bibir ala Ida dengan Tendercare dari Oriflame 21 Agustus 2016
      Banyak downline dan pelanggan yang menanyakan, apakah Oriflame sudah mengeluarkan produk scrub untuk bibir. Sayangnya, sampai hari ini belum. Tapi kita bisa membuat scrub bibir sendiri lho, dengan memanfaatkan produk andalan Oriflame, si kecil mungil ajaib Tendercare. Silakan tonton videonya ya! Bonus: Di menit 4:55 ada kejutan khusus gara-gara shootingnya d […]
    • NovAge, Skin Care favorite aku! 19 Agustus 2016
      Soal urusan merawat wajah, aku udah buktiin sendiri deh pokoknya. Produk Oriflame yg sesuai kalau dipakainya secara KONSISTEN dan SABAR, hasilnya beneran NYATA. Sebagai yg kulit wajahnya cukup rewel--sensitif maksudnya, aku dulu takut sekali coba sembarang skin care. Soalnya salah-salah pakai produk pastiii jerawatan dan bruntusan. Ah sedih deh pokoknya. Mak […]
    • Oriflame bagi-bagi Tab Advan, ini pemenang dari teamkuu.. :-) 17 Agustus 2016
      Bulan April 2016 lalu Oriflame bikin challenge KEREN BANGET!Apalagi kalau gak bagi-bagi hadiah kan? Judul challenge-nya 'NOW OR NEVER'.Persyaratannya bisa dibilang MUDAH SEKALI lho. Para konsultan yang ingin dapat hadiah ini cukup meraih level baru 9% atau 12% atau 15% di bulan April 2016, lalu mempertahankannya di bulan berikutnya. Serta ada syara […]
    • Merawat wajah itu SABAR dan KONSISTEN. 20 Juni 2016
      Yang namanya perawatan kulit wajah itu BUTUH WAKTU ya teman2. Minimal banget hasil mulai terlihat nyata pada minggu ke 4 ya.. sekitar 28 hari, sesuai siklus pergantian kulit kita. Baca lagi, aku tulis-- 'MULAI terlihat nyata'. Bukan berarti langsung tau2 muka berubaaaaah gitu. Gak bisa. Tapi umumnya akan terlihat perbedaan pada minggu ke 4. Apalagi […]
%d blogger menyukai ini: