Penakode - Ada tiga macam cara untuk menggabungkan file HTML dengan file CSS. File CSS ini akan menjadikan file HTML menjadi lebih menarik ketika dibuka di browser.

Ketiga Cara penggabungan file HTML dan CSS itu adalah:

  1. Inline Style
  2. Embedded Style
  3. External Style

1. Inline Style

Inline Style merupakan cara penulisan file CSS yang langsung berada didalam tag HTML.

Contoh penulisan:

<h2 style="color:red">Contoh Penulisan Inline Style</h2>

Hasilnya:

Contoh Penulisan Inline Style

Contoh file HTML dengan nama “inline-css.html”

<html>
    <head>
        <title>Penggabungan File HTML dan CSS</title>
    </head>
    <body>
        <h2 style="color:red;">Contoh Penulisan Inline Style</h2> 
    </body>
</html>

Kemudian jalankan di browser, maka hasilnya akan menjadi seperti dibawah ini:

inline-style-css-html

2. Embedded Style

Embedded Style merupakan cara penulisan file CSS di dalam file HTML yang berada diantara tag <head> dan </head>.

Contoh penulisan:

<head>
    <style type="text/css">
        h2 {
            color: red;
        }
    </style>
</head>
<body>
    <h2>Contoh penulisan Embedded Style</h2>
</body>

Hasilnya:

Contoh penulisan Embedded Style

Contoh file dengan nama “embeded-css.html”

<html>
    <head>
        <title>Penggabungan File HTML dan CSS</title>
        <style type="text/css">
            h2 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h2>Contoh Penulisan Embedded Style</h2> 
    </body>
</html>

Kemudian jalankan di browser, maka tampilan akan menjadi:

tampilan-embedded-style-css

3. External Style

External Style atau link style merupakan cara penulisan yang terpisah antara file HTML dan CSS.

Cara menggunakannya yaitu membuat link pada tag <head> HTML dengan mengarah ke file css. Cara ini banyak dipakai oleh para programmer untuk membuat halaman css yang terpisah dari halaman HTML sehingga mempermudah penggunaan kode CSS dengan cukup membuat satu kali penulisan dan dapat digunakan di semua halaman HTML.

Ekstensi untuk CSS adalah (.css), contohnya adalah “style.css”.

Berikut ini contoh penulisannya pada “external-css.html”:

<html>
    <head>
        <title>Penggabungan File HTML dan CSS</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h2>Contoh Penulisan External Style</h2> 
    </body>
</html>

Dan dengan kode CSS pada “style.css”

h2 {
    color: red;
    background-color: rgb(70, 56, 56);
}

Dan untuk tampilan di browser akan menjadi seperti ini:

tampilan-external-style-css

Demikianlah tutorial tentang 3 cara menggabungkan file HTML dan CSS pada halaman web meliputi inline style, embedded style dan external style.

Selamat mencoba.