Menambahkan CSS ke HTML

Ada beberapa cara untuk menambahkan CSS ke dalam dokumen HTML. Berikut adalah beberapa cara yang umum digunakan:

1. Internal CSS

Internal CSS adalah metode yang menggunakan tag <style> di dalam elemen <head> dokumen HTML. Gaya yang ditentukan di dalam tag <style> hanya berlaku untuk halaman HTML yang terkait.

Contoh penggunaan internal CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah contoh penggunaan internal CSS.</p>
</body>
</html>

2. External CSS

External CSS adalah metode yang menggunakan file terpisah dengan ekstensi .css yang diterapkan ke dalam halaman HTML menggunakan tag <link> di dalam elemen <head>.

Contoh penggunaan external CSS:

Dalam file HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah contoh penggunaan external CSS.</p>
</body>
</html>

Dalam file styles.css:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
}

3. Inline CSS

Inline CSS adalah metode yang menggunakan atribut style di dalam elemen HTML itu sendiri untuk menerapkan gaya tertentu pada elemen tersebut. Ini biasanya digunakan untuk menerapkan gaya secara langsung ke satu elemen.

Contoh penggunaan inline CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color: navy;">Selamat Datang</h1>
    <p style="background-color: lightblue;">Ini adalah contoh penggunaan inline CSS.</p>
</body>
</html>

Pilih metode yang paling sesuai dengan kebutuhan dan preferensi pengembangan Anda. Idealnya, pemisahan struktur HTML, gaya CSS, dan logika JavaScript adalah praktik yang baik untuk meningkatkan keterbacaan dan pemeliharaan kode.

PreviousPengenalan CSS NextSelektor CSS

Last updated 1 year ago