02 - Cara Menginput Instruksi Css Ke Halaman Html

Edit

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

Sebagaimana telah dipelajari pada ketika pembahasan ihwal HTML (pada artikel tutorial berguru HTML), HTML intinya adalah kumpulan dari tag-tag yang disusun sehingga mempunyai bagian-bagian tertentu, menyerupai paragraf, list, tabel dan sebagainya. CSS dipakai untuk mendesain tag-tag HTML ini.

Secara garis besar, terdapat 3 cara menginput arahan CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style

Metode Inline Style yaitu cara menginput arahan CSS pribadi ke dalam tag HTML dengan memakai atribut style, rujukan penggunaan Metode Inline Style CSS yaitu sebagai berikut:

<html>

 <head>

      <title>Contoh Inline Style CSS</title>

 </head>

    <body>

       <h2 style="background-color:black; color:white" >

          Text ini akan bewarna putih dan background warna hitam

       </h2>

    </body>

 </html>

<html>

 <head>

     <title>Contoh Inline Style CSS</title>

     <style type="text/css">

         h2 {

         background-color:black;

         color:white;

}

     </style>

 </head>

 <body>

     <h2>

         Text ini akan bewarna putih dan background warna hitam

     </h2>

 </body>

 </html>

Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, alasannya yaitu kita sudah memisahkan CSS dari HTML. Seluruh arahan CSS akan berada pada tag head dari HTML.

Namun kekurangan memakai internal style sheets, jikalau kita mempunyai beberapa halaman dengan style yang sama, maka kita harus menciptakan arahan CSS pada masing-masing halaman tersebut. Hal ini sanggup diatasi dengan memakai metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya yaitu jikalau ingin menciptakan beberapa halaman dengan tampilan yang sama, maka setiap halaman akan mempunyai arahan CSS yang sama.

Metode External Style Sheets dipakai untuk ‘mengangkat’ arahan CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan arahan CSS, tinggal ‘memanggil’ file CSS tersebut.

Masih memakai rujukan yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

1

2

3

4

 h2 {
 background-color:black;
 color:white;
 }

Pastikan bahwa akhiran dari file tersebut yaitu .css dan untuk keperluan rujukan kali ini, savelah pada folder yang sama dengan halaman HTML kita.

Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS tersebut ke halaman HTML, yang pertama yaitu memakai @import

Contoh penggunaan @import CSS:

 <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <style type="text/css">
         @import url(belajar.css);
     </style>
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
 </body>
 </html>

Untuk metode @import external style sheets ini, kita menyisipkan @import url(belajar.css); pada tag <style>. Alamat pada bab url sanggup berupa alaman relatif (seperti: folderku/belajar.css) maupun otoriter (seperti www.duniailkom.com/belajar.css).

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

Pada metode link external style sheets ini, kita memakai atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal ini belajar.css

  <!DOCTYPE html>
 <html>
 <head>
     <title>Contoh Inline Style CSS</title>
     <link rel="stylesheet" type="text/css" href="belajar.css">
 </head>
 <body>
     <h2>
         Text ini akan bewarna putih dan background warna hitam
     </h2>
 </body>
 </html>
 
 