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

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya