Pengenalan CSS (Cascading Style Sheet )

Diposting oleh Th3 Pirates | 10/13/2010 | | 0 komentar »

1) Pengenalan CSS

Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat. CSS juga telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Contoh :

<h1 style="color:red;">Merah, Meriah Euy...</h1>
maka akan tampil seperti ini

Merah, Meriah Euy...

2. Istilah- istilah dalam CSS

Style rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna merah.

contoh :
.h2 {
color:red;
}
maka elemaen Html yang memiliki tag h2 akan berwarna merah

Style sheet

Style sheet dapat di-embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector

selector { property1: value; property2:value, . . .}
h1{ color:green; background-color:orange;}

Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari properti dan nilainya.

3. Penulisan CSS
Pada dasarnya Penulisan Css Dibagi menjadi Tiga yaitu
  • Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya. Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
   p {color: white; }
   body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
  • External CSS
Yaitu memanggil file CSS dari tempat lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini :
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
  • Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>

Tidak ada komentar:

Posting Komentar