Estimasi Waktu Baca: 4 menit
Daftar Isi

Pemanasan β˜•
3 Cara Penulisan CSS πŸ“
    Inline CSS πŸ“‘
    Internal CSS πŸ“„
    Eksternal CSS πŸ“„πŸ”—πŸ“„
Menghubungkan CSS dengan HTML πŸ”—
    Menghubungkan File CSS Berbeda Folder πŸ“‚
    Menghubungkan File CSS Secara Online 🌐
Kesimpulan πŸ“‹
Penutup πŸšͺ

Pemanasan β˜•

Artikel ini merupakan artikel ketiga dari seri Tutorial CSS Dasar.

Pada artikel kali ini akan dibahas mengenai:

  • Bagaimana cara memanggil atau menghubungkan kode CSS dengan dokumen HTML❓
  • Bagaimana menghubungkan file CSS yang berbeda tempat dengan dokumen HTML❓
  • Bagaimana menghubungkan file CSS secara online❓

Baik, tanpa berlama-lama lagi mari kita langsung mulai pembahasannya….

3 Cara Penulisan Style Sheet πŸ“

Sebelum mulai belajar menghubungkan file CSS dengan dokumen HTML, kita sejenak perlu mengingat kembali mengenai 3 cara penulisan CSS. Karena hal ini ada kaitannya dengan pembahasan kali ini.

Terdapat 3 cara penulisan CSS antara lain:

  • Inline CSS
  • Internal CSS
  • Eksternal CSS

*Catatan: beberapa sumber lain menyebutnya sebagai Inline style sheet, Internal style sheet, dan Eksternal style sheet. Sama saja.

Masing-masing cara akan dijabarkan di bawah ini….

Inline CSS πŸ“‘

Inline CSS adalah cara mengatur gaya (style) dengan menulisnya secara langsung di dalam tag HTML dengan menggunakan atribut style.


<h1 style="background-color: black; color:pink;"> Hello World! </h1>

Cara ini sangat tidak direkomendasikan, karena membuat dokumen HTML terlihat buruk, karena harus menyisipkan kode CSS secara langsung dalam elemen HTML.

Namun jika memang cara ini terpaksa digunakan karena suatu hal, maka diperbolehkan walaupun sangat tidak disarankan.

Internal CSS πŸ“„

Internal CSS merupakan cara menentukan style dengan menulis kode CSS di dalam tag <head> dengan menggunakan tag <style>


<head>
  <style>
     h1{
         background-color: black;
         color: pink;
     }
  </style>
</head>

Cara ini masih diperbolehkan meskipun bukan rekomendasi.

Eksternal CSS πŸ“„πŸ”—πŸ“„

Merupakan cara penulisan gaya dengan memisahkan antara dokumen HTML dengan lembar gaya (style sheet), yang mana kode CSS ini nantinya akan disimpan pada file berekstensi .css.

Kode HTML


<h1>Halo Dunia</h1>

Kode CSS


h1{
    background-color: black;
    color: pink;
}

Dari ketiga cara tersebut, cara penulisan CSS secara ekternal lah yang paling direkomendasikan. Karena kita tidak menyisipkan kode secara langsung pada dokumen HTML.

Maka dari itu untuk tutorial ini akan dibahas bagaimana cara memanggil atau menghubungkan kode CSS dengan dokumen HTML secara eksternal.

Menghubungkan CSS dengan HTML πŸ”—

Untuk menghubungkan CSS dengan dokumen HTML secara eksternal diperlukan sebuah tag bernama <link> dengan atribut href dengan nilai berupa url atau lokasi dari file CSS yang akan dipanggil atau dihubungkan.

Tag <link> merupakan tag yang berdiri sendiri tanpa ada penutup. Tag ini nantinya dideklarasikan dalam tag <head>.


<head>
  <link rel="stylesheet" href="url_file.css">
</head>

Dalam tag <link> ada yang namanya atribut rel. Atribut ini penting dan wajib didefinisikan karena menyatakan hubungan antara dokumen terkait dan dokumen yang dihubungkan.

Lanjut, sekarang kita punya file HTML dan file CSS dalam satu folder. Lantas bagaimana cara kita menggabungkan atau menghubungkan keduanya?


src/
β”œβ”€β”€ index.html
└── style.css

Solusinya adalah kita tinggal tulis saja nama dari file CSS terkait. Hal ini karena lokasi dari file HTML dan file CSS berada dalam satu tempat .


<head>
  <link rel="stylesheet" href="style.css">
</head>

Bagaimana bila lokasi file HTML dan file CSS berbeda?

Oke kita akan bahas di bawah….

Menghubungkan File CSS yang Berbeda Folder πŸ“‚

Contoh sebelumnya menunjukkan bahwa antara file HTML dan file CSS berada pada satu tempat atau tingkatan.


src/
β”œβ”€β”€ index.html
└── style.css

Lantas sekarang bagaimana menghubungkan antara keduanya, bila file HTML dan file CSS berbeda tempat?

Contoh kasus file CSS berada dalam folder assets/.


src/
β”œβ”€β”€ assets/
β”‚   └── style.css
└── index.html

Solusinya adalah kita juga harus mendefinisikan nama foldernya diikuti dengan tanda garis miring atau slash (/) untuk masuk ke dalam folder terkait.


<head>
  <link rel="stylesheet" href="assets/style.css">
</head>

Meskipun di dalam folder masih ada folder lagi.


src/
β”œβ”€β”€ assets/
β”‚   └── css/
β”‚       └── style.css
└── index.html

Penerapan kode.


<head>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

Nah sekarang ganti kasus lagi, bagaimana jika file CSS-nya yang berada di luar? sedangkan file HTML berada di dalam suatu folder?


src/
β”œβ”€β”€ pages/
β”‚   └── index.html
└── style.css

Solusinya adalah kita gunakan tanda titik-titik (..) dengan diikuti garis miring atau slash. Hal ini mengisyaratkan bahwa kita keluar dari folder terkait.


<head>
  <link rel="stylesheet" href="../style.css">
</head>

Artinya, file index.html akan memanggil file style.css dengan cara keluar dari folder pages/ terlebih dahulu,

Bagaimana jika file HTML nya berada di dalam folder lagi?


src/
β”œβ”€β”€ pages/
β”‚   └── home/
β”‚       └── index.html
└── style.css

Maka kita definisikan lagi titik-titiknya sesuai jumlah folder yang menyimpan file HTML.


<head>
  <link rel="stylesheet" href="../../style.css">
</head>

Bagaimana jika keduanya berada dalam folder terpisah?


src/
β”œβ”€β”€ assets/
β”‚   └── style.css       
└── pages/
    └── index.html

Solusinya


<head>
  <link rel="stylesheet" href="../assets/style.css">
</head>

Titik-titiknya kita definisikan satu kali karena file HTML hanya memerlukan keluar dari folder pages/ yang kemudian diikuti masuk ke dalam folder assets/ untuk memanggil file CSS.

Menghubungkan File CSS Secara Online 🌐

Selain secara offline, kita juga dapat menghubungkan atau mengintegerasikan lembar gaya secara online.

Caranya cukup mudah kita tinggal isikan atribut href dalam tag <link> dengan url dari file CSS terkait.


<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

Tapi perlu diperhatikan cara ini pastinya membutuhkan koneksi internet, jika tidak ada koneksi internet maka dapat dipastikan style tidak akan dimuat.

Dengan kata lain, kita nantinya akan gagal untuk terhubung ke file CSS tersebut.

Menghubungkan Lebih dari Satu File CSS

Kita juga dapat menghubungkan lebih dari satu file CSS dengan cara mendefinisikan tiap tag <link>.


<head>
  <link rel="stylesheet" href="url_file.css">
  <link rel="stylesheet" href="url_file.css">
</head>

Untuk urutannya tidak dipermasalahkan, kita bisa bolak balik, entah ingin mendeklarasikan file style.css terlebih dahulu atau file bootstrap.min.css terlebih dahulu.


<head>
  <link rel="stylesheet" href="assets/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

Kesimpulan πŸ“‹

Setelah mempelajari materi ini, kita dapat mengambil beberapa poin penting antara lain:

  • Terdapat 3 cara menulis style yaitu inline, internal, dan eksternal
  • Ada dua cara menghubungkan file CSS dengan dokumen HTML, cara pertama secara offline, cara kedua secara online.
  • Untuk menghubungkan dokumen HTML dan dokumen CSS yang berbeda folder bisa dengan mendefinisikan nama foldernya dilanjut nama file CSS terkait.
  • Bila file CSS-nya berada di luar folder yang menyimpan dokumen HTML, maka gunakan tanda titik-titik (..) untuk keluar dari folder terkait.
  • Sedangkan bila file CSS-nya diakses secara online maka definisikan url-nya dan pastikan koneksi internet juga menyala.
  • Kita juga dapat mendefinisikan lebih dari satu file CSS ke dalam satu dokumen HTML dengan cara mendeklarasikan tiap tag <link>.

Pendinginan 🍦

Pada kesempatan kali ini kita sudah belajar mengenai:

  • 3 cara penulisan style sheet βœ…
  • Cara menghubungkan file CSS dengan File HTML baik secara offline maupun secara online βœ…

Lalu apa selanjutnya?

Selanjutnya kita akan mempelajari tentang 5 Selektor Dalam CSS.