HTML-materi-4 : Style

Berjumpa lagi untuk belajar bareng mengenai HTML. Sebelumnya bagi yang baru bergabung, silakan simak materi sebelumnya : HTML-materi-3 : Heading dan Paragraph atau bisa juga dari materi awal : Berkenalan dengan HTML. Pada materi kali ini kita akan membahas tentang style.

Apa itu style ? Style adalah attribute yang digunakan untuk mempercantik suatu element. Misalnya menambahkan warna, mengubah font, memperbesar atau memperkecil size, dan masih banyak lagi.

Tanpa basa basi lagi, langsung kita sajikan contoh di bawah ini :

<!DOCTYPE html>
<html>
    <body style="background-color:yellow;">
        <h1 style="text-align:center;">
            Judul di Tengah untuk Dokumen dengan Latar Kuning
        </h1>
        <p>Ini adalah dokumen yang warna dasarnyanya kuning</p>
        <p style="background-color:rgb(127,255,212);color:red;">
            Ini adalah paragraf yang warna dasarnya aqua marine
            dengan tulisan berwarna merah
        </p>
        <h2 style="font-family:verdana;">Sub Judul dengan Font Verdana</h2>
        <p style="font-family:calibri;font-size:150%;">
            Paragraf dengan font Calibri dan ukuran 150%
        </p>
    </body>
</html>

Silakan copy, contoh script di atas ke notepad++ lalu simpan dalam bentuk file HTML dan panggil dari browser untuk melihat langsung hasilnya. Mau dimodifikasi ? Silakan !

"color:red;" , "color:blue;" , dan "font-size:50px;" sebenarnya adalah CSS. color adalah CSS property sedangkan red adalah CSS value.

HTML-materi-4 : Style

0 Response to "HTML-materi-4 : Style"

Post a Comment