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!

PREVIOUS
NEXT