Sabtu, 27 Maret 2010

Dasar-dasar CSS #1

CSS, Tutorial CSS
Untuk mempercantik template, kita harus berurusan dengan yang namanya kode CSS. Tapi, banyak pemula masih bingung dengan kode CSS. Nah, untuk itu saya berikan dasar-dasarnya dulu. Dasar-dasar CSS ini akan diterbitkan secara berurutan dan nantinya akan muncul secara berseri. Sebelum belajar CSS, anda perlu mengetahui dulu tentang HTML dan diharapkan membaca dulu dasar-dasar kode HTML bagian 1, bagian 2, bagian 3, dan bagian 4. Untuk permulaan, saya bertanya. Apa sih yang namanya CSS itu?

CSS adalah singkatan dari Cascading Style Sheet. Bisa digunakan untuk menentukan style dari situs web, misalnya layout, warna, latar belakang, dan lain-lain. Cara penulisan kode CSS seperti ini.
selector{properti:nilai;}
Selector adalah "nama" dari kode CSS (bingung nyebutnya apa jadi anggap aja begitu...). Properti adalah sifat-sifat dari selector. Sedangkan nilai adalah nilai dari properti. Misalnya:
body{color:#FFFFFF;}
Artinya: selector body akan mempunyai sifat warna teks yang berwarna putih.

Lalu ada juga yang namanya komentar. Komentar diawali dengan kode /* dan diakhiri dengan kode */. Panjangnya boleh satu atau beberapa baris. Kode CSS yang ditaruh diantara kedua kode tersebut tidak akan diproses oleh browser. Contoh:
/* Ini contoh komentar pada CSS
bisa satu baris atau lebih. */
body{/* ini adalah nama selector */
color:white; /* artinya selector body akan bersifat warna teks putih */
}
CSS bisa dimasukkan pada situs web dengan beberapa cara.

1. Dengan kode <style type="text/css">.

Penulisannya begini.
<style type="text/css">
<!--
/* Masukkan kode CSS disini. */
-->
</style>

2. Dengan kode style="..." (inline style).

Contoh:
<div style="background-color:black;">
Bagian ini akan berlatar belakang warna hitam.
</div>
Anda bisa saja menggunakannya pada elemen selain div. Yang penting, kode CSS-nya ditaruh diantara kode style="...".

3. Dengan metode impor style.

Kodenya seperti berikut.
<link href="URLFILECSS" type="text/css" rel="stylesheet"/>
Kode tersebut ditaruh diantara kode <head> dan kode </head>. Yang penting ganti bagian URLFILECSS dengan URL dari file CSS yang anda simpan di web hosting.

Untuk kali ini segitu dulu. Kapan-kapan dilanjutkan dengan pembahasan tentang selector. Terima kasih dan silakan komentar untuk kemajuan blog ini. Terima kasih.
di

10 komentar:

  1. belajar internet27 Maret 2010 pukul 09.45

    pertamax...

    kalo masih ada yang gak mudeng slihankan mampir ke tempat saya,,,mudah-mudahan bisa memberikan sedikit pencerahan.

    BalasHapus
  2. uchu27 Maret 2010 pukul 13.10

    artikelnya bermanfaat sob, makasih yaaah

    BalasHapus
  3. Amdhas28 Maret 2010 pukul 00.03

    kalau dari dasar seperti ini saya jadi ngerti

    BalasHapus
  4. Beben Koben28 Maret 2010 pukul 11.27

    perasaan bukan dasar deh...
    tp good good nih
    aw aw aw

    BalasHapus
  5. Asrizal Wahdan Wilsa28 Maret 2010 pukul 22.33

    berkunjung kawan,...nice post...
    ditunggu kunjungan baliknya, jangan lupa follow me ya, ntar aku follow balik..thankz

    BalasHapus
  6. M Chandra29 Maret 2010 pukul 21.22

    mantab bro. .
    ane lagi pengen belajar nie. . .

    BalasHapus
  7. Muhammad Rizki Fadillah1 April 2010 pukul 21.04

    @all, terima kasih atas komennya ya...

    BalasHapus
  8. Herlan14 Juli 2010 pukul 20.26

    waduuh... ruweeed..??

    BalasHapus
  9. Kaos Anak Unik19 September 2010 pukul 13.50

    jadi intinya kita bisa meng custom template kita yah..pakai css ini? am I right?

    BalasHapus
  10. poker15 September 2016 pukul 22.56

    poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

    BalasHapus

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.