8/24/2010

CSS Fundamental I

Hai, ketemu lagi tetapi Tutorial yang berbeda yaitu CSS Fundamental, o ya, sebelum Tutorial saya lanjutkan saya ingin mengucapkan Selamat Menjalankan Puasa Ramadhan 1413 H bagi yang menjalankan.
Disini saya ingin bersama-sama belajar tentang CSS. Apa itu CSS?Makanan ato Robots ato Manusia?Bisa digunakan untuk apa? hehehe..
Pertanyaan itu akan saya coba jawab disini beserta implementasinya, tetapi seperti Tutorial HTML Tutorial CSS ini akan berseri (kayak komik aja ya).

CSS atau (Cascading Style Sheets) digunakan dalam kode HTML, untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML. Sebagai contoh, kode HTML murni tidak memungkinkan untuk menggunakan sebuah definisi font yang diterapkan pada setiap sel dan bahkan tag <basefont> pun tak berpengaruh pada sel-sel tabel. Misalnya diinginkan untuk mengatur ukuran font pada setiap sel sebesar 2. Dengan menggunakan tag <font> semua sel harus diformat dengan menggunakan <font size = "2">. Tentu saja tindakan seperti ini tidak praktis, namun, dengan menggunakan CSS anda hanya perlu mendefinisikan style satu kali saja dan sel akan berlaku untuk setiap sel dalam tabel. Penjelasan diatas hanya beberapa kemampuan dari CSS, dan masih banyak keuntungan dan kelebihan dari CSS yang akan saya bahas bersama-sama di blog ini.
Sebelum mencoba kemampuan CSS lebih jauh, mari kita mencoba kode HTML yang telah dilengkapi dengan CSS.
<html>
<head>
<title>CSS Pertama</title>
<style type = "text/CSS">
<!--
   <h1 ( font size: 14pt;
                font style: italic;
                color: green;)
-->
</style>
</head>
<body>
<h1>CSS Pertama di anka-konde.blogspot.com</h1>
Selamat Mencoba CSS
</body>
</html>
Cobalah untuk menjalankan kode HTML yanng telah dilengkapi dengan CSS diatas, maka anda akan mendapatkan tampilan seperti dibawah ini :



Anda akan melihat tulisan yang diformat dengan pasangan tag <h1> dan </h1> ditampilkan dengan warna biru dan miring.
Sekarang mari kita telaah kode css diatas.
- Pasangan tag <style> dan </style> digunakan untuk mendefinisikan style sheet menggunakan CSS. Oleh karena itu, dalam tag <style> terdapat atribut Type dengan nilai "text/CSS".
- Pasangan tag <style> dan </style> harus diletakkan dalam pasangan tag <head> dan </head>. Umumnya diletakkan setelah pasangan tag <title> dan </title>.
- Sebagaimana kita ketahui, pasangan <!-- dan --> merupakan komentar dalam HTML.
- Yang berada dalam tag <!-- dan --> adalah definisi style. Didalam pasangan tag <style> dan </style>, kita bisa menempatkan suatu tag HTML dengan bentuk :
nama_tag { properti_1: nilai_1; ....; properti_n: nilai_n; }
tanda titik dua (:) diletakkan sesudah nama properti, sedangkan tanda titik koma (;) berada di belakang nilai properti. Tanda titik koma yang terletak didepan ) boleh tidak dituliskan.
Sekian dulu untuk tutorial CSS yang pertama, semoga bisa bertemu di Tutorial-tutorial selanjutnya. Silahkan isi kotak komentar dan saran untuk lebih memperbaiki Tutorial ini.

regards

0 comments:

Post a Comment