HTML dan CSS didesain untuk saling melengkapi dan bekerja sama. CSS tidak dapat berfungsi dengan semestinya apabila tidak dihubungkan dengan file HTML. Bagaimana cara menghubungkannya? Saya akan tunjukkan tiga cara dalam menghubungkan HTML dengan CSS.

Cara Pertama: Inline Styles

Cara ini dapat dilakukan dengan menuliskan sintak CSS secara langsung pada tag HTML melalui atribut “style“. Contohnya seperti kode berikut ini.

<h1 style="color:blue;font-size:30px;">Heading A</h1>

Simpan kode HTML di atas dengan nama latihan3.html (misalnya) dan buka di browser, maka Anda akan menjumpai tampilan seperti di bawah ini.

Contoh pengaplikasian CSS

Cara Kedua: Internal Stylesheet

Cara kedua ini lebih rapi dari cara pertama, yaitu dengan menuliskan kode CSS di bagian <head> pada halaman HTML, dengan menggunakan tag <style>. Contohnya adalah sebagai berikut.

<html>
	<head>
		<style>
			h1{
				color:blue;
				font-size:30px;
			}
		</style>
	</head>
	<body>
		<h1>Heading A</h1>	
	</body>
</html>

kode HTML di atas akan menghasilkan tampilan yang sama persis dengan cara pertama, tetapi jauh lebih rapi dari cara pertama karena kode CSS dituliskan pada satu tempat khusus secara kolektif.

Cara Ketiga: External Stylesheet

Cara ketiga adalah cara yang sebaiknya Anda ikuti. Cara ini memisahkan antara kode HTML dan kode CSS. Syntax CSS ditulis pada file terpisah (disimpan dengan ekstensi .css). Selanjutnya, hubungkan file html dan css yang sudah dibuat dengan tag HTML “link”. Contohnya adalah sebagai berikut.

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<h1>Heading A</h1>	
	</body>
</html>

Lalu, sintak CSS yang dihubungkan adalah sebagai berikut (disimpan pada folder yang sama dengan file HTML, dengan nama style.css).

h1{
	color:blue;
	font-size:30px;
}

Cara ketiga ini adalah cara yang sangat baik untuk diterapkan dalam project. Dengan file terpisah, kita dapat menggunakan file CSS yang sama untuk file HTML yang berbeda tanpa harus menulis ulang kode CSS.