Menambahkan Style pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

HTML Style adalah sebuah atribut yang digunakan untuk menentukan style atau gaya tampilan dari elemen pada halaman web. Atribut style digunakan untuk memberikan pengaruh atau perubahan pada warna, ukuran, jenis font, spasi, dan efek lainnya pada elemen HTML.

Dasar penggunaan atribut style yaitu:

<tagname style="property:value;">

Nilai dari "property:value" adalah Property dari CSS seperti "color:red", "background-color:blue" dan lainnya. Sebagai contoh:

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Penggunaan Atribut Style</title>
</head>
<body>
	<h1 style="color: blue; font-size: 36px; font-family: Arial, sans-serif; text-align: center;">Contoh penggunaan style pada heading 1</h1>
	<p style="color: red; font-size: 24px; font-family: Verdana, sans-serif; line-height: 1.5; margin-left: 20px; margin-right: 20px;">Ini adalah contoh paragraf dengan style pada elemen <strong>p</strong>.</p>
</body>
</html>

Kode diatas akan menampilkan dokumen web sebagai berikut:

Contoh penggunaan style pada heading 1

Ini adalah contoh paragraf dengan style pada elemen p.

Selain melalui cara diatas kita juga dapat mebuat style menambahkan tag <style> pada elemen head.

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Halaman Web dengan Style</title>
	<style>
		h1 {
			color: blue;
			font-size: 36px;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		p {
			color: red;
			font-size: 24px;
			font-family: Verdana, sans-serif;
			line-height: 1.5;
			margin-left: 20px;
			margin-right: 20px;
		}
	</style>
</head>
<body>
	<h1>Contoh Halaman Web dengan Style</h1>
	<p>Ini adalah contoh paragraf dengan style pada elemen <strong>p</strong>.</p>
</body>
</html>

Kode diatas akan menghasilkan property yang sama dengan kode sebelumnya. Properti p pada elemen <style> akan berlaku global untuk seluruh tag <p> pada elemen <body>. Begitu juga property untuk H1. Jika kita ingin style yang kita buat berlaku hanya untuk tag tertentu maka kita dapat menggunakan atribut class. Berikut contoh penggunaan class dan style.

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Halaman Web dengan Style</title>
	<style>
		.paragraf1 {
			color: red;
			line-height: 1.5;
		}
		.paragraf2 {
			color: blue;
			line-height: 1.5;
		}
	</style>
</head>
<body>
	<h1>Contoh penggunaan class</h1>
	<p class='paragraf1'>Ini adalah contoh paragraf dengan style pada elemen dengan menggunakan atribut <strong>class</strong>.</p>
	<p class='paragraf2'>Ini adalah paragraf kedua.</p>
</body>
</html>

Kode diatas akan menghasilkan dokumen web sebagai berikut:

Contoh penggunaan class

Ini adalah contoh paragraf dengan style pada elemen dengan menggunakan atribut class.

Ini adalah paragraf kedua.