Mengenal arti dan dasar CSS

Sebelum anda melanjutkan, anda harus memiliki pemahaman dasar tentang XHTML / HTML. Silahkan ke halaman utama blog ini untuk membaca dasar XHTML / HTML.



Apa itu CSS ?

CSS singkatan dari Cascading Style Sheets. CSS digunakan untuk menampilkan HTML dengan baik.



Perintah CSS

Kode CSS harus disimpan dalam strukture CSS, dan bisa juga disimpan disebuah file.


Kalau di Blogspot seperti ini :

<b:skin><![CDATA[
kode css...
]]></b:skin>

Tapi yang benar seperti ini :

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

CSS memiliki dua bagian utama : pemilih dan deklarasi.

Mengenal arti dan dasar CSS

Pemilih biasannya elemen HTML. Deklarasi terdiri dari properti dan nilai.

Deklarasi selalu diakhiri dengan tanda titik koma, dan kelompok deklarasi dikelilingi kurung seperti ini {...}.

p {color:white;text-align:left;}

Agar lebih mudah dibaca, anda dapat meletakkan satu deklarasi pada setiap baris, seperti ini :

p {
color:white;
text-align:left;
}


Komentar dikode CSS

Biasanya komentar digunakan untuk menjelaskan suatu kode, dan memudahkan ketika anda ingin mengedit kode. Browser akan mengabaikannya.


Sebuah komentar diawali dengan /* dan diakhiri */

/*komentar...*/
p{
color:white;
/*huruf paragraf akan berwarna putih*/
text-align:left;
}


CSS id dan class

Sebelumnya ini contoh elemen HTML.

Jika elemen HTML seperti ini :

<h1>Header 1</h1>

Kode CSSnya seperti ini :

h1 {
color:black;
font-size:18px;
}

Id menggunakan attribute id dalam elemen HTML, dan dikode CSS biasanya pemilih diawali "#".


Misalnya Nano meletakkan attribute id="satu" pada elemen kode HTML dan kode CSSnya seperti ini :

#satu {
text-align:center;
font-size:14px;
}

class menggunakan class dalam attribute elemen HTML, dikode CSSnya pemilih diawali dengan tanda titik

Contoh Nano meletakkan attribute class="dua" pada elemen kode HTML, kode CSSnya seperti ini :

.dua {
text-align:left;
font-size:18px;
}

Mudah-mudahan ngerti... Nano sengaja menggabungkan menjadi satu tentang pengenalan CSS, supaya lebih dinamis.

Jangan pusing dulu, karena baru saja mulai tentang CSS.


Alhamdulillah

4 comments:


  1. makasih sob..penerangannya sangat berguna..('',)

  2. wew....
    templatenya sangar juga :-bd

    sumpah... enteng banget templatenya :sip

    Blogspot Tutorial

  3. salam kenal gan, saya lagi pengen belajar CSS dari tingkat dasar.. barang kali bisa di postingkan tentang jenis2 properti dan sejenisnya yang digunakan pada css berikut dengan arti dan maksutnya. mungkin bisa di buat semacam tabel gan... sori klo request,..

  4. Tidak apa-apa bro, seluruh saran akan saya tampung. CSS yg saya bagi diblog ini hampir semua tentang Properti yang dipisahkan satu-satu untuk penjelasan yang lebih. Maaf Bro jika tutorialnya kurang jelas atau kurang detail. Untuk saat ini, saya lagi kurang bisa berbagi waktu antara kerjaan dan Blogging, jadi belum bisa untuk memperbaiki dan menambahkan tutorial yang ada.

    Salam Blogger

Posting Komentar


Creative Commons License
Mengenal arti dan dasar CSS by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/mengenal-arti-dan-dasar-css.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.