Skip to main content

How To CSS

Ada tiga cara kita bisa mengaplikasikan CSS ke website kita:

  1. Inline (di atribut tag)
  2. Di dalam tag <style>
  3. File .css

Inline (Di Atribut Tag)​

Setiap tag yang ada di HTML memiliki atribut bernama style di atribut ini kita bisa mengetikkan sintaks CSS tapi tanpa selector karena kita direct memberi styling ke elemen.

Cara memberi inline styling adalah sebagai berikut:

<elemen style="property1: value2; property2:value2;">
	<!-- Content Here -->
</elemen>

Jadi kalau kita ambil dari kode di bagian sebelumnya. Kita bisa tulis seperti ini:

<div style="color:red;font-size:32px;">
	<p>Some Text</p>
</div>

Nah di inline kita tidak membutuhkan selector misal class main-container, kita langsung menuliskan properti-propertinya saja.

Kalau kalian tanya selector dipake di apa aja... Selector hanya digunakan jika CSS dan elemennya pisah. Dan itu di bahas di dua cara di bawah (menggunakan tag dan file terpisah).

DI dalam tag <style>​

Di dalam tag <head> kita bisa menaruh tag <style>. Di dalam tag <style> kita akan menaruh rules, selector, dan properti CSS di sini. Seperti contoh:

<html>
<head>
	<title>Website Gua</title>
	<style>
	/* Ini Comment di CSS */	

	p {
		font-size: 16px;
	}

	.main-container {
		color: red;
	}
	
	#judul {
		font-size: 32px;
		color: blue;
	}
	</style>
</head>
<body>
	<header>
		<h1 id="judul">Halo dari Website Gua</h1>
		<p>Best Website Ever</p>
	</header>

	<main class="main-container">
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>

		<p>Yes good</p>
	</main>
</body>
</html>

Nah kalo di sini wajib pakai selector karena pisah dari elemennya.

Kalau kalian penasaran bentukan websitenya gimana:

image

File .css​

Nah tadi kan kita menaruh semua aturan-aturan CSS nya di dalam tag style. Kita juga bisa menaruh semua aturan CSS ke dalam satu file yang kemudian kita include/link ke HTML kita.

Nama filenya biasanya bernama style.css. File ini wajib dalam hirerarki yang sama dengan file HTML kalian.

Untuk pertemuan ini kita akan taruh file style.css di satu folder yang sama dengan file HTML kita dan berikut bentukannya setelah saya membuat file baru di VS Code:

image

Sekarang kita isi file style.css nya dengan aturan yang sudah kita tulis tadi di dalam tag <style> seperti ini:

image

Kemudian kembali ke file HTML nya dan di dalam head, instead of kita pakai tag <style> jadi kalau ada hapus aja. Kita akan pakai sintaks ini:

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

	/* .. */
</head>

Nah sisa kode lainnya sama dan website terlihat sama, berikut kode HTMLnya sekarang:

<html>
<head>
	<title>Website Gua</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<header>
		<h1 id="judul">Halo dari Website Gua</h1>
		<p>Best Website Ever</p>
	</header>

	<main class="main-container">
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>

		<p>Yes good</p>
	</main>
</body>
</html>

Dan ini isi dari style.css:

/* Ini Comment di CSS */	

p {
	font-size: 16px;
}

.main-container {
	color: red;
}

#judul {
	font-size: 32px;
	color: blue;
}

Lebih rapi kan sekarang? kalian bisa fokus ke masing-masing hal. HTML punya tempat sendiri, CSS punya tempat sendiri.

Untuk beberapa pertemuan selanjutnya kita akan pakai metode ini, jadi kita akan punya file CSS terpisah untuk menyimpan aturan-aturan CSS kita.