CSS lanjutan

-
Css lanjutan

Merubah jenis font HTML dengan CSS (font-family)

Jadi kali ini kita akan membahas cara merubah tampilan font HTML dengan menggunakan CSS dengan menggunakan font-family.

Dengan cara menulis kan di dalam selector

Jika sebelumnya kita di batasi untuk menggunakan web-safe font, yang artinya anda hanya terbatas menggunakan font font yang memang aman dan terdapat di berbagai platform seperti times New roman, arial, Tahoma,dan sebagainya.

Sekarang kita dapat bebas berekspresi dengan font pilihan kita dengan menggunakan font-face.


Menggunakan Google font dengan CSS

Kali ini kita akan bahas bagaimana caranya merubah font dengan menggunakan Google font.

Google font sendiri adalah salah satu "produk" google yang menurut saya sangat bermanfaat bagi para weh designer.

Di google fonts kita bakal melihat banyak pilihan font yang keren yang bisa kita aplikasikan pada web kita

  • Pertama yang harus kita lakukan adalah menuju ke halaman Google font https://fonts.google.com/.
  • Kemudian akan muncul berbagai macam pilihan font, kita pilih font mana yang ingin gunakan, misal saya ingin menggunakan font roboto, kita klik roboto, maka akan muncul tampilan seperti ini
  • Kemudian pilih select font, lalu akan muncul menu pop up di pojok kanan atas.
  • Kemudian copy yang ada di dalam kotak dan letakkan di dalam tag head pada file.html.
  • Lalu untuk menggunakan nya kita cukup mengetikkan pada file CSS

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