Sekilas Tentang CSS

Estimasi waktu: 45 menit

Jika membangun halaman web kita ibaratkan sebagai membangun rumah, HTML adalah fondasi, rangka, dinding, lantai dan atap. Maka CSS adalah cat, interior dan eksterior yang membuat rumah kita menjadi lebih menarik.

CSS adalah Cascading Style Sheet. Cascading secara harfiah artinya mengalir dari atas kebawah, style sheet kurang lebih maksudnya daftar atau catatan untuk perubahan tampilan yang akan dilakukan.

Menambahkan CSS ke HTML

Untuk menambahkan CSS ke halaman web yang sudah kita buat sebelumnya dapat dilakukan dengan dua cara.

Menggunakan `<style>`

Kita bisa menambahkan CSS dengan tag <style>. Contohnya jika kita ingin mengubah tampilan header 1.

`index.html`

<!DOCTYPE html>
<html>
<head>
	<title>Riza Fahmi - Tautan</title>
+   <style>
+   	h1 {
+   		color: red;
+   	}
+   </style>

</head>
<body>
	<header>
		<img id="photo" src="./images/rizafahmi.jpeg" alt=
		"profile">
		<h1>@rizafahmi</h1>
	</header>
	<main>
		<ul>
			<li class="website">
				<a href="https://rizafahmi.com/">Website</a>
			</li>
			<li class="youtube">
				<a href="https://youtube.com/rizafahmi">YouTube</a>
			</li>
			<li class="instagram">
				<a href=
				"https://instagram.com/rizafahmi">Instagram</a>
			</li>
			<li class="twitter">
				<a href=
				"https://twitter.com/rizafahmi22">Twitter</a>
			</li>
			<li class="github">
				<a href="https://github.com/rizafahmi">GitHub</a>
			</li>
		</ul>
	</main>
</body>
</html>

Mari kita bongkar elemennya satu per satu.

css selector

selektor → elemen yang ingin diubah tampilannya. Bisa jenis tag-nya seperti h1, div dll. Bisa juga className dengan prefiks . ataupun id dengan prefiks #.
properti → hal yang ingin diubah. Ada banyak sekali properti di css, lebih dari 350!
nilai → nilai dari perubahan. Untuk warna, bisa menggunakan nama, rgb() atau hsl().
; → setiap pasangan properti dan nilai harus diakhiri dengan tanda titik koma

Perubahan dapat dilakukan lebih dari satu properti dan dapat dilakukan berulang-ulang.

h1 {
	color: limegreen;
	font-size: 60px;
	font-weight: normal;
	text-decoration: underline;
	text-transform: uppercase;
	border: 3px solid pink;
}

Bagaimana kalau setelah ini kita ubah properti yang sama? Apa yang terjadi?

h1 {
	color: limegreen;
	font-size: 60px;
	font-weight: normal;
	text-decoration: underline;
	text-transform: uppercase;
}

+ h1 {
+  	color: red;
+ }

Tag Bersarang

Seringkali ditemukan tag yang berada didalam tag. Seperti ol, ul dan li. Atau ada sebuah div yang didalamnya ada h1.

<header>
	<img id="photo" src="./images/rizafahmi.jpeg" alt=
	"profile">
	<h1>@rizafahmi</h1>
+	<p>Selamat datang di kumpulan tautan Riza Fahmi.</p>
+	<div>
+	  Silakan cek tautan dibawah untuk informasi lebih
+	  lanjut.
+	</div>
</header>

Ketika kita ingin mengubah tampilan div dengan CSS.

header {
	color: blue;
}

Apakah yang terjadi? Semua yang ada di header akan berubah menjadi warna biru.

nested

Menggunakan `<link>` untuk memisahkan CSS

Selain menggunakan tag <style> cara yang lebih baik adalah memisahkan antara file html dengan css menggunakan tautan <link>sehingga lebih mudah dikelola.

`index.html`

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

Beberapa Styling Umum

Background

Digunakan untuk mengubah latar, baik warna latar ataupun gambar latar.

html,
body {
	margin: 0; /* Reset default styling di browser */
	padding: 0;
	background: #2d3047;
}

h1 {
	color: #4adbc8;
}

Teks dan font

text-align
font-size
text-decoration
text-transform
font-family
font-weight
font-style
font

html {
	margin: 0; /* Reset default styling di browser */
	padding: 0;
+	font-family: 'Open Sans', sans-serif;
	background: #2d3047;
}

h1 {
	color: #4adbc8;
}

Mengubah Tampilan Link

Link default berwarna biru
Setelah diklik akan berubah menjadi ungu
on click merah
Ada state
- active → onclick
- visited
- hover

a {
	color: #3993dd;
	text-decoration: none;
}

a:hover {
	background: #e0acd5;
}

a:active {
	background: #4adbc8;
}

Ukuran dalam CSS

Ada tiga jenis unit ukur dalam CSS.

px atau pixel yang paling umum digunakan. Sifatnya absolut, tidak mengindahkan pengaturan web browser pengguna. Contohnya jika halaman web kita menggunakan font dengan ukuran 16px sedangkan pengguna mengatur web browser dengan ukuran font 20px, maka pengguna tersebut akan kesulitan membaca halaman web kita karena dia sudah terbiasa membaca ukuran font 20px. Unit ukur ini tidak disarankan dengan alasan accessability.
rem atau Root EM adalah unit ukur yang lebih bersahabat dengan accessability. Ukuran berdasarkan pengaturan pengguna. Jika pengaturan pengguna menggunakan font dengan ukuran 16px, maka 1rem = 16px. Apabila pengguna menggunakan ukuran 20px, maka 1rem = 20px.
Sedangkan em mirip rem, yang membedakan adalah ukuran 1em akan mengikuti ukuran komponen induk sedangkan rem akan selalu mengacu ke pengaturan pengguna.

<h1 class="px">PX VIEW</h1>
<p>PX TEXT</p>

<h1 class="rem">REM VIEW</h1>
<p>REM TEXT</p>

<h1 class="em">EM VIEW</h1>
<p>EM TEXT</p>

html {
  font-size: 100%;
}

.px {
  background-color: green;
  font-size: 16px;
  margin-bottom: 16px
}

.rem {
  background-color: yellow;
  font-size: 1rem; /* here 2rem = (16*2==32px) */
  margin-bottom: 1rem;
}

.em {
  background-color: orangered;
  font-size: 1em; /* here 2em = (16*2 == 32px) */
  margin-bottom: 1em; /* here 1em = 32px */
}

Info lebih lanjut bisa cek: https://hackernoon.com/pixels-vs-rem-vs-em-breaking-down-css-sizes

Box Model

Display

css display

Display default nya block
Span display: inline
Beberapa tipe display:
- inline — membuat tag agar (diusahakan) saling berdekatan. Properti seperti width, height, padding dan margin dikendalikan oleh browser dan tidak bisa diubah
- block — sebaliknya, dengan block kita bisa mengatur width, height, padding dan margin. Secara default tag menjadi satu blok penuh satu baris. Tag berikutnya akan berada di baris baru.
- inline-block — kombinasi keduanya. Browser akan berusaha membuat tag saling berdekatan, namun kita dapat mengubah properti lain layaknya block.
- flex dan inline-flex — Mirip block, bisa diubah propertinya yang berefek ke blok dengan berbagai fitur baru yang sangat powerful.
- grid dan inline-grid — fitur terbaru dari CSS3 yang biasa digunakan untuk mengatur tata letak halaman web.
- table — dapat digunakan untuk membuat table dengan CSS.

header {
  padding-top: 1rem;
  text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}

+ header > img {
+   width: 6rem;
+   height: 6rem;
+ }

Border

Border akan menambahkan width. Misalnya width 400px dan border 5px. Maka width akan menjadi 405px; Begitu juga dengan padding.
border-radius untuk membulatkan segi dari border
box-shadow untuk menambah bayangan dari sebuah kotak kontainer

header > img {
  width: 6rem;
  height: 6rem;
+ border-radius: 100%;
+ border: 2px solid #f4ebe8;
+ box-shadow: rgb(224 172 213 / 75%) 0px 2px 8px 0px;
}
h1 {
  color: #4adbc8;
  font-size: 1.25em;
  font-weight: bold;
+ display: inline-block;
+ border-radius: 1em;
+ background-color: #181926;
+ padding: 0.3em 0.6em;
+ border: 1px solid #f4ebe8;
}

Background Image

Selain warna, background dapat berupa image, dan juga video.

body {
	background: url(./images/bg01.jpg) repeat center center fixed;
	background-size: cover;
	height: 100vh;
}

Styling List

ul {
	box-sizing: border-box;
	list-style: none;
	margin: 0 auto;
	padding: 1em;
}

ul > li {
	background-color: #f4ebe8;
	border-radius: 10em;
	padding: 1em;
	margin: 1.4em 0;
	box-shadow: rgb(224 172 213 / 75%) 0px 2px 8px 0px;
}

Menambahkan Image sebagai icon

`index.html`

<!DOCTYPE html>
<html>
<head>
	<title>Riza Fahmi - Tautan</title>
	<link rel="stylesheet" href="style.css" type="text/css" media=
	"screen">
</head>
<body>
	<header>
		<img id="photo" src="./images/rizafahmi.jpeg" alt=
		"profile">
		<h1>@rizafahmi</h1>
	</header>
	<main>
		<ul>
			<li class="website">
+				<a href="https://rizafahmi.com/">
+					<img src="./images/web.png" alt="website" width="24">
+					Website</a>
			</li>
			<li class="youtube">
+				<a href="https://youtube.com/rizafahmi">
+					<img src="./images/youtube.png" alt="youtube" width="24">
+				YouTube</a>
			</li>
			<li class="instagram">
+				<a href="https://instagram.com/rizafahmi">
+					<img src="./images/instagram.png" alt="instagram" width="24">
+				Instagram</a>
			</li>
			<li class="twitter">
+				<a href="https://twitter.com/rizafahmi22">
+					<img src="./images/twitter.png" alt="twitter" width="24">
+					Twitter</a>
			</li>
			<li class="github">
+				<a href="https://github.com/rizafahmi">
+					<img src="./images/github.png" alt="github" width="24">
+					GitHub</a>
			</li>
		</ul>
	</main>
</body>
</html>

`style.css`

ul > li > a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

Kesimpulan

CSS adalah bagaimana kita mengatur bagaimana tampilan, bentuk dan susunan dari berbagai tag HTML.
Menghubungkan dokumen HTML dengan CSS dapat dilakukan dengan dua cara: style tag dan link tag.
Cara penulisan CSS menggunakan selektor, properti dan nilai.
Beberapa properti CSS yang umum digunakan diantaranya background, pengaturan teks dan font, berbagai state untuk tautan atau anchor, border, dll.

Sekilas Tentang CSS

# Menambahkan CSS ke HTML

# Menggunakan <style>

# index.html

# Tag Bersarang

# Menggunakan <link> untuk memisahkan CSS

# index.html

# Beberapa Styling Umum

# Background

# Teks dan font

# Mengubah Tampilan Link

# Ukuran dalam CSS

# Box Model

# Display

# Border

# Background Image

# Styling List

# Menambahkan Image sebagai icon

# index.html

# style.css

Kesimpulan

On this page

Menambahkan CSS ke HTML

Menggunakan `<style>`

`index.html`

Tag Bersarang

Menggunakan `<link>` untuk memisahkan CSS

`index.html`

Beberapa Styling Umum

Background

Teks dan font

Mengubah Tampilan Link

Ukuran dalam CSS

Box Model

Display

Border

Background Image

Styling List

Menambahkan Image sebagai icon

`index.html`

`style.css`