CSS lanjutan

-
Css lanjutan

Menebalkan huruf HTML dengan CSS (Bold)

Untuk membuat huruf atau font HTML menjadi tebal (Bold), kita menggunakan properti font-weight.

Properti font-weight memiliki 13 nilai yang terdiri dari 4keyword dan 9angka.

Ke- 13 nilai properti font-weight tersebut adalah: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, dan 900.

Kesemua nilai ini dimaksudkan untuk membuat berbagai ukuran ketebalan teks.

Dimulai angka 100 untuk teks yang paling tipis, sampai dengan nilai 900 untuk teks yang paling tebal.

Namun agar ke seluruh nilai ini memiliki efek yang berbeda, jenis font yang di pilih juga harus menyediakan pilihan-pilihan ini.

Untuk menghapus efek tebal dari teks, gunakan perintah font-weight: normal.

Hasil dari kode di atas


Mengubah tampilan huruf kapital (case) Teks HTML

Kadang kala kita ingin mengubah sebuah kalimat menjadi huruf besar semua atau huruf kecil semua.

Untuk keperluan ini, CSS menyediakan properti teks-transform.Sama seperti aplikasi word processing seperti Microsoft word, kita bisa mengubah tampilan teks menjadi huruf besar semua (uppercase), menjadi huruf kecil semua (lowercase) atau membuat huruf pertama setiap kalimat menjadi huruf besar (capitalize).

property text-transform bisa di isi dengan 4nilai yaitu uppercase, lowercase, capitalize, dan none.Khusus untuk nilai none, nilai ini akan menghapus semua efek dari text-transform.

Biasanya, properti text-transform digunakan untuk bagian tertentu dari halaman web agar sama dalam tampilan, seperti judul sebuah artikel.

Hasil dari kode di atas


Membuat teks underline, overline dan line-throught

Penggunaan property CSS text-decoration untuk mendapatkan efek garis bawah (underline), garis atas (overline), dan garis tercoret (line-throught) cukup sederhana, kita tinggal menginput nilai tersebut sebagai nilai properti dari text decoration, seperti contoh di bawah ini.

Selain ketiga nilai tersebut, properti text-decoration memiliki 2 nilai tambahan, yakni blink dan none.

Blink di tujukan untuk membuat teks berkedip, namun karena efeknya yang mengganggu, umumnya web browser modern mengabaikan efek ini.

Sedangkan untuk menghapus text-decoration kita, kita bisa menggunakan perintah text-decoration: none;

Perintah none ini biasa digunakan untuk menghapus efek underline dari tag a yang merupakan setting bawaan web browser.

Sebagai tutorial kali ini, berikut adalah contoh kode HTML dan CSS dengan properti text-decoration.

Hasil dari kode di atas

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