Home
Belajar Web
Website

Cara Menghubungkan Internal CSS dengan HTML | Panduan Belajar CSS

Pelajari cara menggunakan internal CSS dalam HTML untuk mengatur gaya tampilan halaman web. Panduan lengkap dan mudah dipahami untuk pemula.
Cara Menghubungkan Internal CSS dengan HTML | Panduan Belajar CSS

Cara Menghubungkan Internal CSS dengan HTML

Internal CSS adalah metode menambahkan gaya (style) langsung di dalam file HTML menggunakan tag <style>. Ini berguna saat kamu ingin mengatur tampilan halaman tanpa file CSS terpisah.

🔍 Kapan Menggunakan Internal CSS?

  • Ketika kamu hanya mengatur style untuk satu halaman HTML
  • Saat sedang belajar atau melakukan eksperimen cepat
  • Jika proyeknya kecil dan tidak butuh banyak file

📦 Contoh Kode Internal CSS

Kode di bawah ini akan menampilkan halaman dengan teks yang memiliki warna dan gaya khusus:


<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Internal CSS</title>
    <style>
      body {
        background-color: #f9f9f9;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: darkblue;
      }
      p {
        font-size: 16px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>Ini Judul dengan CSS</h1>
    <p>Paragraf ini diatur menggunakan internal CSS.</p>
  </body>
</html>

🔄 Coba Jalankan:


🎯 Kesimpulan

  • Internal CSS ditulis dalam tag <style> di bagian <head> HTML
  • Cocok untuk proyek kecil atau satu halaman
  • Tidak memerlukan file CSS terpisah

🧪 Latihan Interaktif

Ubah warna teks dan latar belakang pada latihan berikut ini:


📝 Tugas Praktik Mandiri

  1. Buat file HTML baru dengan nama internal-css.html
  2. Tambahkan tag <style> di bagian <head>
  3. Ubah warna latar belakang, warna teks, dan ukuran font paragraf
  4. Tambahkan minimal satu elemen <h1> dan <p>
  5. Lihat hasilnya di browser dan screenshot tampilannya

Bonus: Tambahkan styling untuk tag <a> (tautan) menggunakan CSS!

Contoh HTML + Internal CSS Keterangan Fungsi
<style>
  p { color: red; }
</style>
<p>Teks ini berwarna merah</p> 		Mengatur warna teks paragraf menjadi merah
<style>
  h1 { font-size: 36px; }
</style>
<h1>Judul Besar</h1> 		Mengubah ukuran font pada heading
<style>
  .biru { background-color: lightblue; padding: 10px; }
</style>
<div class="biru">Kotak latar biru</div> 		Memberi latar belakang dan padding ke elemen dengan class
<style>
  .tombol { background-color: green; color: white; padding: 10px 20px; border: none; border-radius: 5px; }
</style>
<button class="tombol">Klik Saya</button> 		Styling tombol menggunakan class
<style>
  #spesial { font-weight: bold; font-style: italic; }
</style>
<p id="spesial">Teks tebal dan miring</p> 		Menggunakan ID selector untuk styling elemen unik
<style>
  ul li { list-style-type: square; color: purple; }
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul> 		Mengubah gaya bullet dan warna teks daftar
<style>
  .animasi {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: putar 2s infinite linear;
  }
  @keyframes putar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
<div class="animasi"></div> 		Contoh animasi sederhana elemen berputar

🚀 Mau Cepat Bisa Komputer & Siap Kerja? Tempatnya di Sini!

Jangan biarkan peluang kerja lewat begitu saja hanya karena belum bisa komputer. Di ZE COME Training Center, kamu bisa mulai dari NOL sampai MAHIR! Belajar langsung dari instruktur berpengalaman, dengan materi yang praktis & langsung dipakai di dunia kerja.

  • ✅ Belajar Word, Excel, Google Workspace, Desain, Web Desain, Digital Marketing, Jaringan Komputer, Teknisi Komputer dan Printer dari dasar
  • ✅ Cocok untuk pencari kerja, mahasiswa, karyawan, dan pelajar
  • ✅ Bisa kursus reguler atau privat – sesuai waktu kamu
  • ✅ Menerima siswa PKL/Magang SMK dari berbagai jurusan
  • ✅ Sertifikat resmi & pengalaman praktik nyata

Daftar hari ini, mulai belajar besok! Jangan tunggu nanti, karena yang siap lebih dulu akan diserap dunia kerja lebih cepat.

💬 Konsultasi Gratis 🖥️ Daftar Kursus Komputer 🧑‍💻 Ajukan PKL / Magang

Post a Comment

Send Whatsapp Query