Close Menu

Menambahkan CSS ke HTML

Table of Contents

Ada tiga cara utama untuk menambahkan CSS ke dokumen HTML: inline CSS, internal CSS, dan external CSS. Berikut adalah penjelasan masing-masing cara dengan contoh.

Inline CSS #

Inline CSS digunakan untuk menerapkan gaya langsung pada elemen HTML. Ini dilakukan dengan menambahkan atribut style pada elemen tersebut. Meskipun cara ini cepat dan mudah, biasanya tidak dianjurkan karena dapat membuat kode HTML menjadi berantakan dan sulit diatur.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline CSS</title>
</head>
<body>
    <h1 style="color: green; text-align: center;">Ini adalah judul dengan inline CSS</h1>
    <p style="color: blue; font-size: 16px;">Ini adalah paragraf dengan inline CSS.</p>
</body>
</html>

Internal CSS #

Internal CSS digunakan untuk menerapkan gaya pada satu halaman HTML. Gaya ditulis di dalam elemen <style> yang ditempatkan di dalam elemen <head> dokumen HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Internal CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
            text-align: center;
        }

        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Ini adalah judul dengan internal CSS</h1>
    <p>Ini adalah paragraf dengan internal CSS.</p>
</body>
</html>

External CSS #

External CSS digunakan untuk menerapkan gaya pada beberapa halaman HTML. Gaya ditulis di dalam file terpisah dengan ekstensi .css, dan file tersebut di-link ke dokumen HTML menggunakan elemen <link> yang ditempatkan di dalam elemen <head>.

Contoh:

File index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ini adalah judul dengan external CSS</h1>
    <p>Ini adalah paragraf dengan external CSS.</p>
</body>
</html>

File styles.css:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: green;
    text-align: center;
}

p {
    color: blue;
    font-size: 16px;
}

Perbandingan Ketiga Cara #

Inline CSS #

  • Keuntungan: Mudah dan cepat diterapkan pada elemen tertentu.
  • Kekurangan: Membuat kode HTML berantakan, sulit diatur dan dikelola.

Internal CSS #

  • Keuntungan: Gaya dapat diterapkan pada seluruh halaman HTML, kode tetap dalam satu file.
  • Kekurangan: Tidak efisien jika digunakan untuk beberapa halaman, karena gaya harus ditulis ulang untuk setiap halaman.

External CSS #

  • Keuntungan: Gaya dapat diterapkan pada banyak halaman dengan satu file CSS. Kode HTML tetap bersih dan terpisah dari gaya.
  • Kekurangan: Membutuhkan file tambahan, sehingga harus memastikan file CSS di-link dengan benar.

    Contoh Penggunaan Gabungan #

    Dalam beberapa kasus, Anda mungkin ingin menggunakan kombinasi dari ketiga metode di atas. Misalnya, menggunakan external CSS untuk gaya umum, internal CSS untuk gaya khusus halaman tertentu, dan inline CSS untuk gaya spesifik elemen tertentu.

    Contoh:

    <!DOCTYPE html>
<html>
<head>
    <title>Contoh Kombinasi CSS</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 style="color: red; text-align: center;">Ini adalah judul dengan inline CSS</h1>
    <p>Ini adalah paragraf dengan external CSS.</p>
    <p class="highlight">Ini adalah paragraf dengan internal CSS yang memiliki class highlight.</p>
</body>
</html>

    Dengan menggunakan kombinasi metode ini, Anda dapat mengatur gaya halaman web Anda secara efisien dan fleksibel. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

    What are your Feelings