CSS (Cascading Style Sheet) merupakan style (berisi kelompok property) yang akan digunakan untuk memberikan efek dinamis pada tag html. Contoh format penulisan CSS adalah:
<HEAD>
<STYLE TYPE=”text/css”>
Kriteria-Pilihan { property1:nilai1; property2:nilai2 ; }
</STYLE>
</HEAD>
Hal terpenting yang perlu diperhatikan dalam pembuatan CSS adalah kode CSS yang dibuat harus disisipkan pada tanda tag <HTML>. Kriteria-Pilihan merupakan tag-tag yang dikenali oleh HTML. Property merupakan tag yang sesuai dengan tag-tag HTML yang dibuat dalam Kriteria Pilihan misalnya tag BODY,P,Heading atau yang lainnya.
Kemudian nilai merupakan ag nilali dari tag HTML yang sesuai dengan property. Property dan nilai dipisahkan denagn tanda titik dua(:), sedangkan antar property yang satu dengan yang lain dipisahkan dengan tanda titik koma (;). Secara keseluruhan, semua itu (property dan nilai) disimpan dalam tanda kurung kurawal.
Ada tiga cara yang dapat digunakan untuk menggunakan CSS pada halaman web, yaitu:
- Linked Style Sheet
Sesuai dengan namanya, cara ini adalah dengan melakukan pemanggilan pada style yang telah dibuat khusus pada file terpisah. Tetapi tidak semua file dapat dipanggil, file yang dapat dipanggil adalah file yang berekstensi .css. Pemanggilan CSS dengan cara ini termasuk cukup praktis sekali, karena kita dapat menggunakan style yang sama pada sebuah halaman web.
- Inline Style Sheet
Cara Inline Style Sheet sebenarnya kurang praktis karena tiap-tiap tag harus didefinisikan dengan kode-kode CSS, hal ini jelas tidak praktis. Apalagi jika tag yang kita gunakan banyak sekali, yang berarti kita akan mengulang atribut STYLE sebanyak tag yang dimaksud. Juga pencampuran kode CSS dengan dokumen lainya yang semakin semrawut. Contoh program Inline Style Sheet:
<html>
<head>
<title>Inline CSS </title>
<title>Inline CSS </title>
</head>
<body bgcolor=”#FFFFFF”>
<h1 STYLE=”text-align:center; border-width:4pt; border-style:outset;
background-color:yellow;padding:4pt; font-family:Helvetica;
color:navy”>
coba.coba.coba
</h1>
<p STYLE=”text-align:center; font-family:Helvetica; font-style:italic;
font-weight:bold; text-indent:12pt; color:green”>
“————-Web Development———————“
</body>
</html>
- Embedded Style Sheet
Embedded Style Sheet adalah cara untuk membuat definisi style dengan menanamkan kode CSS pada tag khusus, yaitu tag <STYLE>. Untuk menggunakan cara ini, tag <STYLE> harus diletakkan di antara tag <HTML> dan <BODY>. Contoh program dengan Embedded Style Sheet:
<html>
<head>
<title>Embed CSS</title>
</head>
<style type=”text/css”><!–
H2 { font-family:Console;
text-align:center;
color:navy}
P.satu {font-family:Helvetica;
font-style:italic;
text-indent:12pt;
color:red}
P.dua {font-family:Arial;
text-decoration:underline;
text-indent:14pt;}
–></style>
<body bgcolor=”#FFFFFF”>
<h2>embed style….</h2>
<p class=”satu”>
kode-kode style
<p class=”dua”>
paragraf dua
</body>
</html>
1. Memodifikasi CSS
Untuk memodifikasi CSS pada halaman yang telah anda buat, anda tinggal meng-klik tombol CSS yang ada pada property inspector
Kemudian pada sebelah kanan akan mucul:
Anda dapat menambah aturan maupun mengeditnya menggunakan tombol tersebut.
2. Membuat Page dengan CSS
Pada Dreamweaver disediakan CSS yang dapat membuat sebuah halaman seperti Template, caranya:
FileàNew
Pilih Page Designs (CSS), kemudian pilh jenis halaman dan klik Create.
Setelah halaman dibuat anda dapat memodifikasinya.
0 komentar:
Posting Komentar