Penulisan style CSS secara eksternal (linked) adalah salah satu metoda pemberian gaya pada halaman HTML. Metode ini dilakukan dengan menuliskan kode CSS dan menyimpannya sebagai file terpisah dengan file dokumen HTML. File berisi kode CSS tersebut disimpan dengan ekstensi .css. Cara ini merupakan cara yang paling nyaman dan banyak digunakan oleh banyak kalangan karena satu file CSS dapat digunakan oleh beberapa atau banyak dokumen sekaligus.
Anda cukup menggunakan satu buah file CSS eksternal sebagai file rujukan dan menggunakannya bagi keseluruhan halaman web atau HTML anda.
File CSS eksternal biasanya diletakkan di antara tag <head></head> pada halaman HTML. Cara pemanggilannya dengan menuliskan tag <link> dilengkapi dengan beberapa atribut. Pada atribut href (hyperlink referensi), nama file CSS perlu diberikan sebagai file acuan untuk memberikan gaya pada halaman HTML.
Cara penulisan style CSS dengan metode eksternal (linked) pada HTML :
HTML
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
Hal pertama yang perlu dipersiapkan jika ingin menggunakan file eksternal CSS yaitu membuat halaman HTML-nya terlebih dahulu. Pada tiap-tiap elemen HTML yang akan diberikan gaya perlu dituliskan terlebih dahulu melalui selector berupa tag HTML, atau ID maupun class sebagai rujukan elemen yang akan diberi gaya.
Berikut file index.html yang akan diberikan gaya melalui file eksternal CSS :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Eksternal Style Sheet CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p id="header">Something usefull here..</p>
<p class="artikel">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
<p class="artikel">If a baby born in the morning called Monica, in the evening is Evelyn, on the floor is Florence.. So what do we call if a child born in a car??</p>
</body>
</html>
Kemudian langkah keduanya adalah membuat file CSS sebagai rujukan tag <link> yang disimpan dengan nama file style.css. Isi kode CSS dapat dituliskan secara langsung. Berikut isi dari file style.css :
CSS
1
2
3
4
Previous Pagebody{background-color:#91c483;}
h1{color:teal;}
#header{color:purple;}
.artikel{color:green;}
Jika dijalankan akan menghasilkan tampilan sebagai berikut :
Penggunaan style CSS dengan mengikutkan file eksternal CSS mempunyai beberapa manfaat dan kelebihan. Manfaat yang utamanya adalah bahwa file CSS tersebut dapat digunakan banyak halaman. Ini artinya jika anda mempunyai suatu halaman web yang berisi ratusan, bahkan ribuan halaman, anda dapat menggunakan satu file CSS saja dan dapat diaplikasikan untuk seluruh halaman web anda.
Manfaat lainnya yang akan didapatkan adalah ukuran file HTML-nya akan jauh lebih kecil dan terstruktur dengan rapi. Kemudian kecepatan akses halaman akan jauh lebih ringan.
Namun, penggunaan file eksternal CSS juga akan menimbulkan persoalan. Pada pengguna yang memiliki koneksi internet yang lambat, biasanya halaman tidak akan tampil secara sempurna jika file CSS belum selesai dipanggil.
Hal lain yang sangat mengganggu adalah saat terjadi perbaikan atau perubahan gaya pada halaman dengan menggunakan file eksternal CSS. Saat file CSS-nya sudah diberikan perubahan dan disimpan kemudian dilakukan reload halaman. Anda akan bertanya-tanya, mengapa tidak terjadi perubahan apapun yang muncul pada halaman padahal sudah dilakukan perubahan pada file CSS-nya. Hal ini yang bermasalah bukan CSS-nya, namun pada browser tepatnya pada sisi Cache HTTP.
Cache HTTP sendiri berfungsi mempercepat kinerja web dengan menyimpan berbagai informasi penting seperti gambar, foto, file CSS, file javascript. Saat halaman web pertama kali diload oleh browser, maka informasi (file CSS) di atas akan disimpan pada Cache HTTP. Dan untuk loading halaman selanjutnya jika menjumpai informasi yang sama (file CSS yang sama), maka browser akan melompati informasi tersebut. Kemudian browser akan menggantinya dengan isi file CSS yang sudah disimpan pada Cache HTTP tanpa harus mengakses file CSS yang asli. Itulah mengapa menggunakan file CSS eksternal akan jauh lebih cepat.
Saat perbaruan file CSS eksternal, anda perlu bersabar dengan melakukan clear cache untuk mendapatkan tampilan yang terbaru halaman web anda.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
