Dasar-dasar CSS #1

Sabtu, 27 Maret 2010

Dasar-dasar CSS #1

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">

</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.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

10 komentar:

belajar internet mengatakan...: pertamax...

kalo masih ada yang gak mudeng slihankan mampir ke tempat saya,,,mudah-mudahan bisa memberikan sedikit pencerahan.; 27 Maret 2010 pukul 09.45
uchu mengatakan...: artikelnya bermanfaat sob, makasih yaaah; 27 Maret 2010 pukul 13.10
Amdhas mengatakan...: kalau dari dasar seperti ini saya jadi ngerti; 28 Maret 2010 pukul 00.03
Beben Koben mengatakan...: perasaan bukan dasar deh...
tp good good nih
aw aw aw; 28 Maret 2010 pukul 11.27
Asrizal Wahdan Wilsa mengatakan...: berkunjung kawan,...nice post...
ditunggu kunjungan baliknya, jangan lupa follow me ya, ntar aku follow balik..thankz; 28 Maret 2010 pukul 22.33
M Chandra mengatakan...: mantab bro. .
ane lagi pengen belajar nie. . .; 29 Maret 2010 pukul 21.22
Herlan mengatakan...: waduuh... ruweeed..??; 14 Juli 2010 pukul 20.26
Kaos Anak Unik mengatakan...: jadi intinya kita bisa meng custom template kita yah..pakai css ini? am I right?; 19 September 2010 pukul 13.50
poker mengatakan...: poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya; 15 September 2016 pukul 22.56

Posting Komentar

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.

Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]

:-))

:-)

:-D

(lol)

:-p

(woot)

;-)

:-o

X-(

:-(

:'-(

:-&

(K)

(angry)

(annoyed)

(wave) | (bye)

B-)

(cozy)

(sick)

(goodluck)

(griltongue)

(mmm)

(hungry)

(music)

(tears)

(tongue)

(unsure)

(highfive)

(dance)

(blush)

(bigeyes)

(funkydance)

(idiot)

(lonely)

(scenic)

(hassle)

(panic)

(okok)

(yahoo)

(cry)

(doh)

(brokenheart)

(drinking)

(girlkiss)

(rofl)

(money)

(rock)

(nottalking)

(party)

(sleeping)

(thinking)

(bringit)

(worship)

(applause)

8-)

(gym)

(heart)

(devil)

(lmao)

(banana_cool)

(banana_rock)

(evilgrin)

(headspin)

(heart_beat)

(ninja)

(haha)

(evilsmirk)

(eyeroll)

(muhaha)

(taser) | (rammi)

(banana_ninja)

(beer)

(coffee)

(fish_hit)

(muscle)

(smileydance)

(fireworks)

(goal)

(bzzz)

(dance_bzz)

(Русский)

(code)

(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)