Hay teman-teman, tentunya bagi teman-teman yang ingin bergelut dalam dunia web developer pasti sudah tidak asing lagi dengan CSS. CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah. Dengan CSS dapat diatur layout (tata letak), warna, font, garis, background, animasi, dan lain-lain. Sehingga, para readers akan betah untuk mengunjungi website kita.
Untuk hal yang mendasar, teman-teman harus tahu terlebih dahulu cara-cara dalam menginput kode CSS ke halaman HTML. Pada kali ini, akan dikenalkan 3 metode yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
- Metode Inline Style
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style. Contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
Dengan menulis kode tersebut ke dalam software Visual Studio Code, teman-teman bisa menampilkan hasil seperti di bawah ini :
Atribut style disisipkan pada tag dalam metode ini, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan. Penggunaan tag CSS seperti ini walaupun praktis, tetapi tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.
- Metode Internal Style Sheets
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 di dalam tag, dikumpulkan pada pada sebuah tag dari halaman HTML. Berikut contoh penggunaan motode internal style sheets CSS:
Dengan menulis kode tersebut ke dalam software Visual Studio Code, teman-teman bisa menampilkan hasil seperti di bawah ini :
Contoh metode Internal Style Sheets diatas sudah jauh lebih baik dibandingkan 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 External Style Sheets
Metode External Style Sheets digunakan untuk membuat kode CSS tersebut berada dalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal memanggil file CSS tersebut. Tahap pertama yang kita lakukan adalah dengan memindahkan isi dari tag <style> ke sebuah halaman/file baru dengan syarat nama file tersebut harus berakhiran .css
Misal nama filenya “contoh”, kita beri nama contoh.css
Adapun isi dari filenya sebagai berikut.
Kembali ke halaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama adalah menggunakan @import.
Contoh penggunaan @import CSS:
Untuk metode @import External Style Sheets ini, kita menyisipkan @import url(contoh.css) pada tag <style>.
Cara input yang kedua adalah menggunakan tag . Berikut contohnya:
Adapun hasil kedua cara tersebut ialah sama, seperti tampilan di bawah ini.
