» » Tutorial mengatur gaya font pada bahasa pemrograman CSS

Tutorial mengatur gaya font pada bahasa pemrograman CSS

Edit

Baca Juga

Tutorial font styling/ gaya font pada bahasa pemrograman CSS

Tutorial font styling/ gaya font pada bahasa pemrograman CSS
font styling CSS
Hallo teman-teman, apa kabar? Pada artikel sebelumnya kita sudah membahas jenis-jenis selector pada bahasa pemrograman CSS. Setelah teman-teman tau cara pemanggilan elemen pada tag HTML.

Selanjutnya artikel dibawah ini yakni Part 3 kami akan membhas tentang tutorial font styling / gaya2 font pada CSS seperti cara mengatur jenis font, ukuran font, ketebalan font, dll.

Font styling pada CSS

Merupakan property font yang digunakan untuk mengubah font, mengatur ukuran font, dan mengatur jenis font (garis miring, huruf tebal, tulisan miring). ok langsung saja property apa saja yang terkait dengan font pada bahasa pemrograman CSS.
  1. Font-family, berfungsi untuk mengatur jenis font yang akan digunakan seoerti (Arial, Times new roman, dll)
  2. Font-size, berfungsi untuk mengatur ukuran font. Satuan valuenya berupa (px, %, em)
  3. Font-weight, berfungsi untuk mengatur ketebalan font. Valuenya bisa berupa (lighter, normal, 100-900, bold, bolder)
  4. Font-style, berfungsi untuk mangatur gaya font. Valuenya dapat berupa (italic, normal, oblique)
  5. Font-variant, berfungsi untuk mengatur menjadi small-caps. Maksudnya pertama ia akan mengubah semua huuruf menjadi capital (besar). kemudian menjadikan huruf yang pertama ukurannya akan lebih besar daripada huruf setelahnya. Valuenya bisa berupa (normal dan small-caps)
  6. Line-height, berfungsi untuk megatur spasi antar baris (jarak kebawah). Satuan valuenya bisa berupa (normal, px dan em)
Teman-teman gak usah bingung dulu, karena dibawah ini kami akan mencontohkan ke 6 property diatas. Berikut adalah syntak dari keenam property diatas :

File index.html
<!Doctype html>
<html>
<head>
<title> Belajar CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<H1>Belajar CSS </H1>
<H2> Tutorial font styling </H2>
<p> Font styling pada CSS Merupakan property font yang digunakan untuk mengubah font, mengatur ukuran font, dan mengatur jenis font (garis miring, huruf tebal, tulisan miring). ok langsung saja property apa saja yang terkait dengan font pada bahasa pemrograman CSS. </p>
</div>
</body>
</html>

File style.css
H1 {
     Color : red;
     Font-family : times new roman;
     Font-size : 50px;
}
H2 {
     Color : blue;
     Font-variant : small-caps;
     Font-weight : bold;
}
p {
     Color : chocolate;
     Line-height : 50px;
     Font-style : italic;
}

Dapat dilihat pada contoh diatas tulisan yang berada pada elemen HTML, kemudian dipanggil dengan selector sesuai dengan nama tag HTMLnya. Dan kita rubah gaya font seusai apa yang kita inginkan dengan cara menuliskan property2 font seperti yang terlihat pada contoh syntak diatas. Apabila program diatas dijalankan maka akan menghasilkan seperti gambar dibawah ini.
Baiklah itulah sedikit penjelasan tentang tutorial mengatur font pada CSS. Apabila teman-teman masih penasaran, teman bisa coba otak-atik menurut kreasi teman masing-masing.

Kunjungi artikel selanjutnya tutorial CSS part 4. kami akan membahas tentang tutorial text styling pada bahasa pemrograman CSS.


Subscribe to receive free email updates:

0 Response to "Tutorial mengatur gaya font pada bahasa pemrograman CSS"

Post a Comment

Subscribe to: Post Comments (Atom)