- Lebih cepat daripada menggunakan metode 'Internal Style Sheet', dengan kata lain menggunakan metode external style sheet dapat menghemat waktu mengetik anda karena proses pengetikan code css hanya dilakukan sekali dan dapat diterapkan untuk beberapa dokumen html. Jika anda menggunakan 'Internal Style Sheet' lihat contoh penulisan codenya seperti di bawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>title/judul halaman website anda</title>
<style type="text/css">
<!--
p {
color: red
}
body {
background: gray
}
-->
</style>
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
</body>
</html>
Dapat anda lihat code css ditulis antara tag head buka dan tutup pada tiap-tiap dokumen. Dengan kata lain proses penyisipan code css harus dilakukan secara manual dan berulang-ulang untuk setiap dokumen html. Jika menggunakan cara 'External Style Sheet' anda hanya perlu menyisipkan link file css sekali saja. - User (pengguna) dapat browsing halaman web lebih cepat, karena browser hanya perlu membaca css satu kali karena file css tersimpan pada cache browser.
- Memungkinkan anda untuk memasukkan beberapa link tag (multiple link tag) dalam setiap dokumen jika memang anda membutuhkan rule yang kompleks. Artinya anda dapat membuat lebih dari satu 'External Style Sheet'.
<link rel="StyleSheet" href="paragraf_warna.css" type="text/css">
Letak kode di atas antara tag 'head' buka dan tutup. Tentu saja sebelum menambahkan kode di atas pada dokumen html anda perlu membuat source file css nya terlebih dahulu. Anda dapat menggunakan text editor seperti 'Notepad'. Contoh pembuatan rule css (selector, property & value) pada file css baru dari inline style di atas:
p {
color: red;
}
body {
background-color: gray;
}Selanjutnya simpan dengan files extention 'css', contoh simpan dengan nama 'background-warna.css'. Selanjutnya sisipkan ke dalam dokumen 'html'. Lihat contohnya di bawah:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title/judul halaman website anda</title>
<link rel="StyleSheet" href="paragraf_warna.css" type="text/css">
</head>
<body>
<p>Contoh paragraf yang berwarna merah</p>
</body>
</html>
Simpan dokumen html di atas pada folder yang sama dengan tempat anda menyimpan file 'background-warna.css', buka dengan menggunakan browser anda dan lihat hasilnya. Tulisan 'Contoh paragraf yang berwarna merah' mempunyai teks dengan warna merah dengan background berwarna abu-abu.
[...] yang anda lihat pada kode di atas, merupakan bentuk dari link external css. Menggunakan external file CSS kenyataannya dapat meload halaman web lebih cepat karena file CSS [...]
BalasHapus