Tips Belajar CSS Typography Bag. 2

Setelah sebelumnya kita mempelajari CSS Typography bag.1 tentang Property font-family yakni cara mengatur jenis-jenis font, dan generic font adalah jenis font umum apa saja yang biasa digunakan.

Pada tutorial kali ini kita akan melanjutkan seri CSS Typography bag.2 tentang Property Font-Size, Properti color, dan property font-style

Property font-size.
CSS menyediakan berbagai satuan untuk kita dapat mengatur ukuran font, dan semua di set melalui property font-size, berikut contoh :
p {
font-size: 15px;
}
Berikut contoh Kodingnya :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Typography</title>
<style>
	p {
		font-size: 30px;

	}
</style>

</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod debitis animi voluptate labore tenetur expedita, voluptatem laborum porro enim iure et nesciunt dolor a fugit sapiente maxime ratione officiis. Similique.
	</p>	
</body>
</html>

Kode diatas berarti adalah cari seluruh tang dan kemudian set ukuran font sebesar 15 pixel, selain satuan pixel, CSS menyediaakan berbagai satuan yang bisa digunakan didalam mengatur ukuran font yakni ada dua sauan dengan nilai absolut dan nilai satuan nilai relatif.

Nilai Absolut

Adalah nilai tetap yang tidak dipengaruhi oleh elemen sekelilingknya, contoh nilai absolut pixel (px), centimeter (cm), milimeter (mm), pica (pc), point (pt), inches (in).
Berikut contoh kodingnya :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Typography</title>
<style>
	p.mm { font-size: 8mm; }
	p.cm { font-size: 1.2cm; }
	p.pt { font-size: 17pt; }
	p.in { font-size: .4in; }
	p.pc { font-size: 3.1pc; }
</style>
</head>
<body>
	<p>Paragraf normal</p>
	<p class="mm">Paragraf dengan ukuran 8 milimeter</p>
	<p class="cm">Paragraf dengan ukuran 1,2 centimeter</p>
	<p class="pt">Paragraf dengan ukuran 17 point</p>
	<p class="in">Paragraf dengan ukuran 0,4 inci</p>
	<p class="pc">Paragraf dengan ukuran 3,1 pica</p>
</body>
</html>

Dapat dilihat bahwa kita bisa menggunakan angka desiman sebagai nilai satuan, dan untuk menggunakan nilai desimal penulisan desimal ini harus menggunakan karakter titik, serta diantara nilai satuan tidak boleh terdapat spasi.

Nilai Relatif.

Selain nilai absolut, CSS juga menyediakan nilai relatif dengan menggunakan satuan perset (%), em dan rem.

Nilai Satuan Persen (%)

Nilai relatif dengan satuan persen (%) akan berubah-ubah regantung pada posisi dan parent dalam elemen, berikut contoh penggunaan nilai (%)
p {
font-size: 150%;
}
Kode diatas diartikan berarti cari tag , kemudian set ukuran font sebesar 150% dari ukuran font-size parent element.

Satuan Em.

Nilai satuan em mirip dengan satuan persen (%), nilai dari 1em sama dengan 100%, sehingga 1.2em sama dengan 120%, 0.8em sama dengan 80%. berikut contohnya :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS Satuan Persen</title>
<style>
p.persen {
	font-size: 150%;
}
p.pixel {
	font-size: 19.2px;
}
</style>
</head>
<body>
   <p>Paragraf normal</p>
   <p class="persen">Paragraf dengan ukuran 150%</p>
   <p class="pixel">Paragraf dengan ukuran 19.2px</p>
</body>
</html>

Contoh kode program dengan menggunakan pixel, persen dan em :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
	html { font-size: 20px; }
	body { font-size: 16px; }
	div { font-size: 90%; }
	p { font-size: 1rem; }
</style>
</head>
<body>
	Teks di dalam body html
	<div>
	Teks di dalam body > div
	<p>
	Teks di dalam body > div > paragraf
	</p>
	</div>
	<p>
	Teks di dalam body > paragraf
	</p>
</body>
</html>

Jadi ukuran apa yang bagus sebaiknya digunakan untuk font-size?

Jadi untuk jawabanya tergantung pada kebutuhan anda, nilai absolut, untuk nilai absolut sebaiknya tidak digunakan karena tidak relevan dengan ukuran layar yang berbeda-beda.

Saat ini untuk satuan pixel, persen dan em adalah satuan yang banyak digunakan untuk font size

Property font-color

Untuk mengubah warna teks menjadi salah satu yang menarik, didalam CSS menyediakan property color untuk keperluan ini.

Property color ini dugunakan untuk mengubah warna pada sebuah font, sedangkan untuk bacround-color digunakan untuk mengubah warna latar belakang dari sebuah teks.

Penggunaan property color dan backround color cukup mudah digunakan kita tinggal memberikan nilai dalam satuan warna, sebagai contoh sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS Font Color</title>
<style>
h1,p {
	color:white;
	background-color: blue;
}
</style>
</head>
<body>
	<h1>Belajar CSS Font Color</h1>
	<p>Sebuah paragraf untuk mengatur warna pada sebuah font</p>
</body>
</html>

Format Wana : Keyword.

Dalam banyak contoh program untuk keyword warna untuk property color adalah nama warna dalam bahasa inggris misalnya red, black, white dll. Ada beberapa keyword dasar warna yang sering digunakan yakni : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. daftar kode warna pada CSS bisa dilihat di : https://www.w3.org/TR/css-color-3/

Format Warna #RGB, #RRGGBB.

Format warna seperti #12F5A5 adalah format warna #RGB, pada format warna ini sering digunakan digunakan dalam CSS sehingga pentng untuk dipahami.

RGB singkatan dari Red green Blue (Merah Hijau Biru), pada desain media visual seperti TV atau Komputer, model warna ini yang pada umumnya digunakan anda bisa melihat daftar warna beserta kode warna di sini : https://www.w3.org/TR/css-color-3/ .
Berikut Contohnya :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS Font Color</title>
<style>
p { font-size: 24px; }
	p.satu {color: #FFFFFF; }
	p.dua {color: #000000; }
	p.tiga {color: #FF0000; }
	p.empat {color: #00FF00; }
	p.lima {color: #FFFF00; }
	p.enam {color: #00FFFF; }
</style>
</head>
<body>
	<p class='satu'>255 Red, 255 Green, dan 255 Blue = #FFFFFF</p>
	<p class='dua'>0 Red, 0 Green, dan 0 Blue = #000000</p>
	<p class='tiga'>255 Red, 0 Green, dan 0 Blue = #FF0000</p>
	<p class='empat'>0 Red, 255 Green, dan 0 Blue = #00FF00</p>
	<p class='lima'>255 Red, 255 Green, dan 0 Blue = #FFFF00</p>
	<p class='enam'>0 Red, 255 Green, dan 255 Blue = #00FFFF</p>
</body>
</html>

Property font-style.

Property font-style digunakan untuk memiringkan text (italic) nilai yang diinput salah satu dari normal, italic dan oblique.

Dalam typography teori, pada jenis font italic dan iblique adalah tipe font yang berbeda, dimana font italic sebuah tipe font khusus yang tidak hanya tampil miring, tetapi berbeda dari font normal.

Sedangkan oblique adalah jenis font normal yang hanya dimiringkan beberapa derajat, dan tampilan yang dihasilkan tidak sebaik italic.
Berikut contoh penggunaan property font style pada CSS :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS Font Style</title>
<style>
	p { font-family: Garamond; }
	.italic { font-style: italic; }
	.oblique { font-style: oblique; }
	.normal { font-style: normal; }
</style>
</head>
<body>
	<p>
	Paragraf normal tanpa property font-style.
	</p>
	<p class="italic">
	Paragraf ini menggunakan property font-style: italic.
	</p>
	<p class="oblique">
	Paragraf ini menggunakan property font-style: oblique.
	</p>
	<p><i>
	Paragraf ini berada di dalam tag i, dan secara default tampil italic.
	</i></p>
	<p><i class="normal">
	Paragraf ini berada di dalam tag i, namun di 'normalkan'.
	</i></p>
</html>

Ok sekian dulu tutorial tentang typography dengan CSS, ikuti terus blog ilmuweb ini kedepan akan ada tutorial menarik lainya, semoga bermanfaat.


Share and Enjoy !

You may also like...