cloud-hosting-terbaik-indonesia

Tutorial Belajar CSS Part 2: Cara Menginput Kode CSS ke Halaman HTML

Posted on

Jikalau pada panduan CSS sebelumnya kita telah mempelajari Pengertian CSS, di panduan kali ini kita akan membahas cara menginput kode CSS ke halaman HTML.

Dari yang telah dipelajari di ketika pembahasan mengenai HTML (di artikel tutorial belajar HTML), HTML di dasarnya  yaitu kumpulan dari tag-tag yang disusun sehingga mempunyai bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan bagi mendesain tag-tag HTML ini.

Secara garis besar, terdapat 3 cara menginput kode CSS ke pada HTML, yaitu sistem Inline Style, Internal Style Sheets, dan External Style Sheets.


Sistem Inline Style

Sistem Inline Style yaitu cara menginput kode CSS seketika ke pada tag HTML dengan menggunakan atribut style, contoh pemakaian Sistem Inline Style CSS yaitu selaku berikut:

Pada kode diatas, saya menyisipkan atribut style di tag <h2>, nilai dari atribut style ini yaitu kode CSS yang ingin diaplikasikan.

Pemakaian tag CSS seperti ini walaupun mudah, namun tak disarankan, karena kode CSS seketika tergabung dengan HTML, dan tak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.


Sistem Internal Style Sheets

Sistem Internal Style Sheets, atau disebut pun Embedded Style Sheets digunakan bagi memisahkan kode CSS dari tag HTML namun tetap pada satu halaman HTML. Atribut style yang sebelumnya berada di pada tag, dikumpulkan di di sebuah tag <style>. Tag style ini mesti berada di bagian <head> dari halaman HTML.

Contoh pemakaian motode internal style sheets CSS:

Contoh sistem internal style sheets diatas telah jauh lebih bagus daripada inline style, karena kita telah memisahkan CSS dari HTML. Seluruh kode CSS akan berada di tag head dari HTML.

Namun kekurangan menggunakan  internal style sheets, sekiranya kita mempunyai beberapa halaman dengan style yang sama, karenanya kita mesti merancang kode CSS di masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan sistem external style sheets.


Sistem External Style Sheets

Kekurangan dari sistem internal style sheets sebelumnya yaitu sekiranya ingin merancang beberapa halaman dengan tampilan yang sama, karenanya setiap halaman akan mempunyai kode CSS yang sama.

Sistem External Style Sheets digunakan bagi ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.

Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama-tama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah selaku belajar.css

Isi dari file belajar.css :

Pastikan bahwa akhiran dari file tersebut yaitu .css dan bagi kebutuhan contoh kali ini, savelah di folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara bagi menginput Kode CSS tersebut ke halaman HTML, yang pertama-tama yaitu menggunakan @import

Contoh pemakaian @import CSS:

Bagi sistem @import external style sheets ini, kita menyisipkan @import url(belajar.css); di tag <style>. Tempat tinggal di bagian url dapat berupa alaman relatif (seperti: folderku/belajar.css) maupun absolut (seperti www.duniailkom.com/belajar.css).

Cara input kedua external style sheets, yaitu menggunakan tag <link>. Berikut contohnya:

Di sistem link external style sheets ini, kita menggunakan atribut href di tag <link>, yang akan berisi domisili dari halaman CSS, pada hal ini belajar.css

Dari ketiga jenis cara input CSS ke pada halaman HTML, yang sangat direkomendasikan yaitu sistem external style sheets, bagus menggunakan @import maupun dengan tag <link
>
. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan sekiranya kita ingin mengubah seluruh tampilan halaman situs, kita hanya butuh mengubah 1 file CSS saja.

Bagi mempermudah penulisan, pada penulisan panduan belajar CSS di duniailkom, saya akan menggunakan sistem internal style sheets, yaitu meletakkan kode CSS di bagian head dari halaman. Hal ini semata-mata hanya bagi mempermudah menulis contoh. Bagi merancang situs live, amat direkomendasikan menggunakan external style sheets dengan cara @import atau link.

Pada panduan CSS berikutnya, kita akan membahas secara lebih detail cara penulisan kode CSS dengan mempelajari Pengertian Selector, Property dan Value pada CSS.


eBook CSS Uncover Duniailkom

Jikalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/