Nov 15

Pengenalan CSS

Posted on November 15th, 2009 by by admin

Apakah CSS itu??
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen HTML. CSS memungkinkan kita untuk mengatur tampilan dari banyak dokumen html dengan satu file serta untuk merubah tampilan dari banyak dokumen html tersebut secara cepat dan praktis.

Sederhanya CSS merupakan kumpulan dari tag html yang kita buat kedalam satu file dan dengan metode penulisan tersendiri yang telah distandarisasi oleh W3C (World Wide Web Consortium).

Mengapa harus menggunakan CSS?
Seperti yang telah kita ketahui dengan tag html pun kita telah bisa mengatur tampilan halaman html tersebut dan mengapa harus menggunakan CSS lagi? Banyak manfaat jika kita mengatur tampilan menggunakan CSS.

Bayangkan jika anda misalnya ingin mengganti warna font di web/blog anda, tentu saja anda harus mengedit lagi satu persatu file html dari web/blog tersebut. dan bagaimana jika filenya berjumlah puluhan bahkan ratusan?? :) hmmm.. pasti akan banyak memakan waktu dan tenaga bukan?? dengan CSS kode HTML menjadi lebih sederhana dan lebih mudah diatur.

Bagaimana cara menggunakan CSS?
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :

1. Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML.

Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<style type=”text/css”>
p {color: white;}
body {background-color: black;}
</style>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>

Keterangan : yang berwarna biru adalah script CSS

2. External CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.

Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<link rel=”stylesheet” type=”text/css” href=”file.css”/>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>

Keterangan : yang berwarna biru adalah lokasi dari file CSS

3. Inline CSS
Yaitu menuliskan secara langsung script CSS kedalam tag HTML.

Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style=”background: blue; color: white;”>Ayo belajar CSS</p>