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.
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
Komentar
Posting Komentar