Thursday, February 05, 2009

blogger info: pengenalan css

Cascading Style Sheets (CSS) mempunyai peranan penting dalam pembuatan sebuah website/blog terutama sekali dalam mempercantik tampilan sebuah website/blog. CSS juga merupakan tools paling berharga bagi seorang webmaster dan juga YOYO sendiri *sebagai pemula :)*, karena dengan CSS, seorang YOYO webmaster hanya perlu merubah isi dari file CSS saja untuk merubah suatu tampilan baik dari font, color, table, layout dari website yang dikelolanya.

Sedikit info mengenai CSS, setiap penggunaan CSS mempunyai aturan tersendiri seperti pada contoh dibawah ini:
H3 {
font-family: Arial;
font-style: italic;
color: green;
}
Setiap penulisan harus diawali dengan SELECTOR, yang berupa H3 pada contoh diatas. Setiap selector biasanya merupakan salah satu atau lebih dari elemen (tag) pada HTML, dan sebuah DECLARATION akan menentukan bagaimana tampilan dari elemen tadi akan tampil. Sebuah declaration merupakan isi dari CSS yang berupa PROPERTY yang diikuti oleh VALUE. Pada contoh diatas sebuah declaration berupa “font-family : Arial;” dimana sebagai property adalah “font-family” dan diikuti oleh value yaitu “Arial”. Sehingga pada contoh diatas akan menghasilkan setiap penggunaan tag <h3> HTML akan menampilkan huruf Arial dengan model Italic dan akan berwarna green (hijau).

Selector sendiri dibagi menjadi 3 bagian yaitu Elements, Classes, dan IDs. Penggunaan selector sendiri tidak hanya mencakup elemen (tag) pada HTML saja, tetapi kita bisa menyesuaikan dengan keinginan dan kreativitas kita sendiri sebagai perancangnya, yang dimanakan Classes, seperti contoh dibawah ini.
.greenitalic {
font-family: Arial;
font-style: italic;
color: green;
}
Untuk dapat menggunakannya pada tag H3 pada contoh pertama diatas, maka kita harus menggunakan perintah CLASS untuk bisa melihat hasilnya. Lihat contoh dibawah ini.
<H3 CLASS="greenitalic">this is greenitalic</h3>
Hasilnya akan tetap sama pada setiap penggunaan tag H3, yang akan menampilkan huruf Arial dengan model Italic dan akan berwarna green (hijau), seperti yang tampak dibawah ini.
this is greenitalic
Gimana, mudah bukan :) Lain kali akan YOYO bahas kelanjutannya, sekarang waktunya pulaaa...aaang... home sweet home :D

8 comments:

  1. waaaa... seep ternyata ada suhu yoyo.. makasih boz bahasanya mudah di cerna... good good post

    ReplyDelete
  2. unda handak meolah tutorial css mauk, pusing menulis bahasanya
    teruskan tutorialnya wal
    mantap :)

    ReplyDelete
  3. naaah...kyk x berlanjut nih tutorial nya, thx mas..sip khan tuk nambah elmu..

    Siipp!!

    ReplyDelete
  4. wiiii, numpang belajar nih suhu

    ReplyDelete
  5. thank you for visiting me back to the blog ....
    I hope we can establish friendship strap ....

    ReplyDelete
  6. @subagya: jadi gak enak ama para senior nih, masih newbie kok dibilang suhu :(
    @rozy: wekeke, emang ngalih mas, unda aja tepuntal tepulilit waktu ngetiknya :D
    @Bunda Lina: insyaallah berlanjut bu' :)
    @herro: jangan manggil² suhu lah bro, jadi gak enak nih dengarnya :D
    @www.katobengke.com: kembali kasih :)

    ReplyDelete
  7. makasih bos tutorialnya tentang css, tapi sayang kok cuman segelimtir doang travel blog.

    ReplyDelete

Jangan lupa... habis dibaca tinggalkan komentarnya dibawah ini yah.

Makasih :)