Apa jadinya website tanpa css, tentu akan terlihat jelek, kaku, berantakan dan tidak menarik. Web kita butuh css untuk mengatur tata letak paragraf, jenis huruf, ukuran huruf. Ini adalah contoh sederhanya, masih banyak lagi kegunaan lainnya untuk mengatur gambar, kolom, link, menu, tabel, daftar, warna, hover dan masih banyak lagi. Sehingga dapat disimpulkan css bagian yang tidak terpisahkan dari html. Dalam perkembangannya, css juga telah bisa membuat website menjadi responsive yang disebut css3, yang dapat menyesuaikan lebar halaman dengan lebar layar gadget. Namun, tidak dibahas di sini, hanya pengetahuan saja.
Terdapat 3 cara mendekarasikan CSS pada HTML, pertama secara internal, ke dua secara eksternal dan yang ketiga secara langsung. Masing-masing akan dijelaskan satu per satu dalam contoh berikut:
Pertama, secara internal:
internal.html
<!doctype html>
<html>
<head>
<title>CSS internal html</title>
<style type="text/css">
p{
text-align:center;
font-family:Verdana, Arial, Tahoma;
font-size:14px;
}
</style>
</head>
<body>
<p> tipspengetahuan.com terbentuk pada Nopember 2012 didirikan dengan tujuan
menyediakan artikel seputar tentang tips dan pengetahuan. Read and share.
Memiliki motto: Proyek bersama bercita-cita mencerdaskan bangsa Indonesia.
Setiap orang berhak menulis artikel dan juga mengeditnya (artikel wiki dan tips).
</p>
</body>
</html>
Pada contoh di atas, kita membuat CSS tag <p> dengan atribut teks rata tengah, jenis font yang digunakan yaitu Verdana, jika tidak terdeteksi, maka gunakan font Arial atau Tahoma. Selanjutnya kita set ukuran font 14 piksel (px). Selesai contoh pertama.
Dari contoh di atas kita buat contoh ke 2, versi css eksternal:
Pertama, buat file css dengan nama styleku.css:
p{
text-align:center;
font-family:Verdana, Arial, Tahoma;
font-size:14px;
}
Selanjutnya buat file eksternal.html, letakkan satu tempat(folder) dengan file styleku.css:
eksternal.html
<!doctype html>
<html>
<head>
<title>CSS eksternal html</title>
<link rel="stylesheet" type="text/css" href="styleku.css" />
</head>
<body>
<p> tipspengetahuan.com terbentuk pada Nopember 2012 didirikan dengan tujuan
menyediakan artikel seputar tentang tips dan pengetahuan. Read and share.
Memiliki motto: Proyek bersama bercita-cita mencerdaskan bangsa Indonesia.
Setiap orang berhak menulis artikel dan juga mengeditnya (artikel wiki dan tips).
</p>
</body>
</html>
Perhatikan tulisan dengan latar belakang kuning, itu adalah cara pemanggilan file css secara eksternal. Di awali dengan <link rel="..." dan diikti href yang merujuk pada letak dan nama file css, dalam hal ini styleku.css. Contoh 1 dan contoh 2 hasilnya sama, namun dengan cara pendeklarasian berbeda, begitupun dengan contoh ke tiga ini, deklarasi css pada html secara langsung:
langsung.html
<!doctype html>
<html>
<head>
<title>CSS secara langsung html</title>
</head>
<body>
<p style="text-align:center;font-family:Verdana, Arial, Tahoma; font-size:14px;">
tipspengetahuan.com terbentuk pada Nopember 2012 didirikan dengan tujuan
menyediakan artikel seputar tentang tips dan pengetahuan. Read and share.
Memiliki motto: Proyek bersama bercita-cita mencerdaskan bangsa Indonesia.
Setiap orang berhak menulis artikel dan juga mengeditnya (artikel wiki dan tips).
</p>
</body>
</html>
Pada contoh ke tiga kita secara langsung mendeklarasikan css pada tag <p>. Dengan cara berbeda namun semua hasilnya tetap sama.
Mana yang terbaik?
Kalau semua hasilnya sama, lantas mana yang terbaik? Jawabnya tergantung kebutuhan dan keadaan, namun secara umum yang terbaik tentu cara yang ke dua (cara eksternal). Karena jika ada perubahan pada file css, kita hanya perlu merubahnya file css terkait (styleku.css), file indeks tidak akan diganggu, kecuali terjadi perubahan nama css-nya sendiri, tentu pada href juga dirubah namanya. Kelebiha lainnya, file styleku.css bisa digunakan oleh halaman lain berbeda, jadi bersifat publik, bisa diakses dari mana saja.
Tetapi jika hanya satu tag saja yang akan dibuatkan css-nya, cara ke tiga lebih efektif dan juga cara ke dua. Untuk apa membuatkan file css secara eksternal kalau hanya untuk satu tag (<p>)? Tentu tidak efektif bukan?, karena memakan waktu lebih lama, lebih baik langsung saja deklarasikan di tag itu juga.
Kalau file css berada di luar folder bagaimana caranya?
Jika file html dan file css tidak satu folder, perhatikan dimana letak file css. Misalnya file css ada di folder style, sementara file html berada di luarnya. Maka deklarasinya dengan menyertakan nama foldernya:
<link rel="stylesheet" type="text/css" href="style/styleku.css" />
Kalau file indeks dan file css berada dalam masing-masing folder bagaimana? Misalnya file html ada difolder htm, sementara file css ada di folder style. Berarti file html harus "keluar" dulu dari folder htm, kemudian "masuk" ke dalam folder style. "Keluar" satu kali ditandai dengan "../" (titik 2 kali dan tanda miring), jika keluar dua kali berarti "../../" dan seterusnya.
<link rel="stylesheet" type="text/css" href="../style/styleku.css" />
File css dari situs tertentu
Misalnya kita akan menggunakan css dari situs tipspengetahuan.com dengan nama file css: 7hkpldhw.css. Maka kita harus menuliskan secara lengkap url (alamat)nya secara lengkap, misalnya:
<link rel="stylesheet" type="text/css" href="http://tipspengetahuan.com/wiki/css/7hkpldhw.css" />
Namun ini tentu membutuhkan koneksi internet, karena sudah terhubung secara online.
^Baca juga: Tag img untuk menampilkan gambar.
No comments:
Post a Comment