Mungkin banyak dari teman-teman yang masih bingung bagaimana cara menggabungkan Source Code HTML dengan CSS karena biasanya Code CSS langsung ditempatkan pada tempat HTML itu juga.
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML :
Metode Inline Style adalah cara menginput kode CSS langsung kedalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
Dalam kode diatas, saya menyisipkan atribut style pada tag <h1>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada didalam tag, dikumpulkan pada sebuah tag <style>. Tag style ini harus berada didalam tag <head> dan </head> dari halaman HTML.
Contoh metode internal style sheets diatas sudah jauh lebih baik dari pada inline style, karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML. Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external style sheets.
Metode ini digunakan untuk memanggil kode CSS kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Sebagai contoh kita akan membuat file css dengan nama belajar.css ( pastikan file tersebut .css ).
Simpan file css tersebut pada folder yang sama dengan file HTML. Untuk memanggil/mengimport file css kedalam HTML cukup mudah. Berikut contohnya :
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link> untuk memanggil file belajar.css.
Dari ketiga cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.
Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.
