Menambahkan CSS ke dalam HTML

- September 28, 2022

Mengenal CSS

CSS merupakan singkatan dari Cascading Style Sheet yang fungsi utamanya yaitu mengatur tampilan dari elemen yang ditulis pada dokumen HTML. Bahasa inilah yang memiliki peran penting untuk mempercantik tampilan antarmuka (interface) website.

Salah satu contoh sederhana hasil penerapan dari CSS.

Menambahkan CSS ke Dokumen HTML

Ada tiga cara untuk menambahkan CSS ke dalam dokumen HTML:

Inline – menggunakan atribut style dalam elemen HTML
Internal – menggunakan elemen <style> di dalam elemen <head>
Eksternal – menggunakan elemen <link> di dalam elemen <head>

Untuk mengetahui contoh penerapannya maka simak pembahasan berikut.

Inline CSS

Inline CSS adalah cara menambahkan CSS dengan menggunakan atribut style pada tag pembuka elemen HTML. Cara ini biasanya digunakan untuk memberi gaya atau style unik pada suatu elemen.

<!DOCTYPE html>
<html>
<head>
	<title>Mengenal CSS</title>
</head>
<body>
	<h1 style="padding: 5px; background-color: red;">Tutorial Penerapan CSS</h1>
	<p style="padding: 10px; background-color: green;">
		Selamat datang di website kami!
	</p>
</body>
</html>

Keluaran:

Perlu dicatat bahwa menambahkan CSS dengan cara ini sangat tidak disarankan, tapi bila hanya untuk sekedar latihan masih diperbolehkan.

Lantas apakah ada cara lain yang lebih disarankan?

Ada! untuk mengetahuinya silahkan simak pembahasan selanjutnya.

Internal CSS

Internal CSS merupakan cara menambahkan CSS dengan menggunakan tag <style> di dalam tag <head>. Cara ini diperuntukkan untuk mengatur style untuk satu halaman website.

<!DOCTYPE html>
<html>
<head>
	<title>Mengenal CSS</title>
	<style type="text/css">
		h1{
			padding: 5px; 
			background-color: red;
		}
		p{
			padding: 10px; 
			background-color: green;
		}
	</style>
</head>
<body>
	<h1>Tutorial Penerapan CSS</h1>
	<p>Selamat datang di website kami!</p>
</body>
</html>

Keluaran:

Untuk cara ini masih diperbolehkan untuk digunakan ketika membuat suatu website.

Eksternal CSS

Eksternal CSS adalah cara menambahkan CSS dengan menggunakan tag <link> yang didefinisikan pada setiap dokumen HTML. Cara ini merupakan cara yang paling umum digunakan oleh para pengembang, karena dengan cara ini memungkinkan kita untuk membuat hanya satu style CSS yang kemudian dapat diterapkan ke semua halaman website.

Untuk menerapkan cara ini kita perlu menulis kode CSS secara terpisah dari dokumen HTML.

Kemudian dokumen HTML dan file dari kode CSS tadi selanjutnya dihubungkan dengan menggunakan tag <link> yang didefinisikan pada bagian <head> dalam dokumen HTML.

Untuk lebih jelasnya perhatikan contoh penerapan berikut:

Buat file index.html dengan isi sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Mengenal CSS</title>
</head>
<body>
	<h1>Tutorial Penerapan CSS</h1>
	<p>Selamat datang di website kami!</p>
</body>
</html>

Kemudian tambahkan tag <link> di dalam tag <head>

<link rel="stylesheet" type="text/css" href="style.css">

Buat file kembali dengan nama style.css dan tulis kode CSS di bawah ini:

h1{
	background-color: red;
	padding: 5px;
}
p{
	background-color: green;
	padding: 10px;
}

Terakhir buka web browser dan jalankan:

Cari Blog Ini

Winda Regina