Inline Style Sheet
Pada posisi ini, CSS dituliskan di dalam elemen
HTML, dan mempunyai ciri – ciri sebagai berikut :
·
Merupakan style yang terlemah karena
editing harus dilakukan disemua bagian dimana inline berada
·
Mirip dengan atribut biasa.
·
Bagian dari <BODY>
Format Statement : SELECTOR
{PROPERTY:VALUE}
Nama selector bisa merujuk ke tag HTML yang akan
diedit, sebagai contoh jika tag paragraf diubah dengan CSS maka dapat ditulis sebagai
berikut :
P
{PROPERTY:VALUE}
Contoh
penggunaan inline style sheet :
|
<html>
<head>
<title>Contoh Inline
CSS</title>
</head>
|
|
<body>
<p
style="font-style:italic">Tulisan ini akan tercetak
miring</p>
</body>
</html>
|
Embedded Style Sheet
Penulisan CSS didalam dokumen HTML dan menggunakan tag <style>….</style>
yang ditempatkan pada bagian page header atau diantara tag
<head>…</head>. Penggunaan embedded style sheet akan memberikan
efek terhadap satu halaman saja.
Format Statement :
"HTML
tag"{ "CSS Property":"Value" ; }
"HTML tag"{ "CSS
Property1":"Value1"; "CSS
Property2":"Value2"; ..}
Contoh penggunaan embedded style sheet :
|
<html>
<head>
<title>Embedded Style
Sheet</title>
<STYLE type="text/css">
p {font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color:#FF0000}
</STYLE>
</head>
<body>
<p>Tulisan ini diformat
menggunakan Embedded Style Sheet</p>
</body>
</html>
|
Linked Style Sheet
Style disimpan dalam file yang berbeda dari file HTML dan disimpan dalam
format ”.css”
Secara umum, linked style sheet memiliki ciri – ciri
:
·
Disimpan di
file lain sehingga sebuah file CSS dapat dipakai di banyak file HTML lainnya
·
File hanya
berisi style bukan tag html
Untuk menggunakan file
lain yang berisi css pada file HTML, digunakan tag <link> yang
ditempatkan pada bagian page header atau diantara tag <head>
....</head>
Untuk menggunakan linked style sheet, setidaknya
dibutuhkan 2 (dua) file yang masing – masing berfungsi sebagai file css (yang
akan dipanggil) dan file HTML (yang akan memanggil).
·
Tahap
pertama, buat sebuah file css dan simpan dengan menggunakan nama file mystyle.css dengan isi script css
sebagai berikut :
|
p { font-family: Arial, Helvetica, sans-serif;
font-size: 12pt; color: #FF0000; font-style:italic}
|
·
Tahap kedua,
buat sebuah file HTML yang disimpan pada direktori yang sama dengan file css
yang sudah dibuat dengan script HTML sebagai berikut :
|
<html>
<head>
<title>Linked Style
Sheet</title>
<link rel="stylesheet"
href="mystyle.css" type="text/css">
</head>
<body>
<p>Berikut ini contoh penerapan
linked style sheet pada paragraf</p>
</body>
</html>
|
0 comments:
Post a Comment