Perbedaan Penulisan CSS Inline, Internal, dan External

Perbedaan Penulisan CSS Inline, Internal, dan External

Sebelum ke pokok materi penulisan CSS sebaiknya kamu pahami salah satu kelebihan CSS terlebih dahulu. Salah satu kelebihan dari CSS yaitu kita dapat dengan mudah merubah tampilan pada website, dan itu bisa dilakukan tanpa merubah file HTML. Misalnya dulu sebelum adanya CSS untuk merubah warna pada huruf memerlukan tag seperti ini <font color=”yellow”>Contoh</font>, jadi misalnya jika ingin ubah heading dengan warna merah menjadi seperti ini <h1><font color=”red”>Text Heading</font></h1>. Sudah bisa dibayangkan apabila kita ingin membuat banyak heading atau tulisan dengan warna tertentu, kemudian hari kita ingin merubahnya dengan warna lain dan web sudah memiliki banyak halaman betapa repotnya merubah halaman tersebut satu persatu.

Contoh merubah warna huruf tanpa CSS.

Hasil apabila kode diatas dibuka pada browser.

Hasil Merubah Warna Tanpa CSS

Contoh merubah warna menggunakan CSS.

Hasil apabila kode diatas dibuka pada browser.

Hasil Merubah Warna Menggunakan CSS

Jika diperhatikan hasil keduanya sama yaitu h1 berwarna merah dan beberapa tulisan dalam paragraf berwarna kuning. Namun tentunya lebih enak apabila menggunakan CSS, untuk penulisan dan perubahanya dikemudian hari apabila ingin merubah warna huruf.

Sekarang kita lanjut ke pokok pembahasan yaitu perbedaan penulisan CSS inline, internal, dan external.

Penulisan CSS Inline

Penulisan CSS inline yaitu kita langsung menulis kode CSS pada tag HTML dengan cara menambahkan atribut style pada tag yang ingin diberi style. Contohnya adalah sebagai berikut :

Hasil kode diatas apabila dibuka pada browser.

Hasil Penulisan CSS Inline

Pada kode contoh diatas terdapat dua buah penulisan CSS inline yaitu terdapat pada baris nomor 8 dan 9. Pada baris nomor 8 kita merubah warna huruf heading dengan warna hijau yang kodenya style=”color:green;”. Kemudian kita juga dapat memasukkan beberapa property CSS dalam satu atribut style, yang contohnya terdapat pada baris nomor 9 yaitu style=”color:yellow; background-color: black;”. Yang fungsinya merubah warna huruf menjadi kuning, dan merubah background paragraf menjadi hitam.

Penulisan CSS Internal

Penulisan CSS internal penulisannya terdapat pada tag header dan didalam tag style pada HTML. Tujuan penulisan CSS internal adalah untuk memisahkan kode CSS dan HTML supaya lebih rapi dan lebih mudah mengaturnya. Contoh penulisannya sebagai berikut.

Pada contoh diatas jika dibuka pada browser tampilan warnanya sama seperti pada contoh CSS Inline, namun terdapat perbedaan penulisan seperti yang sudah saya jelaskan sebelumnya. Yaitu kode CSS terdapat pada tag header dan didalam tag style (lihat pada baris nomor 6 sampai 14).

Penulisan CSS External

Pada penulisan CSS external sedikit berbeda yaitu antara file HTML dan file CSS terpisah, kemudian file CSS tersebut disimpan dengan format .css. Untuk menggunakan file tersebut pada HTML kita tinggal memanggil file CSS tersebut pada HTML dengan menggunakan tag <link></link>. Maka dari itu kelebihan dari CSS external adalah jika kita sudah memiliki banyak file HTML dan memerlukan style yang sama kita tidak menulis ulang kode CSS lagi, namun dengan cara memanggil pada setiap file htmlnya. Contoh penulisan CSS internal adalah sebagai berikut.

Pertama kita menulis kode HTML terlebih dahulu, yang kodenya kurang lebih hampir sama dengan sebelumnya.

Kemudian simpan kode HTML diatas dengan nama css_external.html, langkah selanjutnya tulis kode CSSnya seperti berikut :

Kemudian simpan dengan nama style.css pada folder yang sama dengan file css_external.html. Dari kode diatas apabila file css_external.html dibuka pada browser, tampilan warnanya sama dengan contoh contoh CSS Inline.

Pada baris nomor 5 yang ada pada file css_external.html terdapat sebuah tag yang fungsinya untuk memanggil file CSS. Untuk aturan penulisan value pada atribut href memiliki aturan absolute dan relatif, sama seperti cara penulisan atribut href pada tag link di HTML. Penulisan CSS external seperti ini biasanya paling sering digunakan daripada penulisan CSS yang lainnya.

Semoga penjelasan penulisan CSS inline, internal dan external ini mudah kamu pahami, dan apabila kamu memiliki pertanyaan silakan tanyakan di kolom komentar di bawah.


Kolom Komentar

Related Post