Dengan menggunakan CSS ( Cascading Style Sheets ), Anda (sebagai webmaster) akan lebih mudah untuk style elemen dalam halaman web anda. Sebagia contoh, misalnya untuk mengatur style elemen heading1, heading2, heading3, anda menginginkan jenis fontnya adalah arial, dan berwarna merah. Dengan CSS , anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan anda akan memperoleh hasil yang diinginkan. bandingkan jika tidak menggunakan CSS ( Cascading Style Sheets ), anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan, perhatikan pada contoh berikut ini
| contoh html dgn CSS ( Cascading Style Sheets ) | Contoh Html biasa |
<html>
<head>
<title>Otak Jagat</title>
<style type="text/css">
h1,h2,h3 {
color: red;
font-family:"arial";
</style>
<head>
<body>
<h1>Baris heading 1</h1>
<h2>Baris heading 2</h2>
<h3>Baris heading 3</h3>
</body>
</html>
|
<html>
<head>
<title>Otak Jagat</title>
<head>
<body>
<h1><font face="arial" color="red">Baris heading 1</font></h1>
<h2><font face="arial" color="red">Baris heading 2</font></h2>
<h3><font face="arial" color="red">Baris heading 3</font></h3>
</body>
</html>
|
kita dapa melihat bahwa style elemen dari heading1, heading2, heading3 mempunyai gaya yang sama yaitu berwarna merah dan memiliki font arial. Setelah anda menyimpan dengan "nama_elemen.html" lalu anda membukanya dengan browser yang anda punya maka akan terlihat seperti gambar berikut.
Gambar diatas merupan hal yang sama ketika anda menggunakan CSS ( Cascading Style Sheets ) atau cuman Html biasa. Tapi keuntungan menggunakan CSS ( Cascading Style Sheets ) tentunya anda sudah tahu yaitu penulisan yang tidak akan kita ulang-ulang untuk setiap kode pada setiap baris yang akan kita kasih efek. Sudah tahu kan betapa enaknya menggunakan CSS ( Cascading Style Sheets ). dibanding hanya menggunakan html saja. capek ......
Selain itu dengan anda menggunakan CSS ( Cascading Style Sheets ) maka anda akan memperoleh kombinasi style. Anda tentu dapat merasakan keuntungan ini. Kalau masih bingung lihat kembali 2 contoh diatas ya.
.jpg)
