CSS

Belajar CSS Part 2: Cara Mengatur Font Dengan CSS

Selamat datang. Salam jumpa kembali di pertemuan yang ke-3 dalam sesi belajar CSS. Pada pertemuan ini saya akan mengulas tentang Cara Mengatur Font Dengan CSS.

Mengatur font akan sangat mudah dengan CSS ini, seperti mengubah font, mengatur ukuran, memberi warna font serta lainnya (tulisan miring, tebal, garis bawah).

Beberapa syntax CSS yang dapat digunakan untuk mengatur font

  • font-size: Digunakan untuk mengatur ukuran font
  • font-family: Digunakan untuk mengubah jenis font
  • font-color: Digunakan untuk memberi warna pada font
  • font-weight: Digunakan untuk mengatur ketebalan font
  • font-style: Digunakan untuk mengubah gaya font

Baca: Cara Penulisan CSS


Contoh Mengatur Font Dengan CSS

Seperti biasa disetiap pertemuan kita akan belajar dan praktikkan langsung, nah dibawah ini saya sudah menulis kode program yang mencakup semua syntax font yang sudah disebutkan diatas.

Saya akan membuat dua file yang pertama file html yang diberi nama index.html, dan yang ke-2 file CSS yang diberi nama style.css

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Font CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1 class="kalimat_satu">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
	<h1 class="kalimat_dua">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
	<h1 class="kalimat_tiga">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
</body>
</html>

style.css

.tulisan_satu{
	font-color: red;
	font-family: sans-serif;
	font-style: normal;
}

.tulisan_dua{
	font-color: green;	
	font-size: 24pt;
	font-style: italic;
}

.tulisan_tiga{
	font-color: red;
	font-weight: bold;
	font-style: oblique;	
}

Bisa dilihat pada contoh diatas, untuk mengubah warna font bisa menggunakan color, untuk mengubah jenis font menggunakan font-family dan lainnya seperti yang sudah dijelaskan sebelumnya.

Nah sekarang silahkan jalankan pada browser teman – teman dan lihat perbedaannya.


Untuk penggunaan Internal Style CSS

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Font CSS</title>
	<style>
	.kalimat_satu{
	font-color: red;
	font-family: sans-serif;
	font-style: normal;
}

.kalimat_dua{
	font-color: green;	
	font-size: 24pt;
	font-style: italic;
}

.kalimat_tiga{
	font-color: red;
	font-weight: bold;
	font-style: oblique;	
}
</style>
</head>
<body>
	<h1 class="kalimat_satu">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
	<h1 class="kalimat_dua">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
	<h1 class="kalimat_tiga">Giat Belajar CSS Dasar di www.irvannurfazri.com</h1>
</body>
</html>

Bagaimana mudah dipahami?


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Cara Mengatur Font Dengan CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Income Search

  • cara merubah font dengan css
  • mengatur font di css
  • mengatur font pada css
  • cara mengatur font di css
  • materi megubah font dengan css
  • mengatur font dan font size
  • cara mengubah ukuran dan warna text di css
  • cara mengatur huruf css
  • mengatur font css
  • background pada css
  • tutorial css bahasa indonesia
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *