jikalau teman-teman perhatikan pada website-website yang teman-teman kunjungin, niscaya teman-teman sering melihat website yang memakai font(huruf) tebal dan miring, biasanya aksara tebal dan miring dipakai untuk memberi klarifikasi dan pementingan dalama sebuah kata atau kalimat pada conten website. Pada kesempatan kali ini akan menawarkan tutorial cara Membuat Huruf Tebal dan Huruf Miring dengan CSS. Untuk lebih terperinci mari kita lihat klarifikasi dibawah ini.
Cara Memiringkan Huruf Dengan CSS
Huruf miring sering dipakai dalam sebuah web, dimana aksara ini dipakai untuk tujuan tertentu biasanya dipakai untuk menandai kalimat atau kata penting di dalam konten. Untuk menggunkan style atau gaya Font ini kita sanggup memakai property font-style. property font-style ini mempunyai 3 nilai yaitu: normal, italic, dan oblique. Pada dasarnya untuk memakai aksara miring kita sanggup memakai italic atau oblique, kedua value(nilai) dari property font-style ini sama-sam berfungsi untuk memiringkan huruf, namun ada sedikit perbedaan dari kedua value tersebut, dimana font-style: italic akan memakai format font terpisah yang bertipe italic, sedangkan font-style: oblique hanya akan memiringkan font yang ada beberapa derajat dan jikalau teman-teman ingin mengembalikan aksara ke bentuk semula(default) teman-teman sanggup memakai value normal.
Cara Membuat Huruf Tebal Dengan CSS
Dalam menciptakan font HTML menjadi tebal, teman-teman sanggup memakai property font-weight dimana property ini berfungsi menebalkan aksara atau font, property ini mempunyai value yang bermacam-macam diantaranya: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Semua value diatas mempunyai tingkat ketebalan yang berbeda-beda, dimulai dari yang paling kecil 100 dan yang paling besar 900, Jika teman-teman ingin menciptakan aksara menjadi tebal tanpa mempedulikan tingkat ketebalannya, teman-teman sanggup menggunaka font-weight: bold. Dari banyak sekali macam value diatas teman-teman sanggup memakai sesuai impian dan kebutuhan. Untuk menghapus atau mengembalikan text ke bentuk semula(default) teman-teman sanggup memakai value normal perintahnya sebagai berikut: font-weight : normal.
Untuk lebih terperinci mari kita buat teladan untuk penerapannya, silahkan teman-teman tulis code dibawah ini dan simpan dengan nama file sesuai dengan yang teman-teman inginkan.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .box { width: 500px; margin: auto; } p.satu { font-style: oblique; font-weight: bold; color: blue; } p.dua { font-style: italic; font-weight: 600; color: red; } </style> </head> <body> <div class="box"> <p class="satu">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p> <p class="dua">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> jikalau teman-teman jalankan maka risikonya akan menyerupai berikut ini:
sedikit klarifikasi dari code diatas, jikalau teman-teman perhatikan pada code CSS diatas, aku mengunakan value oblique untuk memiringkan aksara pada paragraf pertama, menawarkan ketebalan aksara dengan value bold dan menawarkan warna pada aksara dengan value blue. Sedangkan pada paragraf kedua aku memiringkan aksara dengan value italic, menawarkan ketebalan dengan value 600 dan menawarkan warna dengan property color dengan value red. Untuk lebih mengenal semua value dari masing-masing property diatas, silahkan teman-teman ganti value dari code diatas dengan value yang sudah aku jelaskan dari masing-masing property tersebut. Sekian tutorial dari , agar sanggup membantu teman-teman dalam menciptakan dan mempelajari website.
No comments:
Post a Comment