Blog

Web Development

Cara Memanggil CSS di HTML dengan Efektif dan Praktis

Irhan Hisyam Dwi Nugroho

•

02 August 2023

•

17165

Catatan Redaksi:

Artikel ini pertama kali diterbitkan pada Agustus 2023 dan diperbarui pada 27 Mei 2025 untuk memastikan informasi tetap akurat dan relevan.

Cara memanggil CSS di HTML penting banget supaya website kamu tampil menarik dan profesional, Warga Bimbingan. Banyak yang masih bingung soal teknik yang tepat agar desain web mudah diatur dan efektif.

MinDi tahu kamu pengen hasil terbaik tanpa ribet, kan? Yuk, simak penjelasan lengkap dari MinDi tentang cara memanggil CSS di HTML yang praktis supaya kamu makin jago bikin website kece!

Pengertian Memanggil CSS di HTML

Memanggil CSS di HTML adalah cara menghubungkan kode CSS dengan halaman HTML agar tampilan website bisa diatur dengan baik.

CSS (Cascading Style Sheets) berfungsi untuk mengatur desain dan tata letak elemen HTML.

Ada beberapa metode untuk memanggil CSS, yaitu inline, internal, dan eksternal. Dengan memanggil CSS, kamu bisa membuat tampilan web yang lebih menarik dan konsisten tanpa mengubah struktur HTML secara langsung.

Tiga Cara Memanggil CSS di HTML

Sumber: Canva

Terdapat tiga cara memanggil CSS di HTML yang perlu kamu tahu. Masing-masing punya kelebihan untuk desain web mu. Yuk, cek penjelasannya!

1. Inline CSS

Inline CSS adalah metode menambahkan style langsung pada tag HTML menggunakan atribut style.

Cara ini cocok untuk mengubah tampilan satu elemen spesifik tanpa mempengaruhi elemen lain. Namun, penggunaan inline CSS tidak efisien untuk styling banyak elemen karena harus ditulis berulang kali.

<p style="color: blue; font-size: 18px;">Ini adalah paragraf dengan Inline CSS.</p>

Penjelasan:

Kode di atas memberikan style langsung pada elemen <p> menggunakan atribut style. Warna teks diatur menjadi biru dan ukuran font menjadi 18 piksel. Ini hanya berlaku untuk paragraf tersebut, tidak mempengaruhi elemen lain di halaman

2. Internal CSS

Internal CSS ditulis di dalam tag <style> yang biasanya diletakkan di bagian <head> dari dokumen HTML.

Metode ini memungkinkan kamu membuat aturan styling yang berlaku untuk seluruh halaman tanpa membuat file CSS terpisah.

Namun, jika digunakan untuk banyak halaman, internal CSS bisa membuat file HTML menjadi besar dan sulit di-maintain.

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: green;

font-size: 20px;

}

</style>

</head>

<body>

<p>Ini adalah paragraf dengan Internal CSS.</p>

</body>

</html>

Penjelasan:

Di contoh ini, CSS ditulis di dalam tag <style> pada bagian <head>. Semua elemen <p> di halaman akan memiliki teks berwarna hijau dengan ukuran font 20 piksel. Cara ini membuat styling mudah diubah tanpa menyentuh tag HTML satu per satu.

3. Eksternal CSS

Eksternal CSS menggunakan file .css yang terpisah dan dihubungkan ke file HTML melalui tag <link>.

Ini adalah metode paling efisien dan direkomendasikan untuk website dengan banyak halaman karena memudahkan pengelolaan dan penggunaan ulang stylesheet.

Semua aturan CSS disimpan di satu tempat, sehingga kamu hanya perlu mengubah satu file untuk memperbarui tampilan seluruh situs.

Struktur Folder:

/project-folder

│

├── index.html

└── css

└── styles.css

Index.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Ini adalah paragraf dengan Eksternal CSS.</p>

</body>

</html>

css/styles.css:

p {

color: red;

font-size: 22px;

}

Penjelasan:

File index.html menghubungkan file CSS eksternal yang berada di dalam folder css menggunakan tag <link> di bagian <head>.

File styles.css berisi aturan untuk mengubah warna teks paragraf menjadi merah dan ukuran font menjadi 22 piksel.

Struktur folder seperti ini membantu menjaga proyek lebih terorganisir dan memudahkan pengelolaan stylesheet di proyek yang lebih besar.

Keuntungan Memanggil CSS Eksternal

Sumber: Canva

CSS eksternal membuat pengelolaan website lebih mudah dan efisien, Warga Bimbingan. Metode ini favorit untuk situs besar dan profesional. Yuk, simak tiga keuntungan utamanya!

1. Pengelolaan Kode yang Lebih Mudah

Dengan CSS eksternal, semua aturan style disimpan dalam satu file terpisah yang mudah diakses dan diedit.

Ini memudahkan pengembang untuk melakukan perubahan tanpa harus mengutak-atik kode HTML satu per satu. Selain itu, pengelolaan file CSS terpusat mengurangi risiko duplikasi kode dan inkonsistensi tampilan.

2. Meningkatkan Performa Website

Memanggil CSS dari file eksternal memungkinkan browser untuk menyimpan (cache) file tersebut.

Dengan cache, file CSS tidak perlu dimuat ulang setiap kali pengguna membuka halaman baru, sehingga mempercepat waktu loading website. Performa yang lebih cepat juga meningkatkan pengalaman pengguna secara keseluruhan.

3. Reusabilitas dan Konsistensi Desain

Satu file CSS eksternal bisa digunakan untuk banyak halaman dalam sebuah website, menjaga konsistensi tampilan di seluruh situs.

Ini membuat desain lebih seragam dan mudah dikontrol dari satu tempat. Jika ada perubahan gaya, cukup edit file CSS saja, dan semua halaman akan otomatis terupdate.

Ingin Jadi Web Developer Profesional?

Setelah memahami cara memanggil CSS di HTML dengan efektif dan praktis, saatnya kamu aplikasikan ilmu ini untuk membangun website keren dan profesional!

Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan belajar CSS, HTML, dan desain web modern dengan mentor berpengalaman dan kurikulum yang aplikatif.

Dengan dukungan lebih dari 840+ hiring partner dan 95% tingkat keberhasilan alumni, peluang kariermu di dunia IT dan desain web semakin terbuka luas!

Jadi, tunggu apa lagi? Hubungi dibimbing.id dan daftar sekarang juga di sini! Mulai perjalananmu jadi Web Developer profesional. #BimbingSampeJadi

Referensi

How to add CSS [Buka]
How to Link CSS to HTML [Buka]