Pada postingan kali ini,kita akan mempelajari bagaiman prinsip memasukkan CSS ke dalam kode HTML.Selamat membaca !
Secara umum ada 3 cara memasukkan kode CSS ke dalam kode HTML,yaitu :
- Metode Inline Style
- Metode Internal Style Sheets
- Metode External Style Sheets
METODE INLINE STYLE
Metode Inline Style adalah cara memasukkan kode CSS langsung ke dalam tag HTML.Caranya dengan menggunakan atribut "style".Contoh Metode Inline Style CSS adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>INLINE STYLE</title>
</head>
<body>
<h1 style ="background-color:yellow; color:red">
Teks Merah dengan Background Kuning
</h1>
<body>
<html>
Dalam contoh kode HTML dan CSS di atas,kode CSS terlihat pada atribut style pada tag <h1> dimana nilai atribut style ini merupakan kode CSS yang ingin diterapkan pada tag tersebut.
Penggunaan tag CSS menggunakan metode inline style memang cukup praktis karena langsung mengaplikasikan kode CSS ke dalam tag HTML,akan tetapi tidak terlalu disarankan memakai metode ini,karena tidak efektif jika kita ingin membuat tampilan yang sama untuk banyak file HTML.
METODE INTERNAL STYLE SHEET
Metode Internal Style Sheet dipilih jika kita ingin memisahkan kode CSS dari tag HTML,namun tetap dalam satu file atau halaman HTML yang sama.Atribut style yang sebelumnya berada di dalam tag yang ingin diaplikasikan kode CSS-nya,dikumpulkan pada sebuah tag <style>.Tag style ini harus ditulis di bagian <head> dari halaman HTML.
Contoh penggunaan metode Internal Style Sheet adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>INTERNAL STYLE SHEET</title>
<style type="text/css">
h1 { background-color:yellow; color:red; }
</style>
</head>
<body>
<h1>Teks merah dengan Background Kuning</h1>
</body>
</html>
Contoh penulisan kode CSS internal Style Sheet seperti di atas dianggap lebih praktis daripada metode Inline Style karena kita sudah memisahkan kode CSS dan kode HTML.Itu artinya jika kita ingin mengubah nilai (misalnya warna teks),maka kita hanya mengubah kode CSS yang tadi kita letakkan di antara tag <head>.Dengan kata lain kita tidak perlu mencari semua kode HTML yang bisa memakan waktu yang sangat lama.
Kekurangan metode ini terlihat padda saat kita memiliki beberapa halaman/file HTML dengan style yang sama,maka kita harus membuat kode CSS masing-masing di file tersebut.Artinya kita tidak dapat membuat satu kode CSS untuk banyak file HTML.
METODE EXTERNAL STYLE SHEET
Metode External Style Sheets digunakan untuk memisah kode CSS ke dalam sebuah file terpisah dari file HTML.Dengan begitu,setiap halaman HTML yang membutuhkan kode CSS yang dimaksud,tinggal memanggil file CSS tersebut.Artinya ada 2 file yang harus dibuat yaitu file CSS (berekstensi.css) dan HTML(berekstensi.html).
Berikut contohnya.Kita akan membuat file.css terlebih dahulu dengan cara seperti berikut :
h1 {background-color:blue; color: red;}
Kemudian simpan dengan nama file : file.css
Pastikan bahwa akhiran nama file harus .css dan simpan dalam folder yang sama dengan file halaman HTML.Jika menggunakan Notepad++,maka pilih Cascade Style Sheets File pada Save As Type.
Sekarang kita akan membuat file HTML.Tapi sebelum itu,kita harus mengetahui bahwa CSS menyediakan 2 pilihan untuk menginput kode CSS yang sudah dibuat dalam file yang berbeda ke kode HTML.Pilihan pertama menggunakan @import.Contohnya adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>METODE EXTERNAL STYLE SHEET IMPORT</title>
<style type="text/css">
@import url(file.css);
</style>
</head>
<body>
<h1>Teks ini berwarna merah dan background nya warna biru</h1>
</body>
</html>
Ketika kita bekerja dengan metode @import ,kita menyisipkan @import url(namafile.css);pada tag <style>.Alamat URL bisa berupa alamat relatifseperti namafolder/file.css maupun berupa alamat yang bernilai absolut seperti www.fabiokounang.blogspot.com/file.css.
Cara kedua memasukkan external style sheets ke dalam file HTML adalah dengan menggunakan tag <link>.Berikut adalah contohnya :
<!DOCTYPE HTML>
<html>
<head>
<title>METODE EXTERNAL STYLE SHEET LINK</title>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
<body>
<h1>Teks ini berwarna merah dan background nya warna biru</h1>
</body>
</html>
Pada metode external sheets ini,kita menggunakan atribut hred pada tag <link> yang akan diisi dengan alamat file CSS yang dituju,dalam hal ini adalah file file.css
Nah dari ketiga metode di atas,mana kah yang anda pilih ?Dari ketiga metode di atas yang paling direkomendasikan sebenarnya adalah metode ketiga yaitu Metode External Style Sheets.Alasannya karena dengan menggunakan kode CSS yang terpisah dari file HTML (tapi dalam 1 folder yang sama),kita dapat menggunakan file CSS tersebut untuk banyak file HTML (bahkan ribuan).Jadi jika ingin mengubah seluruh tampilan halaman website ,kita cukup mengubah 1 file CSS saja.
Nah,setelah membaca tentang cara memasukkan kode CSS ke dalam kode HTML di atas,manakah yang paling baik ?Silahkan pilih sesuai dengan kebutuhan masing-masing.Sekian pembahasan mengenai cara memasukkan kode CSS ke dalam HTML.Jika ada yang kurang dimengerti bisa ditanyakan di kolom komentar.Terima Kasih dan semoga bermanfaat !
Comments
Post a Comment