Langsung ke konten utama

belajar CSS dasar bersama part 9 : Mengenal dan mencoba tentang Properti Font pada css

 


layaknya yang lain, dalam css juga ada yang namanya font. dan properti font ini juga begitu penting peranannya dalam pembuatan website yang sederhana sampai yang expert, tapi sebelum kita memulai untuk mencoba dan memahami apa itu font dalam css dan apa fungsi font dalam css dan bagaimana penerapan font dalam kode css, izinkan saya untuk mengucapkan 

 Salam Sobat semua

Alhamdulillahi Robbil 'Alamiin atas segala nikmat yang Allah berikan dan salah satunya nikmat bisa menulis hari ini dan berbagi dalam tulisan ini dengan kalian

dan mudah-mudahan tulisan ini bisa membawa manfaat sehingga saya tidak tergolong orang-orang yang menyia-nyiakan nikmat.

pada kesempatan kali ini kita akan mencoba apa yang namanya font. ya font itu menurut versi saya adalah suatu kode pada css yang mengatur beberapa peraturan seperti

ukuran,jenis dan lain-lain pada suatu huruf atau tulisan pada html atau css.


biar lebih jelas, gamblang, dan mudah memahami kita langsung mencoba menerapkannya dalam kode di notepad++ nya kawan


1. buat yang sudah mengkuti dari sebelum-sebelumnya bisa kalian duplikat dulu data code yang sebelumya sudah dibuat biar lebih menghemat tenaga dan waktu,

kemudian buka file yang telah di buat sebelumnya. bagi yang baru mengikuti silahkan buka notepad++ kalian kemudian ketik atau copy paste kode css berikut ini

body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:75px;

}

dan kode html berikut ini

<html>

<head>

<title>My Web</title>

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

</head>

<body>

<div id="main">

<p>Ini adala isi dari main content yang akan saya buat 

sebagai website pertama saya

</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 

website prtama saya

</p>

</div>

</body>

</html>

dan jika kalian benar dan tepat langkah-langkahnya maka akan didapatkan hasil seperti berikut



 kode diatas kita menggunakan properti

font-size:value (bisa satuan px,atau em. kalau persen saya belum pernah memakainya. yang sering saya pakai saya memakai pixel).

jadi bisa kita lihat dari hasil diatas fungsi dari font-size ialah mengatur besar kecilnya ukuran suatu huruf atau tulisan pada css atau HTML.

2. sekarang kita tambahin dengan font-weight, dan font-sizenya kita kecilkan sehingga bisa didapatkan kode seperti berikut.

body{

margin:0px;

}

#main{

border:1px solid blue;

min-width:150px;

width:99.1%;

background:#edfa1d ;

margin:0px;

padding:11px 0px 0px 11px;

font-size:14px;

font-weight:bold;


}

dan jika langkah dan kodenya benar dan tepat maka akan diperoleh hasil seperti berikut


dari hasil di atas maka font-weight ini berfungsi mengatur tebal tidak nya suatu huruf atau tulisan pada css atau html. dan untuk value atau nilai font-weight ini

setahu saya cuma bold, kalau ada yang lain monggo bisa menambahkan melalui komen atau inbox saya, karena selama ini saya hanya memakai nilai bold saja.

3. dan yang terakhir yang sering saya pakai pada properti atau property font ini yaitu font-family. font-family ini berfungsi untuk mengatur jenis dari suatu huruf
atau tulisan pada suatu css atau HTML. biar lebih mudah dipahami kita langsung saja kita terapkan pada kode berikut
body{
margin:0px;
}
#main{
border:1px solid blue;
min-width:150px;
width:99.1%;
background:#edfa1d ;
margin:0px;
padding:11px 0px 0px 11px;
font-size:14px;
font-family:arial;

}

dan dari kode diatas maka akan diperoleh suatu hasil seperti berikut



 maka jika kita lihat dari hasil diatas maka tulisan pada html kita sudah berubah bentuknya karena kita pakai tulisan jenis arial, kalian bisa coba coba merubah sendiri

untuk value atau nilai dari font-family seperti jenis serif,sant-serif dan lain-lain.


untuk tulisan kali ini untuk masalah font saya rasa cukup sekian dulu, mudah-mudahan tulisan ini bisa bermanfaat, aamiiin.

kita lanjut di next tulisan.


salam sobat semua


#css #html #font #font-family #font-size #free #share #web #websites #website #berbagi #gratis

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya