Gaya HTML

0

Back to: Pemrograman HTML

0

Gaya HTML (Atribut style)

Gaya HTML atau style adalah atribut yang berfungsi untuk menambahkan gaya pada suatu elemen seperti warna teks, warna latar, jenis huruf, ukuran huruf dan lain sebagainya.

Contoh Penggunaan Gaya / Style

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">Saya adalah merah</p>
<p style="color:blue;">Sedangkan saya biru</p>
<p style="font-size:50px;">Kalau saya besar</p>

</body>
</html>

Kurang lebih hasilnya akan seperti ini:

Saya normal

Saya adalah merah

Sedangkan saya biru

Kalau saya besar

Anda dapat menggunakan atribut style untuk melakukan pengaturan gaya dari elemen HTML. Tata bahasanya adalah sebagai berikut.

<nama-tag style="properti:nilai;">

Properti yang dimaksud disini adalah properti CSS. Sedangkan nilai disini adalah nilai dari CSS. Anda dapat mempelajari lebih jauh hal ini dalam pelajaran tentang CSS dalam kursus HTML ini. Lebih jauh tentang CSS dapat anda pelajari dalam kursus tersendiri yang khusus membahas tentang CSS.

Warna Latar

Properti CSS bernama background-color mendefinisikan warna latar dari sebuah elemen HTML.

Contoh background-color

Berikut ini adalah contoh untuk mengatur warna latar sebuah paragraf dengan warna kuning.

<body >

<h3>Ini adalah judul</h3>
<p style="background-color:yellow;">Ini adalah sebuah paragraf.</p>

</body>

Hasilnya kurang lebih akan seperti ini:

Ini adalah judul

Ini adalah sebuah paragraf.

Contoh background-color untuk dua elemen yang berbeda

Berikut ini adalah contoh untuk warna latar pada dua elemen yang berbeda.

<body>

<h2 style="background-color:powderblue;">Ini adalah judul</h2>
<p style="background-color:tomato;">Ini adalah paragraf.</p>

</body>

Hasilnya kurang lebih akan seperti ini:

Ini adalah judul

Ini adalah paragraf.

Warna Teks

Properti CSS bernama color mendefinisikan warna teks dari sebuah elemen HTML.

Contoh Warna Teks

Berikut ini adalah contoh untuk warna teks pada dua elemen yang berbeda.

<h2 style="color:blue;">Ini adalah judul</h2>
<p style="color:red;">Ini adalah paragraf.</p>

Hasilnya kurang lebih seperti ini:

Ini adalah judul

Ini adalah paragraf.

Huruf

Properti CSS bernama font-family mendefinisikan jenis huruf dari sebuah elemen HTML.

Contoh Jenis Huruf

<h2 style="font-family:verdana;">Ini adalah judul</h2>
<p style="font-family:courier;">Ini adalah paragraf.</p>

Hasilnya kurang lebih seperti ini:

Ini adalah judul

Ini adalah paragraf.

Ukuran Teks

Properti CSS bernama font-size mendefinisikan ukuran teks dari sebuah elemen HTML.

Contoh Ukuran Teks

<h2 style="font-size:300%;">Ini adalah judul</h2>
<p style="font-size:160%;">Ini adalah paragraf.</p>

Hasilnya kurang lebih seperti ini:

Ini adalah judul

Ini adalah paragraf.

Perataan Teks

Properti CSS bernama text-align mendefinisikan perataan teks secara horisontal dari sebuah elemen HTML.

Contoh Perataan Teks

<h2 style="text-align:center;">Ini Judul Rata Tengah</h2>
<p style="text-align:center;">Ini adalah paragraf yang rata tengah juga.</p>

Hasilnya kurang lebih seperti ini:

Ini Judul Rata Tengah

Ini adalah paragraf yang rata tengah juga.

Referensi