Ketika ingin membuat sebuah gaya pada situs HTML tentu memerlukan file CSS sebagai lembar gaya HTML tersebut. Artikel ini akan menjelaskan bagaimana cara menggabungkan file HTML dan CSS. Dalam pembuatan CSS ini pun beragam, ada CSS Inline, CSS Internal dan CSS Eksternal.
Apa Itu CSS Inline ?
CSS Inline adalah lembar gaya HTML yang diterapkan langsung pada baris / tag HTML yang bersangkutan, misalnya seperti ini: <img style="width: 120px;" src="images/dua.jpg">.
Pembuatannya cukup tambahkan style=”” dan nilai style nya pada masing-masing tag HTML, style itu akan berpengaruh hanya untuk tag itu saja.
Apa Itu CSS Internal ?
CSS Internal adalah lembar gaya / CSS yang diterapkan didalam satu file bersama HTML.
Baca Juga:
Metode ini tidak memerlukan lembar CSS yang pada umumnya biasa disimpan dengan nama style.css karena CSS nya sudah diterapkan didalam bersamaan dengan file HTML.
Contohnya seperti ini:
Silahkan copy paste kode berikut jika ingin menggunakan CSS Internal, pastikan mengganti source nya sesuai dengan nama file yang telah kamu buat sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Scroll Dalam Div Rio Bermano</title>
</head>
<style type="text/css">
.satu {
max-width: 350px;
height: 70vh;
}
.dua {
height: 100%;
overflow: auto;
}
</style>
<body>
<div class="satu">
<div class="dua">
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dauf elektroni 5 abad, tapi juga telah beralih ke penataan huruf elektrop Publishing sepertem Ipsum.</p>
</div>
</div>
</body>
</html>
style nya diletakkan didalam file HTML di sebelum tag pembguka <body>, hal ini lumayan merepotkan jika file HTML nya panjang dan style nya juga panjang tapi dalam pencarian code tidak perlu buka tutup file karena ada didalam file yang sama.
CSS Internal ini adalah cara yang digunakan oleh Blogspot, jika kalian pernah melihat codingan Blogspot pasti pernah melihat cara seperti ini. Berbeda dengan tema WordPress yang rata-rata menggunakan CSS Eskternal.
Apa Itu CSS Eksternal ?
CSS Eksternal adalah file CSS / lembar gaya yang disimpan di file berbeda, dalam penggunaannya perlu memanggil file CSS tersebut di dalam <head> HTML seperti ini: <head> <title>Membuat Website - HTML Rio Bermano</title> <link href="css/style.css" type="text/css" rel="stylesheet"> </head>.
Pada code tersebut artinya kita memanggil file CSS (disini nama file nya style.css) yang berada didalam folder CSS (css/style.css), dengan cara seperti ini maka setiap perubahan pada CSS akan berdampak pada file HTML yang bersangkutan.
Masih bingung ? Lihat : Video Tutorial Cara Gabungkan HTML dan CSS.
Kesimpulan
Setiap CSS memiliki penggunaan yang berbeda, CSS Inline tidak memerlukan nama class atau id karena style langsung didalam tag yang bersangkutan. Sedangkan CSS Internal dan Eksternal perlu memanggil nama class / id / tag yang ingin disesuaikan, jika tidak maka tidak akan berfungsi.
Begitulah caranya hubungkan CSS dengan HTML, setelah mengetahui caranya seperti ini ayo buat website HTML CSS sendiri dari nol sampai selesai.
Selamat mencoba !