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

Kamis, 29 Oktober 2020

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

Diterbitkan

Jika dalam tutorial CSS sebelumnya kita telah mempelajari Pengertian CSS, pada tutorial kali ini kita akan membahas cara menginput kode CSS ke halaman HTML.


Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya  adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu, seperti paragraf, list, tabel dan sebagainya. CSS digunakan untuk mendesain tag-tag HTML ini.


Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, 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:





     Contoh Inline Style CSS

   
      

         Text ini akan bewarna putih dan background warna hitam

Cara Menginput CSS, Metode Inline Style


Dalam kode diatas, saya menyisipkan atribut style pada tag

, 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


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


    


        Text ini akan bewarna putih dan background warna hitam
    




Contoh metode internal style sheets diatas sudah jauh lebih baik daripada 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


Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman akan memiliki kode CSS yang sama.


Metode External Style Sheets digunakan untuk ‘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 kita akan pindahkan isi dari tag


    


        Text ini akan bewarna putih dan background warna hitam
    




Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag