Tiga Cara Menggabungkan CSS Dengan HTML

Untuk membuat halaman html menjadi lebih elegan dan dinamis, harus dilengkapi dengan css.

CSS berfungsi untuk mengatur tampilan html menjadi lebih baik. Contohnya antara elemen form A dengan elemen form B memiliki tampilan yang berbeda walaupun sama-sama berasal dari elemen form.

Terdapat 3 cara untuk menggabungkan file html dengan css, yaitu:

  • Inline Style
  • Inline Style Sheets
  • External Style Sheets

Kita bahas satu per satu…

Inline Style

Cara ini merupakan cara yang paling mudah.

Kita bisa menyisipkan kode css pada elemen html secara langsung. Contoh:

<h3 style="color:blue">Ini elemen heading dengan warna biru</h3>
<p style="text-align:center; color:red">Ini elemen paragraf dengan rata tengah warna merah</p>

Inline Style Sheets

Cara selanjutnya adalah dengan inline style sheets.

Untuk menggunakan inline style sheets dan external style sheets, diperlukan selector. Selector berfungsi untuk memisahkan style satu dengan lainnya.

Terdapat tiga jenis selector:

  • Berdasarkan Elemen
  • Berdasarkan ID
  • Berdasarkan Class

1. Selector Elemen

Selector berdasarkan elemen akan mengubah style dari elemen yang diseleksi secara keseluruhan. Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>HTML & CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            background: blue;
        }
    </style>
</head>
<body>
    <p>Ini adalah paragraf pertama</p>
    <p>Ini adalah paragraf kedua</p>
    <p>Ini adalah paragraf ketiga</p>
</body>
</html>

Catatan: Penulisan css inline style sheets diletakan pada elemen <style> yang terletak pada elemen <head>

2. Selector ID

Berbeda dengan selector elemen, kita perlu menambahkan id pada elemen tertentu yang akan diubah tampilannya.

<!DOCTYPE html>
<html>
<head>
    <title>HTML & CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            background: blue;
        }
        #p-dua {
            font-size: 25px;
            background: yellow;
        }
    </style>
</head>
<body>
    <p>Ini adalah paragraf pertama</p>
    <p id="p-dua">Ini adalah paragraf kedua</p>
    <p>Ini adalah paragraf ketiga</p>
</body>
</html>

Catatan: Perlu diingat bahwa id pada elemen tertentu tidak boleh sama dengan elemen lainnya. id pada elemen paragraf A tidak boleh sama dengan ID elemen paragraf B

3. Selector Class

Selector dengan class paling banyak digunakan. Hal ini karena dalam elemen html boleh menggunakan class yang sama.

Meskipun begitu kita masih tetap dapat mengubah elemen yang mempunyai class sama dengan menambahkan class unik-nya.

<!DOCTYPE html>
<html>
<head>
    <title>HTML & CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            background: blue;
        }
        #p-dua {
            font-size: 25px;
            background: yellow;
        }
        .paragraf{
            color: white;
        }
        .paragraf.tiga{
            background: red;
            font-size: 20pt;
        }
    </style>
</head>
<body>
    <p>Ini adalah paragraf pertama</p>
    <p id="p-dua" class="paragraf">Ini adalah paragraf kedua</p>
    <p class="paragraf tiga">Ini adalah paragraf ketiga</p>
</body>
</html>

External Style Sheets

External style sheets hampir mirip dengan internal style sheets. Hanya saja penulisan css terletak pada file yang berbeda.

Contoh dalam satu folder terdapat file index.html dan main.css.

external-css
└── src
    ├── index.html
    └── main.css

Seluruh kode css diletakan pada file main.css.

src/main.css
p {
    background: blue;
}
#p-dua {
    font-size: 25px;
    background: yellow;
}
.paragraf{
    color: white;
}
.paragraf.tiga{
    background: red;
    font-size: 20pt;
}

Kemudian di import oleh index.html

src/index.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML & CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <p>Ini adalah paragraf pertama</p>
    <p id="p-dua" class="paragraf">Ini adalah paragraf kedua</p>
    <p class="paragraf tiga">Ini adalah paragraf ketiga</p>
</body>
</html>

Penutup

Itulah beberapa cara menggunakan css pada file html. Tentu masih banyak sekali syntax css yang perlu dipahami untuk membuat website yang lebih dinamis.

Oleh karena itu apabila teman-teman ingin belajar lebih lanjut materi css dan html, silakan menuju halaman Materi HTML dan CSS