Estimasi Waktu Baca: 4 menit

Artikel ini merupakan artikel #02 dari seri Tutorial CSS Dasar untuk Pemula. Pada artikel kali ini kita akan bahas mengenai 3 cara penulisan kode CSS atau style sheet untuk dokumen HTML. Jika kalian sekiranya sudah paham tentang topik materi di bawah ini, mungkin bisa lanjut ke materi berikutnya Struktur dan Sintaks Dasar CSS.

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
Penutup
Referensi

Pemanasan

Pada materi sebelumnya kita sudah menyinggung sedikit mengenai cara penulisan css untuk dokumen HTML, namun pembahasannya hanya seputar nama dan definisinya saja.

Sekarang, kita coba bahas lebih dalam masing-masing cara tersebut.

3 Cara Penulisan Kode CSS

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.

Penulisan CSS Secara Inline

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>
Penulisan Secara Inline CSS
Hasil Keluaran Secara Inline CSS

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

Penulisan CSS Secara Internal

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>
Penulisan Secara Internal CSS
Hasil Keluaran Secara Internal CSS

Cara ini masih bersifat boleh meskipun bukan rekomendasi.

Penulisan CSS Secara Eksternal

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

Kode HTML


<h1>Halo Dunia</h1>

Kode CSS


h1{
    background-color: black;
    color: pink;
}
Penulisan Secara Eksternal CSS
Hasil Keluaran Secara Eksternal CSS

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

Selanjutnya akan mulai kita bahas bagaimana cara menghubungkannya secara eksternal.

Menghubungkan File CSS dengan File HTML

Untuk menghubungkan CSS dengan dokumen HTML secara eksternal, kita perlu sebuah tag bernama <link> dengan atribut href yang nilainya berupa url atau lokasi dari file CSS yang akan kita panggil atau hubungkan.

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 kita definisikan karena menyatakan hubungan antara dokumen terkait dan dokumen yang akan kita hubungkan.

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 dan File HTML 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 tak usah kita permasalahkan, 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>

Pendinginan

Pada kesempatan kali ini kita sudah belajar mengenai tiga cara penulisan style sheet dan cara menghubungkan file CSS dengan File HTML secara eksternal baik offline maupun online

Lalu apa selanjutnya?

Selanjutnya kita akan mempelajari tentang Struktur dan Sintaks Dasar CSS.

Referensi

[1] Types of CSS (Cascading Style Sheet) - GeeksforGeeks
[2] How CSS is structured - MDN