Semua Topik

Menambahkan CSS ke dalam HTML

Menambahkan CSS ke dalam HTML

Siapkan HTML File

Buat file HTML baru dengan ekstensi .html dan buka dengan teks editor favorit Anda.

Struktur Dasar HTML

Mulailah dengan struktur dasar HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Contoh CSS</title>
</head>
<body>
 <!-- Konten HTML di sini -->
</body>
</html>

Tambahkan CSS Internal

Masukkan CSS secara internal di dalam elemen <style> dalam bagian <head>:

<head>
 <title>Contoh CSS</title>
 <style>
   body {
     background-color: lightblue;
     font-family: Arial, sans-serif;
   }
 </style>
</head>

Tambahkan CSS Eksternal

Buat file CSS terpisah dengan ekstensi .css. Misalnya, styles.css. Tambahkan kode CSS di dalamnya:

/* styles.css */
body {
 background-color: lightblue;
 font-family: Arial, sans-serif;
}

Kemudian, hubungkan file CSS eksternal dengan HTML menggunakan elemen <link> dalam bagian <head>:

<head>
 <title>Contoh CSS</title>
 <link rel="stylesheet" href="styles.css">
</head>

Gunakan CSS pada Konten HTML

Sekarang, Anda dapat menggunakan kelas atau ID yang telah Anda definisikan di CSS dalam elemen HTML:

<body>
 <h1 class="judul">Judul Halaman</h1>
 <p id="paragraf">Ini adalah paragraf teks.</p>
</body>

Terapkan CSS pada Kelas atau ID

Gunakan kelas atau ID yang telah Anda buat di CSS untuk menggaya elemen HTML:

/* styles.css */
.judul {
 color: darkblue;
}

#paragraf {
 font-size: 18px;
}

Simpan dan buka file HTML di browser untuk melihat hasilnya. Semoga ini membantu!