Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / HTML

Cara Menginput Arahan Css Ke Halaman Html


  

Cara Menginput atau memasukan kode CSS ke dalam halaman HTML

HTML atau Hypertext Markup Language intinya  ialah kumpulan isyarat-aba-aba dalam bentuk tag yang disusun untuk memperlihatkan memperlihatkan objek berupa teks, gambar, audio, dan video, ataupun dokuen yang lain. Tag-tag tersebut dibentuk menurut fungsi dan kegunaannya, mirip untuk menciptakan tabel , untuk membuat paragraf

, dan lain-lain.

Nah CSS atau Cascading Style Sheet dipakai untuk merancang tag-tag HTML tersebut supaya mampu tampil lebih anggun sesuai dengan keingingn kita.

Sekarang bagaimana cara memasukan dan memadukan arahan CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan aba-aba CSS ke dalam dokumen HTML ialah

  1. Inline Style 
  2. Internal Style 
  3. External Style 

1. Metode Inline Style Sheet

Metode Inline Style Sheet merupakan cara memasukan/menginput aba-aba CSS secara eksklusif ke dalam arahan di dalam HTML dalam ruang lingkup tag dengan menggunakan atribut style. Berikut pola penggunaan metode Inline Style CSS :



     Contoh Inline Style CSS

   
     


         Text ini akan bewarna putih dengan background warna biru
     


   
Jika script di atas dilaksanakan di browser, maka akan tampil mirip di bawah ini :


2. Metode Internal Style Sheets 

Metode Internal Style Sheets atau disebut juga Embedded Style Sheets. Dengan metode ini instruksi CSS dipisahkan dari tag HTML,  tetapi nasih tetap ditulis dalam satu halaman HTML.
Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada suatu tag


   


        Text ini akan bewarna putih dengan latar belakang merah
   



Jika script di atas dilakukan di browser, maka akan tampil seperti di bawah ini :



3. Metode External Style Sheet


 Kalau kita amati dua sistem di atas adalah inline style sheet dan internal style sheet, semua kode css digabung di dalam kode HTML, sehingga jika ada halaman html lainnya, yang memerlukan style yang serupa, maka halaman tersebut pun harus memasukan arahan css yang serupa. Tentu saja hal ini membuat isyarat semua halaman html menjadi panjang. Jika ada kesalahan script tentu sungguh report bagi seorang web programmer.
Kaprikornus kekurangan dan kelemahan kedua tata cara tersebut yaitu bila ingin menciptakan beberapa halaman dengan performa yang sama, maka setiap halaman akan memiliki arahan CSS yang serupa.

Untuk menanggulangi kelemahan dan kelemahan kedua tata cara di atas, maka diciptkanlah tata cara yang ketiga ialah Metode External Style Sheets.

Metode External Style Sheets memisahkan semua aba-aba CSS dari  semua aba-aba HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga bila file HTML membutuhkan aba-aba css, maka cukup memanggil kode tersebut dengan mengundang filenya, tidak butuhmenuliskan instruksi css-nya.

Sebagai contoh, kita gabungkan format css dari dua tata cara sebelumnya, dan disimpan dalam suatu file yang ber-extensi css.

h1
        background-color:blue;
        color:white;
       
h2
        background-color:red;
        color:white;
       
simpan kode di atas ke dalam suatu file berjulukan instruksi.css

Kemudian buat sebuah fie HTML dengan memakai instruksi css yang ada di dalam file isyarat.css
dan disimpan di dalam folder yang serupa dengan file kode.css.

Bagaimana cara memanggil file instruksi.css?

Ada 2 cara memanggil file css dari suatu halaman html.
Yang pertama dengan memakai tag



    Contoh External Style CSS
    rel="stylesheet" type="text/css" href="kode.css">

   

 Judul ini ini bewarna putih dan background warna biru


   

 Sub Judul ini bewarna putih dan background warna merah




Yang kedua dengan memakai tag 


   

Judul ini ini bewarna putih dan background warna biru


   

Sub Judul ini bewarna putih dan background warna merah