Background Image

Postingan

Memulai Dengan CSS : Cara Menghubungkan CSS Ke HTML

Dalam membuat sebuah halaman web, kita membutuhkan dua komponen utama: HTML untuk membuat struktur atau kerangka halaman, dan CSS untuk mengatur tampilannya agar lebih menarik.

Gambar Memulai Dengan CSS : Cara Menghubungkan CSS Ke HTML
29 Juli 2025 10:30 Arif Shabana CSS

 Dalam membuat sebuah halaman web, kita membutuhkan dua komponen utama: HTML untuk membuat struktur atau kerangka halaman, dan CSS untuk mengatur tampilannya agar lebih menarik. Namun, CSS tidak langsung bekerja begitu saja — kita perlu menghubungkan CSS ke HTML agar gaya atau desain yang kita buat bisa ditampilkan di halaman web. Artikel ini akan menjelaskan cara-cara menghubungkan CSS ke HTML dengan sederhana dan mudah dipahami, baik untuk pemula maupun yang sedang belajar web development. 

Terdapat tiga cara utama untuk menghubungkan CSS ke HTML, yaitu External CSS, Internal CSS, dan Inline CSS. Berikut penjelasan masing-masing metode:

1. External CSS

Metode ini adalah cara paling umum dan direkomendasikan. File CSS ditulis secara terpisah dan dihubungkan ke file HTML melalui tag <link> yang diletakkan di dalam tag <head>.

Contoh struktur folder:

project/

├── index.html

└── style.css

Isi index.html:

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

  <title>Contoh External CSS</title>

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

</head>

<body>

  <h1>Selamat Datang!</h1>

</body>

</html>

Isi style.css:

h1 {

  color: blue;

  text-align: center;

  font-family: Arial, sans-serif;

}

Kelebihan:

  • Kode lebih rapi dan mudah dikelola
  • Dapat digunakan ulang di banyak halaman

2. Internal CSS

CSS ditulis langsung di dalam file HTML menggunakan tag <style> di bagian <head>. Cocok untuk halaman tunggal dengan kebutuhan styling sederhana.

Contoh:

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

  <title>Contoh Internal CSS</title>

  <style>

    h1 {

      color: green;

      text-align: center;

    }

  </style>

</head>

<body>

  <h1>Ini Internal CSS</h1>

</body>

</html>

Kelebihan:

  • Mudah diterapkan tanpa membuat file terpisah
  • Cocok untuk eksperimen cepat

3. Inline CSS

CSS ditulis langsung pada atribut style di setiap elemen HTML. Biasanya digunakan untuk styling cepat atau khusus elemen tertentu.

Contoh:

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

  <title>Contoh Inline CSS</title>

</head>

<body>

  <h1 style="color: red; text-align: center;">Inline CSS</h1>

</body>

</html>

Kelebihan:

  • Langsung terlihat hasilnya
  • Tidak perlu bagian <head> atau file terpisah

Kesimpulan

Menghubungkan CSS ke HTML bisa dilakukan dengan berbagai cara tergantung pada kebutuhan proyek. Jika ingin hasil yang profesional dan terorganisir, external CSS adalah pilihan terbaik. Sementara internal dan inline CSS cocok untuk halaman sederhana atau kebutuhan sementara.

# CSS # Tutorial

Postingan Terkait