Monday, March 12, 2012
Kode-kode CSS biasa digunakan untuk memudahkan para web designer untuk merancang sebuah web. Dengan kode CSS, web designer dan sobat Blogger tentunya, bisa menghemat ruang dan tidak perlu menuliskan tag atau atribut HTML secara berulang, cukup menuliskannya satu kali di dalam tag STYLE.
CSS sendiri adalah sebuah teknologi dalam dunia internet yang dikenalkan oleh World Wide Web Consortium (W3C) pada tahun 1996.
Jenis-jenis penulisan kode CSS terbagi menjadi dua macam, di antaranya.- Inline Style Sheet
Kode-kode CSS dalam metode ini dituliskan secara langsung pada tag HTML dengan menambahkan atribut style="...". Atribut style tersebut hanya berpengaruh pada tag HTML yang disisipi atribut itu saja, dan tidak mempengaruhi pada tag HTML lainnya. Contoh penulisan kode CSS dengan menggunakan metode ini adalah sebagai berikut:
<html>
<head>
<title>Ini Adalah Contoh Penggunaan Metode Inline</title>
</head>
<body bgcolor"00FF00">
<p>Tulisan ini tanpa menggunakan kode CSS</p>
<p style="font-size:12px">Tulisan ini berukuran 12 pixel</p>
<p style="font-size:12px; color:red">Tulisan ini berwarna merah dan berukuran 12 pixel</p>
</body>
</html>
- Embedded Style Sheet
Metode ini berbeda dengan metode sebelumnya, di mana kode-kode CSS biasanya dituliskan terlebih dahulu di dalam tag <style>...</style> di bawah tag </head> dan di atas tag <body>. Kode-kode CSS ini nantinya akan digunakan oleh tag-tag HTML lainnya yang bersangkutan. Contoh penggunaan metode ini adalah:
<html>
<head>
<style>Ini Adalah Contoh Penggunaan Metode Embedded</title>
</head>
<style>
body {background:#00FF00; color:#00FF00}
h1 {color:#00000; font-size:12px}
p {font-size:14px; color:#000000}
</style>
<body>
<h1>Header ini berwarna hitam dan berukuran 12 pixel</h1>
<p>Teks ini berukuran 14 pixel dan berwarna hitam</p>
</body>
</html>
- Tanpa menggunakan kode CSS
Silahkan sobat Blogger mencoba menuliskan kode di bawah ini dengan menggunakan Notepad.
<html>
<head>
<title>Tidak Menggunakan CSS</title>
<body bgcolor="#00FF00">
<font face="book antiqua" size="12px">
<p>Tulisan ini tidak menggunakan kode <b><font color"red">CSS</font></b></p>
<p>Tulisan ini juga sama, tidak menggunakan kode <b><font color="red">CSS</font></b></p>
</font>
</body>
</html>
Terlihat begitu banyaknya atribut yang dituliskan di dalam tag HTML, hal ini tidak akan terjadi jika sobat Blogger menggunakan kode CSS di dalamnya.
- Menggunakan kode CSS
Nah, sekarang kita akan mencoba menggunakan kode CSS di dalam tag <style>
<html>
<head>
<title>Menggunakan Kode CSS</title>
</head>
<style type="text/css">
body{background-color: #00FF00; font-family:book antiqua; font-size:12px}
b{color:red}
</style>
<body>
<p>Nah,,,,,kalo text ini menggunakan kode<b>CSS</b></p>
<p>Ini juga sama menggunakan kode<b>CSS</b></p>
</body>
</html>
Setelah selesai menulis kedua cara tersebut (dengan dan tanpa menggunakan kode CSS), silahkan simpan dengan nama CSS1 (tanpa CSS) dan CSS2 (dengan CSS), bandingkan hasilnya, sama bukan..
Selamat mencoba.
