Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML

Posted on Posted in Tutorial CSS

Setelah dalam tutorial sebelumnya kita telah belajar mengenai struktur dari skrip css yang terbagi atas selector, property dan value, dalam tutorial kali ini kita akan membahas mengenai cara penulisan kode css pada HTML, cara penulisan ini dibagian menjadi 3 cara, yaitu internal style, external style dan inline style.

perbedaan dari 3 cara penulisan tersebut adalah letak dari kode cssnya, untuk effect penggunaan cssnya semuanya sama, baik langsung saja kita akan bahas satu persatu.

Internal Style

Internal style atau biasanya juga disebut dengan embeded style, penulisan kode css dengan mode ini, kode cssnya ditulis diantara tag <head> dan </head>.

Contoh penggunaan internal style adalah sebagai berikut :

 

semisal saya simpan dengan nama contoh_internal_style.html, lalu saya buka di browser :

nah maka skrip css akan merubah warna dari paragraf menjadi warna merah, untuk peletakkan skrip css berada di antara <head> dan </head>, untuk penulisan css dengan mode ini, menuliskannya diantara tag <style> dan </style> dan memberikan attribute type dengan value “text/css”.

 

External Style

Jika Internal Style cara penulisan kode css harus berada di file HTML yang sama, akan timbul masalah jika anda harus menuliskan kode css lagi ketika ada file html lain yang menggunakan kode css yang sama, nah untuk mengatasi hal tersebut anda dapat menggunakan cara external style, dengan menggunakan external style anda dapat menuliskan kode css di dalam file lain, sehingga ketika ada lebih dari 1 file html yang membutuhkan skrip css yang sama, anda bisa langsung memanggil dengan menggunakan mode external style ini, agar tidak bingung perhatikan contoh dibawah ini :

saya tuliskan kode css tersebut lalu saya simpan di file dengan nama semisal cssku.css

Setelah anda membuat sebuah file css, berikutnya anda dapat membuat file html, dan kita akan melakukan pemanggilan file cssnya di file html yang telah dibuat, untuk pemanggilannya bisa menggunakan 2 cara seperti dibawah ini :

Cara pertama anda bisa menggunakan kode @import

pada value url, anda bisa menuliskan nama file css, dalam contoh ini saya tuliskan cssku.css

Cara kedua dengan menggunakan tag <link>

tag <link> dituliskan diatara tag <head> dan </head>, attribute yang digunakan adalah :

  1. rel dengan value “stylesheet”
  2. type dengan value “text/css”
  3. href dengan value nama file cssnya

yang terpenting dari kedua cara tersebut adalah penulisan nama file css yang akan dipanggil, anda dapat menggunakan alamat relatif contohnya: foldercss/cssku.css maupun alamat absolut contohnya : www.warungbelajar.com/cssku.css

karena dalam contoh ini untuk file cssnya kita letakkan difolder yang sama sehingga langsung saya tuliskan nama filenya

semisal file htmlnya kita beri nama contoh_external_style.html, lalu saya buka di browser maka hasilnya adalah sebagai berikut :

Mode Inline Style

mode ini berbeda dengan mode internal dan external style, jika anda menggunakan mode inline style, anda harus menuliskan kode css didalam tag html secara langsung, dengan menggunakan tag <style>, contohnya adalah sebagai berikut :

lalu semisal kita simpan dengan nama contoh_inline_style.html, lalu kita buka di browser :

penulisan css dengan cara ini memang lebih mudah, karena tinggal menulisnya di bagian tag html yang diinginkan, tapi kita tidak menyarankan untuk menggunakan cara ini karena anda harus menuliskan disetiap tag untuk mendapatkan effect dari kode cssnya, berbeda dengan mode internal dan external yang menurut kita bisa lebih efisien dalam penulisan kode css.

bagaimana sahabat warung belajar, sudah paham kan mengenai 3 mode penulisan dari kode css, kita lebih merekomendasikan untuk menggunakan mode external style, karena jika nanti ada beberapa file HTML yang memerlukan effect dari kode css yang sama, anda tinggal memanggil file css tersebut baik menggunakan tag <link> ataupun @import, sehingga anda tidak perlu menuliskan lagi kode css di masing – masing file html, baik sekian dulu pembahasan mengenai mode penulisan skrip css, jika ada yang ingin didiskusikan bisa di kolom komentar.

 

Leave a Reply

Your email address will not be published. Required fields are marked *