Menghubungkan HTML dengan CSS

Menghubungkan HTML dengan CSS dapat dilakukan dengan tiga cara utama: menggunakan tag style di dalam elemen head, menggunakan atribut style langsung pada elemen HTML, atau yang paling umum, dengan menghubungkan file CSS eksternal menggunakan tag link. Metode ketiga, yaitu menggunakan file eksternal, memungkinkan pengelolaan gaya yang lebih terorganisir dan efisien pada halaman web.

HTML & CSS Dasar Febuari 22, 2025 0 72 Tambahkan ke Daftar Bacaan

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan atau desain elemen-elemen dalam halaman HTML, seperti warna, font, layout, dan lainnya. Anda dapat menghubungkan CSS ke HTML dengan tiga cara utama: inline CSS, internal CSS, dan external CSS. Masing-masing memiliki kegunaan tertentu tergantung pada kebutuhan Anda.

1. Inline CSS

Inline CSS adalah cara untuk menambahkan gaya langsung pada elemen HTML menggunakan atribut style dalam tag HTML. Ini adalah cara yang paling spesifik karena gaya hanya diterapkan pada elemen tertentu.

Struktur Dasar:

<p style="color: blue; font-size: 16px;">Ini adalah teks dengan gaya inline.</p>

Contoh:

<p style="color: red;">Ini adalah paragraf dengan teks berwarna merah menggunakan inline CSS.</p>

Namun, inline CSS tidak dianjurkan untuk desain yang lebih besar karena tidak efisien dan sulit untuk dikelola ketika banyak elemen perlu diberi gaya.

2. Internal CSS

Internal CSS digunakan dengan menulis aturan gaya di dalam tag <style> di bagian <head> dari dokumen HTML. Gaya ini akan diterapkan pada seluruh halaman HTML, tetapi hanya pada halaman tersebut.

Struktur Dasar:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Aturan CSS */
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <p>Ini adalah paragraf dengan gaya menggunakan internal CSS.</p>

</body>
</html>

Penjelasan:

<style>: Tag yang digunakan untuk menulis CSS di dalam HTML.
CSS pada <style>: Semua aturan CSS ditulis di dalam tag <style> yang berada di dalam tag <head>.
Gaya ini akan berlaku pada seluruh elemen dengan tag yang sama di halaman HTML tersebut.

3. External CSS

External CSS adalah cara yang paling efisien dan fleksibel untuk menghubungkan HTML dengan CSS, terutama saat Anda bekerja dengan banyak halaman web. Dalam metode ini, file CSS ditulis di luar dokumen HTML dan kemudian dihubungkan ke file HTML menggunakan tag <link>.

Langkah-langkah:

Buat file CSS eksternal: Misalnya, buat file dengan nama style.css dan tambahkan aturan CSS di dalamnya.

Contoh isi file style.css:

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

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

Hubungkan file CSS dengan HTML: Di dalam dokumen HTML, hubungkan file CSS dengan tag <link> di bagian <head>.

Contoh file HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <p>Ini adalah paragraf dengan gaya menggunakan external CSS.</p>

</body>
</html>

Penjelasan:

<link>: Tag ini digunakan untuk menghubungkan file eksternal ke dokumen HTML. Atribut rel="stylesheet" menunjukkan bahwa file yang dihubungkan adalah file CSS, dan atribut href="style.css" menunjukkan lokasi file CSS.
Keuntungan: Dengan menggunakan external CSS, Anda dapat menerapkan gaya yang sama pada banyak halaman HTML hanya dengan menghubungkan file CSS yang sama. Ini membuat pengelolaan gaya menjadi lebih mudah dan efisien.

4. Prioritas CSS

Saat menghubungkan HTML dengan CSS, terkadang Anda akan menghadapi situasi di mana lebih dari satu aturan CSS diterapkan pada elemen yang sama. Dalam hal ini, urutan prioritas CSS berlaku, yaitu:

Inline CSS memiliki prioritas tertinggi.
Internal CSS memiliki prioritas lebih rendah dibandingkan inline CSS, tetapi lebih tinggi daripada external CSS.
External CSS memiliki prioritas paling rendah jika ada konflik.

5. Menggunakan CSS dengan Selektor

CSS menggunakan selektor untuk menentukan elemen HTML mana yang akan diberikan gaya. Beberapa jenis selektor yang paling umum digunakan adalah:

Selektor tag: Memberikan gaya kepada semua elemen dengan tag tertentu.
```
p {
    color: red;
}
```
Selektor ID: Memberikan gaya kepada elemen dengan ID tertentu.
```
#header {
    font-size: 24px;
}
```
Selektor kelas: Memberikan gaya kepada elemen dengan kelas tertentu.
```
.highlight {
    background-color: yellow;
}
```

6. Contoh Menghubungkan HTML dengan CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Contoh Menghubungkan HTML dengan CSS</title>
</head>
<body>
    <h1>Selamat datang di Halaman Web Saya!</h1>
    <p>Ini adalah paragraf yang diberi gaya menggunakan file CSS eksternal.</p>
    <button>Click Me!</button>
</body>
</html>

CSS (styles.css):

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

h1 {
    color: darkblue;
}

p {
    color: gray;
    font-size: 18px;
}

button {
    background-color: lightgreen;
    font-size: 16px;
    padding: 10px 20px;
}

Menghubungkan HTML dengan CSS memberikan kontrol penuh terhadap desain dan tampilan halaman web Anda. Tiga cara utama untuk menghubungkan CSS ke HTML adalah:

Inline CSS: Gaya diterapkan langsung pada elemen HTML.
Internal CSS: Gaya ditulis di dalam halaman HTML, dalam tag <style>.
External CSS: Gaya ditulis dalam file terpisah dan dihubungkan ke halaman HTML menggunakan tag <link>. Ini adalah cara yang paling efisien untuk mengelola desain halaman web, terutama untuk situs besar dengan banyak halaman.