HTML formating dalam CSS ~ Pemrograman dan Teknologi

Untuk satu tag atau tulisan pendek, kita bisa menggunakan tag <b>, <i>, <u>, dan tag HTML Formating lainnya untuk mengubah ketebalan, kemiringan dan tampilan tulisan. Tapi, untuk teks yang lebih panjang dan melibatkan banyak tag, kita akan membutuhkan style CSS. Properti yang bisa digunakan untuk menggantikan tag tersebut adalah font-weight, font-style dan text-decoration. Berikut ini nilai-nilai dari properti CSS yang digunakan untuk properti-properti tersebut.

font-style: normal, italic, oblique, initial, inherit;
font-weight: normal, bold, bolder, lighter, initial, inherit;
text-decoration : none, underline, overline, line through.

Normal adalah bentuk huruf sesuai dengan pengaturan di browser. Abaikan dulu nilai initial dan inherit pada semua properti CSS di atas. Sekarang kita coba nilai lainnya pada kode HTML.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
    <h2 class="styleku">Judul</h2>
    <p>paragraf 1</p>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
    <p>paragraf 5</p>
    <p>paragraf 6</p>
    <p id="styleku">paragraf 7</p>
</BODY>
</HTML>

File CSS-nya (cssku.css) :

p{
    font-weight : normal;
    text-decoration : line-through;
}

.styleku{
    font-weight : bold;
    font-style : italic;
    text-decoration : underline;
}

#styleku{
    font-weight : lighter;
    font-style : oblique;
    text-decoration : overline;
}

Silakan coba sendiri nilai lain untuk masing-masing properti. Bandingkan perbedaan tampilan yang dihasilkan oleh masing-masing nilai!

Hasilnya tidak sesuai? Atau malas ngetik? Kalian bisa download file HTML dan CSS-nya di sini.