Apa itu CSS ?
CSS adalah bermaksud dari Cascading Style Sheet. CSS merupakan salah satu kod pemrograman yang bertujuan untuk menghias dan mengatur gaya paparan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang dikeluarkan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mereka banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).CSS dapat mengendalikan ukuran gambar, warna bahagian pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over dan lain-lain. CSS adalah bahasa style sheet yang digunakan untuk mengatur paparan dokumen. Dengan adanya CSS membolehkan kita untuk menampilkan halaman yang sama dengan format yang berbeza.
Cara Penulisan:
Kod CSS permulaan sering dijumpai sebagai berikut:h1 {
color: #0789de;
}
Inline Style Sheet
Contoh penulisan CSS dengan metode Inline Style Sheet:
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
Embedded Style Sheet
Contoh penggunaan CSS dengan metode Embedded Style Sheet :<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
