Menambahkan kode italic (text miring) dengan CSS (Cascading style sheets)

Lanjut ke tutorial CSS lainnya, yaitu tentang bagaiamana cara kita menambahkan suatu kode italic dengan CSS (Cascading style sheets). Untuk mengubah format text menjadi italic atau miring, biasanya kita seringkali menggunakan tag html seperti <i> dan diakhiri dengan </i>. Namun, ada cara lain, yaitu dengan menambahkan properti font-style.

Penulisan properti italic seperti berikut :

font-style :italic;

jika kita masukan dalam kode tag <style>, akan tampil seperti berikut ini :

<style type="text/css">

....Target design......{ font-style:italic;}

</style>

Mari kita masukan dalam kode html, yang akan kita ubah adalah link, tulisan, dan judul. Oke, langsung saja menuju editor seperti notepad, lalu tuliskan kode berikut :

<html>
<head>

<style type="text/css">
h1 {font-style:italic;}
.miring {font-style:italic;}
a {font-style:italic;}
</style>

</head>
<body>

<h1>Judul yang akan kita miringkan</h1><br/><br/>

<i>ini merupakan metode memiringkan text dengan kode html, semua penggunaan kode tergantung kebutuhan anda semuanya.sekarang coba bandingkan dengan text yang dibawah.. sangat mirip bukan</i>

<br/><br/>

<div class="miring">
memiringkan text itu bisa juga menggunakan kode font-style:italic, cara ini merupakan tekhnik yang ramah untuk program web anda.
dengan cara ini maka teks dapat miring.italic italic oo italic ya ya, italic.<br/> bagaimana kalau saya cerita sedikit tentang hidup saya, perkenalkan nama saya ari, titik
</div>

<br/>
<a href="link_anda"> sekarang css</a>

</body>
</html>

Silahkan simpan dalam file .html (seperti italic.html), lalu setelah itu buka dengan browser google chrome atau sejenisnya. Maka hasilnya akan tampak seperti pada gambar berikut ini :

Menambahkan kode italic (text miring) dengan CSS (Cascading style sheets)

Penjelasan kode :

<html> dan </html> digunakan sebagai tag pembuka dan tag penutup dari suatu markup html
<head> dan </head> merupakan tag untuk heading, bisa digunakan untuk menambahkan judul seperti <title>, untuk tag meta, ataupun menambahkan script JavaScript.
<style> dan </style> merupakan tag pembuka dan penutup dalam mendesign css
h1 / .miring / a dalam tag <style>, merupakan selector untuk menentukan apa yang akan di design.
font-style : italic merupakan properti dan value untuk memiringkan text
<body> dan </body> digunakan untuk menampilkan isi ke user, jadi dibagian nilah element-element di tulis.
<h1> ini merupakan tag heading, yang berfungsi sebagai judul
<a> digunakan untuk membuat link
<div> merupakan kode yang sangat penting dalam css, berfungsi untuk mengelompokan suatu element tertentu

Oke selsai… mari menuju tulisan selanjutnya

Related posts:

Leave a Reply Cancel reply