Tutorial Belajar CSS: Cara Penulisan Singkat Property Font CSS

Posted on

Pada panduan Belajar CSS kali ini kita akan mempelajari Cara Penulisan Singkat Property Font CSS. Bermacam property text CSS yang telah kita bahas sejauh ini dapat disingkat penulisannya dengan menggunakan property: font.


Cara Penulisan Singkat Property Font CSS

Kalau kamu mengikuti pembahasan panduan belajar CSS mengenai teks dari awal, sangat tak kita telah membahas 6 property text CSS, yakni: font-family, font-size, font-variant, font-weight, font-style dan line-height. Terkadang pada perancangan kode CSS, kita akan menggunakan seluruh property tersebut secara sekaligus. CSS menyediakan cara penulisan singkat bagi menyatukan property font kedalam 1 command, yakni: font.

Agar lebih gampang dimengerti, berikut yaitu contoh penulisan property font:

Property font diatas bermaksud:

Seluruh tag <p> akan ditampilkan dengan baris miring (italic), huruf tebal (bold), pada wujud small-caps, dengan ukuran font sebesar 16px, dan line-height sebesar 150%. Jenis font yang digunakan yaitu Arial, Helvetica, sans-serif.


Aturan Penulisan Property font CSS

Dengan menggunakan penulisan property font seperti diatas, kita menyatukan 6 properti pada 1 defenisi, namun dengan aturan selaku berikut:

  • Kita tak mesti menggunakan ke 6 property sekaligus, namun property font-size dan font-family minimal mesti dicantumkan, seperti contoh berikut: font: 1.2em Georgia, Times, serif;
  • Gunakan tanda spasi bagi memisahkan nilai dari sebuah property dengan property lainnya, dan gunakan tanda koma hanya bagi font-family.
  • Khusus bagi menulisan line-height, mesti ditulis setelah font-size dengan menggunakan tanda garis miring seperti berikut ini: 12px/14px atau 1.5em/120%.
  • 2 property terakhir mesti diisi dengan font-size (atau font-size/line-height) diikuti dengan font-family secara berurutan. Property lainnya (font-variant, font-weight, dan font-style) ditulis sebelum kedua property ini, dan tak mesti berurutan. Selaku contoh, kedua property ini diperbolehkan dan akan menghasilkan tampilan yang sama:
  • Kalau kita tak menuliskan seluruh property, karenanya property yang tak ditulis akan di set menjadi normal. Hal ini akan menghapus efek turunan (inheritance) dari tag diatasnya. Selaku contoh, apabila kita mendefenisikan:

    dan kemudian mendefenisikan:

    Tag <p> tak akan tampil dengan italic dan bold walaupun tag <p> berada di bawah tag <body> (dimana efek inheritance CSS seharusnya akan berefek). Property font-syle dan font-weight akan di-reset menjadi normal. Dengan kata lain, apabila kamu hanya menuliskan font-size dan font-family saja seperti contoh tag <p> diatas, karenanya hakekatnya yang akan dijalankan oleh web browser yaitu:

    Nilai normal akan merancang efek turunan (inheritance CSS) tertimpa nilainya dengan nilai default web browser.


Panduan Cara Penulisan Property Font CSS

Pada contoh di bawah ini saya akan merancang beberapa paragraf dengan menggunakan penulisan singkat property font. Berikut yaitu contoh kode HTML dan CSSnya:

 Cara penulisan singkat property font CSS ini dapat mempermudah kita pada menulis property font CSS, namun efek non-heritance yang ditimbulkannya sebaiknya menjadi catatan agar kita tak bingung dan bertanya-tanya kenapa efek font-size tak ‘diturunkan’ kepada tag dibawahnya.


eBook CSS Uncover Duniailkom

Kalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/