Dimanakah lokasi dalam dokumen HTML yang merupakan tempat yang tepat untuk merujuk ke eksternal

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.

Table of Contents Show

3 Cara Penulisan Kode CSS
Penulisan CSS Secara Inline
Penulisan CSS Secara Internal
Penulisan CSS Secara Eksternal
Menghubungkan File CSS dengan File HTML
Menghubungkan File CSS dan File HTML yang Berbeda Folder
Menghubungkan File CSS Secara Online
Menghubungkan Lebih dari Satu File CSS
Pendinginan
Video yang berhubungan

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>

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>

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; }

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

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 .

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.

Meskipun di dalam folder masih ada folder lagi.

src/ ├── assets/ │ └── css/ │ └── style.css └── index.html

Penerapan kode.

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.

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.

Bagaimana jika keduanya berada dalam folder terpisah?

src/ ├── assets/ │ └── style.css └── pages/ └── index.html

Solusinya

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.

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

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.

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

Menempatkan style CSS dalam dokumen yang dibuat dalam bahasa HTML dapat dilakukan dalam beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya menggunakan Inline Style, Internal Style, External Style, dan juga teknik Importing dengan Internal Style.

a. Inline Style

CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh dokumen web. Contohnya adalah sebagai berikut :

<!DOCTYPE html>

<html>

<head>

<title>Inline Style</title>

</head>

<body>

<font style=’arial; font-family:Arial; font-

size:20px;background-color:yellow’>Penerapan Inline

Style</font>

</body>

</html>

Dalam script di atas dapat diketahui bahwa style tersebut memiliki nama style arial yang memiliki nilai atau value untuk style tersebut. Dari script di atas dapat dilihat tampilan dalam browser seperti pada Gambar berikut ini.

b. Internal Style

Pada teknik ini style diletakkan pada tengah tag antara tag <head> dan </head>. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Perhatikan contoh berikut :

<!DOCTYPE html>

<html>

<head>

<title>Internal Style</title>

<style>

body {background-color:lightgrey;}

h1 {color:blue;}

p {color:green;}

</style>

</head>

<body>

<h1>Ini adalah Style Heading 1 yang sudah diubah</h1>

<p> Ini adalah Style Paragrap yang sudah diubah </p>

</body>

</html>

Maksud dari script di atas adalah mengatur style pada elemen body dengan warna latar belakang abu-abu muda, <h1> dengan warna biru, dan tag <p> dengan warna hijau. Hasil script di atas dalam browser dapat dilihat di bawah ini.

c. Imported Style

Dengan teknik ini sebuah style tidak disimpan pada halaman tersebut. Namun untuk menghubungkannya dengan halaman web yang dibuat, demgam menggunakan import yang terdapat pada style CSS. Perhatikan contoh berikut :

<!DOCTYPE html>

<html>

<head>

<title>Import Style</title>

@import url(http://www.namasitus.com/global.css);

</style>

</head>

<body>

<div class=blog>Penerapan Import Style</div>

</body>

</html>

Dari script di atas, dokumen HTML akan mengambil atau meng-import style CSS untuk dalam dokumen tersebut. Dimana pada contoh di atas dokumen akan mengimpor file style dengan nama global yang berekstensi .css pada alamat url http://www.namasitus.com dengan menggunakan perintah berikut :

@import url(http://www.namasitus.com/global.css);

d. Eksternal Style

Dengan menggunakan teknik ini, dapat memanggil CSS style pada file CSS yang diinginkan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan ke dalam sebuah CSS style eksternal dengan nama yang telah ditentukan. Perhatikan contoh berikut :

Pada contoh di atas menghubungkan sebuah dokumen HTML dengan sebuah eksternal style dengan nama default.css yang telah dibuat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen HTML tersebut.

Dalam mengimpor file CSS, dapat langsung mengimpor beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen. Perhatikan contoh berikut :

Atau dapat menggunakan perintah :

<style>

@import url(default1.css);

@import url(default2.css);

@import url(default3.css);

</style>