Blog

Web Development

3 Cara Memanggil CSS di HTML: Tutorial Termudah & Terlengkap

Siti Khadijah Azzukhruf Firdausi

•

02 August 2023

•

5232

CSS memegang peranan penting dalam mengatur struktur halaman web yang dibangun dengan HTML. Oleh sebab itu, developer wajib paham cara memanggil CSS di HTML.

Lebih lanjut, integrasi CSS ke dalam HTML bisa memperindah tampilan situs web milimu. Tertarik untuk mempelajarinya? Simak artikel ini sampai habis untuk informasi yang lebih detail!

Cara Memanggil CSS di HTML Lewat 3 Metode Utama
Seperti yang sudah dijelaskan sebelumnya, integrasi CSS dengan HTML adalah langkah penting dalam web development. Hal ini bertujuan untuk mengatur tampilan dan nuansa situs web.

Cara memanggil CSS di HTML dibagi menjadi beberapa metode utama. Masing-masing metode tersebut memiliki kelebihan dan keterbatasannya. Berikut adalah penjelasan lengkap tentang beberapa metode dan cara memanggil CSS dalam HTML:

1. Metode internal

Dibimbing.id - CSS HTML Metode Internal

Cara memanggil CSS di HTML yang pertama adalah menggunakan metode internal. Metode ini cocok dipakai untuk memanggil CSS saat kamu ingin memiliki satu halaman yang unik.

Memanggil dengan metode internal berarti menyampurkan tag HTML dengan script CSS. Cara ini didefinisikan pada tag <style></style>. Lalu, dibungkus pada tag <head></head>.

Berikut adalah penulisan CSS dengan metode Internal:

<!DOCTYPE html>

<html>

<head>

<title>Contoh metode internal</title>

<style>

h1 {

background-color: orange;

}

p {

background-color: black;

color: white;

}

</style>

</head>

<body>

<h1>Belajar CSS</h1>

<p>Memanggil css dengan metode internal</p>

</body>

</html>

Kelebihan Metode Internal

Kelebihan menggunakan metode internal saat memanggil CSS di HTML yaitu:

Style yang diberikan bisa lebih beragam. Kamu bisa mengatur style unik di setiap halaman sehingga menghasilkan gaya yang dinamis. Hal itu dikarenakan file CSS bisa berbeda dengan halaman lainnya.
Waktu pembuatan lebih efisien dan efektif. Hal itu dikarenakan file CSS disimpan pada halaman dengan tag <head></head>.

Kekurangan Metode Internal

Kekurangan menggunakan metode internal saat memanggil CSS di HTML yaitu:

Perlu memberi style di setiap halaman. Jadi, sebaiknya kamu meminimalisasi CSS jika menggunakan metode internal.
Butuh pengulangan unduhan CSS di setiap peralihan halaman. Hal itu dikarenakan metode internal tidak dapat di-cache oleh browser.

2. Metode external

Dibimbing.id - CSS HTML Metode Eksternal

Cara memanggil CSS di HTML selanjutnya bisa dilakukan dengan metode eksternal. Metode ini sangat disarankan untuk digunakan terutama saat script sudah banyak. Memanggil dengan metode external dapat diartikan bahwa kamu akan memisahkan file CSS itu sendiri.

Pemisahan antara file HTML dan file CSS membuat metode eksternal paling sering direkomendasikan dan digunakan dalam memanggil CSS. Penulisan CSS dengan metode External:

<!DOCTYPE html>

<html>

<head>

<title>Belajar CSS</title>

</head>

<body>

<h1>Belajar CSS</h1>

<p>Memanggil css dengan metode external</p>

</body>

</html>

Copy

Lighting

Editor Online

Ini file CSS yang terpisahnya

Berikut ini tampilan file mystyle.css:

h1 {

background-color: grey;

}

p {

background-color: red;

color: yellow;

}

Kelebihan metode external

Kelebihan menggunakan metode eksternal saat memanggil CSS di HTML yaitu:

Situs menjadi lebih cepat. Browser akan otomatis mengunduh halaman HTML dan file CSS tertaut saat ada pengunjung di websitemu.
Efisien karena bisa melakukan perubahan sekali saja pada satu file. Kaum bisa memperbarui semua halaman dengan memberi style pada satu file saja. Artinya, satu file CSS yang sama bisa digunakan di banyak halaman.
Browser akan otomatis melakukan cache di file CSS sehingga permintaan browser lebih ringan. Hal ini akan banyak membantu terutama jika file CSS yang kamu gunakan ukurannya besar.

Kekurangan metode external

Kekurangan menggunakan metode eksternal saat memanggil CSS di HTML yaitu:

Kamu harus menunggu hingga proses pemanggilan sempurna untuk melihat hasilnya. Halaman tidak akan tampil secara sempurna sampai file CSS selesai dipanggil.

3. Metode inline

Dibimbing.id - CSS HTML Metode Inline

Cara memanggil CSS di HTML terakhir adalah dengan menerapkan metode inline. Dengan metode, kamu bisa melakukan gaya sebaris. Metode ini bekerja dengan cara memasukkan CSS pada tag HTML secara langsung memakai atribut style.

Selain itu, metode inline sebaiknya dipakai jika kamu ingin menerapkan style unik untuk elemen tunggal. Kamu tinggal menambah atribut style ke elemen yang akan diberi CSS jika ingin menggunakan inline.

Berikut adalah penulisan CSS dengan metode inline:

<!DOCTYPE html>

<html>

<head>

<title>Contoh metode inline</title>

</head>

<body>

<h1 style=”color: blue;”>Belajar CSS</h1>

<p style=”color: yellow; background-color: green;”>Memanggil css dengan metode inline</p>

</body>

</html>

Kelebihan Metode Inline

Kelebihan menggunakan metode inline saat memanggil CSS di HTML yaitu:

Halaman lebih cepat karena tidak ada permintaan HTTP tambahan yang diperlukan.
Cocok untuk gaya dinamis. Metode inline bisa memberikan gaya dinamis di setiap halaman HTML. Misalnya, saat kamu ingin memberikan URL gambar di properti background image.
Prioritas tertinggi dibandingkan dua metode sebelumnya. Apabila kamu memakai ketiga metode bersamaan, maka cara memanggil CSS secara internal dan external akan tertimpa oleh inline.

Kekurangan Metode Inline

Kekurangan menggunakan metode inline saat memanggil CSS di HTML yaitu:

Perubahan yang rumit sebab harus dilakukan pada setiap halaman. Metode ini mencampurkan HTML dan CSS secara langsung sehingga mengubah gaya pada CSS akan menjadi rumit.

Itulah cara memanggil CSS di HTML melalui tiga jenis metode yang berbeda. Seperti yang sudah diungkapkan di atas, metode tersebut masing-masing memiliki keunggulan dan kekurangan. Jadi, kamu bisa memilihnya sesuai dengan kebutuhanmu.

Berbicara dengan HTML, apakah kamu tertarik untuk mempelajarinya lebih dalam? Jika iya, MinDi rekomendasikan kamu untuk ikut Bootcamp Frontend Web Development Dibimbing.

Lewat program ini, kamu bisa belajar HTML dari dasar hingga menggunakan tools penunjang. Selain itu, kamu juga bisa praktik dengan real-case project.

Program ini juga cocok untuk siapapun yang tertarik untuk belajar web development, termasuk pemula. Sebab, pembelajarannya dirancang dengan kurikulum beginner-friendly!

Menarik bukan? Yuk, segera daftar dan mulai karir di industri ini bareng Dibimbing.id!