CSS lanjutan

-
Css lanjutan

Mengubah ukuran font HTML dengan CSS (Font-size)

Untuk mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size.

Properti font-size cukup sederhana dan ditulis seperti contoh berikut ini.

Dengan menulis kode CSS di atas, semua teks di dalam tag p akan memiliki font dengan ukuran 40px.

Kita juga bisa mengganti nya dengan satuan ukuran yang lain, dimulai dari pixel seperti contoh di atas, keyword seperti small, medium, large, ukuran satuan persen, em, dan juga ukuran lain seperti cm, mm, pt, dan pica.

Ukuran satuan cm, mm, pt dan pica berasal dari media cetak seperti koran dan majalah.

Satuan ini cocok untuk media yang bersifat pasti (dimana kita bisa menentukan sendiri ukuran kertas yang akan digunakan).

Namun satuan ukuran tersebut tidak cocok di dalam media elektronik seperti web.

Karena media yang digunakan oleh pengunjung web bisa bermacam-macam mulai dari smartphone dengan layar 2inchi sampai dengan monitor desktop 20inchi atau lebih.

Sehingga jarang digunakan, dan satuan yang sering digunakan adalah px, persen, dan em.


Mengatur tinggi baris dalam paragraf HTML(Line-height)

Yang dimaksud tinggi baris dalam paragraf adalah besar jarak antara satu baris dengan baris di bawahnya.

Dalam penggunaan sehari-hari kita menggunakan istilah "spasi paragraf" untuk hal ini.

Misalnya agar tulisan skripsi menjadi lebih mudah dibaca, kita mengganti spasi (dalam aplikasi Microsoft word) menjadi 1,5.

Dibandingkan dengan jarak 1spasi, pengaturan sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih "lega".

Didalam CSS pengaturan "besar spasi" ini ditangani dengan property line-height.

Nilai dari property line-height bisa di isi dengan nilai pixel, persen, em atau angka(tanpa satuan). berikut adalah contoh penulisan nya.

Berikut adalah kode HTML dan CSS dengan menggunakan berbagai nilai line-height.

Maka hasil dari kode di atas adalah.


Memiringkan dan menebalkan huruf

Efek huruf miring sering digunakan untuk menandai kalimat atau kata penting di dalam konten kita.

Untuk mendapatkan efek huruf miring (italic) dengan CSS, kita bisa menggunakan property font-style. Property font-style memiliki 3 nilai, yakni: normal, Italic, dan oblique.

Untuk memiringkan huruf, kode CSS nya adalah font-style: italic atau font-style oblique.

Kedua perintah ini akan menghasilkan efek huruf miring. Perbedaan nya font-style italic akan menggunakan format font terpisah yang bertipe italic (jika tersedia), sedangkan font-style oblique hanya akan memiringkan font yang ada beberapa derajat (tanpa menggunakan font italic khusus).

Perbedaan italic dan oblique umumnya tidak terdeteksi, namun jika font yang ada menyediakan versi italic, font-style italic akan menghasilkan huruf miring yang lebih baik.

Jika kita ingin menghapus efek huruf miring dari teks, gunakan perintah font-style: normal.

Comments

Post a Comment

Popular posts from this blog

Pengertian kode warna RGBA, HSL, HSLA, dan Atribut selector di CSS

-
Image
Pengertian kode warna RGBA, HSL, HSLA, dan Atribut selector di CSS Pengertian dan penulisan kode warna RGBA, HSL, DAN HSLA Pengertian kode warna RGBA Jika kode warna RGB merupakan singkatan dari Red, green, blue, maka kode warna RGBA adalah singkatan dari Red,Green,Blue,Alpha. Tambahan kata alpha disini merujuk kepada alpha channel. Alpha channel adalah sebuah metode untuk menentukan tingkat transparan sebuah warna(opacity). Nilai alpha 0 akan membuat sebuah warna transparan (tembus pandang), dan nilai alpha 1 akan membuat warna solid dan tidak tembus pandang terhadap objek lain dibelakang nya(ini merupakan nilai default). Namun kita bisa membuat nilai berada di antara 0 dan1, dengan penulisan desimal seperti 0.5, 0.6, 0.9. Dengan demikian kita bisa membuat efek tembus pandang dengan CSS, terutama untuk beberapa objek yang saling bertumpuk. Untuk penulisan kode warna RGBA dalam CSS, kita menggunakan notasi penulisan desimal, dan menambah keyword "rgba" diaw
Read more

Mengenal sifat penurunan (Inheritance), Penulisan kode warna Mengenal satuan nilai(Value) di CSS

-
Image
Mengenal sifat penurunan (Inheritance), Penulisan kode warna Mengenal satuan nilai(Value) di CSS Mengenal sifat penurunan dalam CSS (Inheritance) Inheritance dalam CSS adalah sifat penurunan efek CSS dari sebuah tag HTML Kepada tag HTML lainnya. Syarat untuk inheritance adalah tag tersebut harus berada di dalam tag lainnya. Di dalam HTML , setiap tag umumnya akan berada di tag lain. Untuk seluruh tag HTML akan berada di dalam tag HTML, dan untuk seluruh tag yang tampil di web browser akan berada di dalam tag body. Sebagai contoh, perhatikan potongan HTML berikut ini. Dari contoh di atas,tag p berada di dalam tag div, sehingga dapat dikatakan tag div adalah induk parent dari tag p. Sedangkan tag em yang berada di dalam tag p merupakan anak ( child ) dari tag p dan grandchild dari tag div. Jika kita membuat kode CSS sebagai berikut. Maka efek dari kode CSS tersebut akan membuat seluruh text di dalam tag div akan berwarna hijau, walaupun di dalam tag div juga terdap
Read more

CSS lanjutan

-
Image
Css lanjutan Merubah warna teks (Font) HTML dengan CSS (color) Perintah CSS yang digunakan untuk mengubah warna teks HTML adalah dengan menggunakan properti color, berikut contoh penulisannya: Sebagai nilai untuk property color, bisa berupa keyword warna (seperti red, green, blue ,dan yellow), bisa juga berupa notasi angka hexadesimal RGB (seperti #112233, #ABCDER) atau dalam bentuk desimal (seperti RGB(0,100,255) atau RGB(0%,63%,100%). Penjelasan lebih lanjut tentang pengertian metode warna ini bisa dibaca pada tutorial belajar CSS penulisan kode warna pada CSS. Sebagai contoh tutorial, berikut kode HTML dan CSS dengan penggunaan properti color. Hasil dari kode di atas Pada contoh di atas, saya membuat 3 buah kalimat dengan class: pertama, kedua, ketiga.Masing masing class tersebut diset warna teksnya dengan CSS Mengatur lebar spasi antar huruf dan kata teks HTML Properti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf. Nilai yang digun
Read more