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

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:

<!DOCTYPE html>
<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>

Cara Menginput CSS, Metode Inline Style

Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, 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 <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML.

Contoh penggunaan motode internal style sheets CSS:

<!DOCTYPE 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, 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 <style> ke sebuah halaman baru, dan savelah sebagai belajar.css

Isi dari file belajar.css :

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

Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh 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 adalah menggunakan @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 bagian url bisa berupa alaman relatif (seperti: folderku/belajar.css) maupun absolut (seperti www.duniailkom.com/belajar.css).

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

<!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>

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

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.

Untuk memudahkan penulisan, dalam penulisan tutorial belajar CSS di duniailkom, saya akan menggunakan metode internal style sheets, yaitu meletakkan kode CSS pada bagian head dari halaman. Hal ini semata-mata hanya untuk memudahkan menulis contoh. Untuk membuat website live, sangat direkomendasikan menggunakan external style sheets dengan cara @import atau link.

Dalam tutorial CSS selanjutnya, kita akan membahas secara lebih detail cara penulisan kode CSS dengan mempelajari Pengertian Selector, Property dan Value pada CSS.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

95 Comments

  1. akbar
    30 Apr 14
    • Andre
      03 May 14
    • Andre
      27 May 14
  2. Vendi
    19 Jul 14
    • Andre
      20 Jul 14
  3. Rahayu Puji
    25 Aug 14
    • Andre
      30 Aug 14
  4. Anonymous
    02 Sep 14
    • Andre
      05 Sep 14
  5. ibnu cahyadi
    14 Oct 14
    • Andre
      16 Oct 14
  6. manzalfi45
    18 Nov 14
    • Andre
      20 Nov 14
  7. Tahta Laksana
    02 Dec 14
    • Andre
      02 Dec 14
  8. safar
    12 Jan 15
    • Andre
      13 Jan 15
    • Andre
      13 Jan 15
  9. Muhammad Nursaid
    02 Mar 15
  10. Nurdianah
    06 Mar 15
  11. Bekiweb
    08 Jun 15
    • Andre
      10 Jun 15
      • Andy
        15 Jan 17
  12. Bahrudin
    23 Aug 15
  13. riska
    21 Sep 15
  14. Anonymous
    22 Sep 15
    • Andre
      22 Sep 15
  15. dwi minyiz
    07 Nov 15
    • Andre
      08 Nov 15
    • Andre
      15 Dec 15
  16. catur
    28 Dec 15
    • Andre
      29 Dec 15
  17. faturahman
    03 Jan 16
    • Andre
      03 Jan 16
  18. faturahman
    03 Jan 16
    • Andre
      04 Jan 16
  19. sela
    30 Apr 16
    • Andre
      01 May 16
  20. sukma
    30 Apr 16
  21. Anonymous
    13 Jun 16
  22. Bagas
    15 Jun 16
    • Andre
      16 Jun 16
  23. Piko
    22 Jun 16
    • Andre
      22 Jun 16
      • Piko
        23 Jun 16
        • Andre
          23 Jun 16
  24. ali
    24 Jun 16
    • Piko
      24 Jun 16
      • ali
        24 Jun 16
  25. Piko
    24 Jun 16
    • ali
      24 Jun 16
      • Piko
        24 Jun 16
      • Piko
        24 Jun 16
  26. ali
    24 Jun 16
  27. ali
    24 Jun 16
  28. Piko
    24 Jun 16
  29. ali
    24 Jun 16
  30. Nur Muhammad 'Ainul Yaqin
    05 Jul 16
    • Andre
      05 Jul 16
  31. Bagus Swastika
    31 Aug 16
    • Andre
      31 Aug 16
  32. Piko
    31 Aug 16
  33. Piko
    31 Aug 16
  34. herby saptiko
    24 Nov 16
  35. Anonymous
    28 Nov 16
    • Andre
      29 Nov 16
  36. anton giatmaka
    06 Jan 17
    • Andre
      08 Jan 17
  37. Andy
    15 Jan 17
    • Andre
      16 Jan 17
  38. Fathan Blogger
    16 Jan 17
    • Andre
      26 Mar 17
  39. zen
    15 Mar 17
    • Andre
      15 Mar 17
  40. Munazir Arif
    26 Mar 17
    • Munazir Arif
      26 Mar 17
    • Andre
      26 Mar 17
      • Munazir Arif
        26 Mar 17
  41. pencari ilmu
    09 Apr 17
    • Andre
      10 Apr 17
  42. agus jaya
    12 May 17
  43. Alwy
    24 May 17
    • Andre
      27 May 17
  44. Alwy
    29 May 17
  45. HekThatMan
    03 Jun 17
    • Andre
      05 Jun 17
  46. mizipedia
    05 Jun 17
  47. disvolution
    14 Aug 17
  48. Rizky Januar
    20 Oct 17

Add Comment