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 )

Foto Google+

You are commenting using your Google+ 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 )

w

Connecting to %s

  • Komentar Terbaru

    Feni Febrianti di siapa yang sering kesetrum sep…
    mbot di My Wonder Woman
    bayutrie di My Wonder Woman
    mbot di My Wonder Woman
    p3n1 di My Wonder Woman
    mbot di My Wonder Woman
    enkoos di My Wonder Woman
    Rafi: manggung lagi,… di demi anak naik panggung…
    mbot di My Wonder Woman
    Johana Elizabeth di My Wonder Woman
  • Terfavorit

  • Terbanyak diklik

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

    Bergabunglah dengan 6.575 pengikut lainnya

  • Twitnya @mbot

  • Agung ‘si mbot’ Nugroho

  • Arsip

  • Penunggu blog ini

    mbot

    mbot

    Seorang pegawai biasa-biasa aja

    Tautan-tautan Pribadi

    Layanan Terverifikasi

    Tampilkan Profil Lengkap →

  • RSS Nonton Deh!

    • Hal yang Perlu Disiapin Sebelum Nonton "A Quiet Place" 15 April 2018
      Buat yang belum tau, "A Quiet Place" menceritakan kehidupan sebuah keluarga dengan 3 anak yang hidupnya sama sekali nggak boleh berisik, karena kalo bersuara dikit aja bisa diserang oleh 'sesuatu' (no spoiler ahead).Tentunya ini sedikit menimbulkan pertanyaan bagi gue, lantas gimana kalo mereka eek. Mungkin suara ngedennya bisa diredam, s […]
    • Benarkah Pacific Rim Uprising Jelek? 25 Maret 2018
      Soal keputusan untuk nonton atau nggak nonton sebuah film kadang cukup pelik. Di satu sisi, inginnya nonton semua film yang rilis. Di sisi lain, tiket bioskop deket rumah sekarang udah mencapai 60 ribu (harga weekend). Belum termasuk pop corn yang ukuran mediumnya 50 ribu dan air putih di botol 330 ml seharga 10 ribu*. Artinya: filmnya harus beneran dipilih […]
    • Review: Designated Survivor (Serial TV 2016) 15 Maret 2018
      Semua berawal gara-gara Netflix.Di suatu hari yang selo, nyalain Netflix tanpa tau mau nonton apa, tiba-tiba trailer film ini muncul.Ida langsung tertarik. "Nonton ini aja, suami. Istri seneng nonton film yang gini-gini," katanya, tanpa keterangan yang lebih operasional mengenai batasan film yang masuk dalam kategori 'gini-gini'.Ternyata […]
    • Review: Peter Rabbit (2018) Bikin Penonton Doain Tokoh Utama Celaka 11 Maret 2018
      Biasanya film kan dikemas sedemikian rupa biar penonton bersimpati pada tokoh utamanya, ya. Biar kalo tokoh utamanya dalam posisi terancam, penonton deg-degan, berdoa biar selamat sampai akhir film. Khusus untuk film ini, gue sih terus terang doain Peter Rabbit-nya cepetan mati. Digambarkan dalam film ini Peter Rabbit adalah kelinci yang sotoy, sangat iseng […]
    • 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 […]
  • RSS Bisnis bareng Ida Yuk!

    • Diamond Conference Tokyo 2018: Part 1-- Keberangkatan! 8 Mei 2018
      [Senin, 17 April 2018] Jalan-jalan Conference kali ini rasa excitednya agak sedikit beda karenaaaaa ini adalah DIAMOND CONFERENCE PERTAMA AKU... 😍😍😍😍😍😍 Selama ini aku pergi kan untuk Gold Conference, yaitu reward buat title Gold Director and up. Sedangkan seperti namanya, Diamond Conference ini adalah reward khusus buat yg titlenya Diamond and up! Selama ini […]
    • Seminar "Katakan TIDAK Pada Investasi Ilegal"-- MLM vs Money Game. 8 Mei 2018
      Diamond and up Oriflame bersama Top Management Oriflame foto bareng. Tanggal 2 Mei 2017 tahun lalu, sebagai salah satu Diamond Director-nya Oriflame, aku dapat sebuah undangan eksklusif untuk hadir ke acara Seminar Nasional yg diselenggarakan oleh Satuan Tugas Waspada Investasi dan APLI (Asosiasi Penjualan Langsung Indonesia). Judul seminar ini adalah-- KATA […]
    • Sewa Modem Wifi Buat Ke jepang? Di HIS Travel Aja! 26 April 2018
      Ceritanyaaa.. aku dan agung baru aja pulang dari Diamond Conferencenya Oriflame di Tokyo.. Ada banyaaaaak banget yg pengen aku ceritain. Satu-satu deh ya nanti aku posting. Tapi aku mau mulai dari soal INTERNETAN selama di sana.. ahahahaha.. PENTING iniii! Untuk keperluan internetan di tokyo kemarin aku dan agung sempet galau. Mau pakai roaming kartu atau se […]
    • Penyebab Kapas Ini Kotor Adalah... 17 Maret 2018
      Kapas ini bekas aku bersihin muka tadi pagi bangun tidur.. Lhoo kok kotor?Emangnya gak bersihin muka pas tidur?Bersihin dong. Tuntas malahan dengan 2+1 langkah.Lalu pakai serum dan krim malam. Kok masih kotor? Naaah ini diaaaa.. Tahukah teman2 kalau kulit wajah kita itu saat malam hari salah satu tugasnya bekerja melakukan sekresi atau pembersihan?Jadi krim […]
    • Join Oriflame Hanya Sebagai Pemakai? Boleh! 16 Maret 2018
      Aku baru mendaftarkan seseorang yg bilang mau join oriflame karena mau jadi pemakai..Dengan senang hatiiii tentunyaaa aku daftarkan..😍😍😍 Mbak ini bilang kalau udah menghubungi beberapa orang ingin daftar oriflame tapi gak direspon karena dia hanya ingin jadi pemakai aja.. Lhoooooo.. Teman2 oriflamers..Member oriflame itu kan ada 3 tipe jenisnya--Ada yg join […]
    • Semua karena AKU MAU 16 Maret 2018
      Lihat deh foto ini..Foto rafi lagi asyik mainan keranjang orderan di Oriflame Bulungan dulu sebelum pindah ke Oriflame Sudirman sekarang. Tanggal 1 Juli 2010.Jam 00.20 tengah malam. Iya, itu aku posting langsung setelah aku foto.Dan jamnya gak salah.Jam setengah satu pagi. Hah?Masih di oriflame? IyaNgapain? Beresin tupo. Jadi ya teman2, jaman sistem belum se […]
    • Kerja Keras yang Penuh Kepastian... Aku Suka! 15 Maret 2018
      Dari club SBN--Simple Biznet, ada 3 orang yg lolos challenge umroh/uang tunai 40 juta.Sedangkan dari konsultan oriflame se-indonesia raya konon ada total sekitar 60-an orang yg dapat hadiah challenge ini. Inilah yg aku suka dari oriflame.Level, title, cash award, maupun hadiah challengenya gak pernah dibatasin jumlahnya! Mau berapapun jumlah orang yg lolos k […]
    • Tendercare Oriflame: Si Kecil Ajaib 14 Maret 2018
      Buat teman-teman yg pemakai oriflame, atau at least pernah liat katalognya, mungkin pernah dengar atau justru pemakai setia si Tender Care ini.Bentuknya keciiil, mungiiil, lha cuma 15 ml doang.. Eh tapi kecil-kecil gini khasiatnya luar biasa.Tender Care ini produk klasiknya oriflame, termasuk salah satu produk awal saat oriflame pertama kali mulai dagang di […]
    • Sharing di Dynamics Sunday Party 4 Maret 2018
      Agenda hari minggu ini berbagi ilmu dan sharing di acara bulanannya teh inett Inette Indri-- DSP, Dymamics Sunday Party! Yeaaaaay! Teh inet udah lama bilang kalau pengen undang aku kasih sharing di grupnya. Aku dengan senang hari meng-iya-kan. Karena buatku berbagi ilmu gak pernah rugi. Jadilah kebetulan wiken ini aku ke Bandung untuk kasih kelas buat team b […]
    • Kelas Bandung, Sabtu 3 Maret 2018 3 Maret 2018
      Ah senaaaang ketemuan lagi sama team bandungku tersayang..😍😍😍😍😍 Hari ini aku bawain materi tentang mengelola semangat.Ini materi sederhana tapi sangat amat POWERFULL.Karena betul2 bikin ngaca sama diri sendiri.Yang banyak dibahas adalah soal MINDSET. Kelas kali ini Agung Nugroho juga ikut berbagi ilmu..Bapak Diamond kasih kelas juga lhooo..😍😍😍😍😍 Seneng […]
  • Iklan
%d blogger menyukai ini: