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.


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

Buzz It

Artikel Menarik Lainnya



11 komentar:

belajar internet mengatakan...

pertamax...

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

uchu mengatakan...

artikelnya bermanfaat sob, makasih yaaah

berita untuk negri mengatakan...

kalau dari dasar seperti ini saya jadi ngerti

Beben mengatakan...

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

Asrizal Wahdan Wilsa mengatakan...

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

M Chandra mengatakan...

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

Herlan mengatakan...

waduuh... ruweeed..??

Kaos Anak Unik mengatakan...

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

poker mengatakan...

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

Blogger mengatakan...

BlueHost is one of the best hosting provider with plans for any hosting requirements.

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)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.