Atribut Style HTML
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>
Atribut Style HTML
Menetapkan Style elemen HTML, bisa dilakukan dengan atribut style.
Atribut style HTML memiliki sintaks berikut:
<tagname style = "property: value;">Properti itu adalah properti CSS. Nilai adalah nilai CSS.
Anda akan belajar lebih banyak tentang CSS nanti di tutorial ini.
Warna Latar Belakang HTML
Properti latar-warna mendefinisikan warna latar belakang untuk elemen HTML.
Contoh ini mengatur warna latar belakang untuk halaman ke powderblue:
Contoh Code:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Warna Teks HTML
Properti warna mendefinisikan warna teks untuk elemen HTML:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Font HTML
Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Ukuran Teks HTML
Properti ukuran font mendefinisikan ukuran teks untuk elemen HTML:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Alignment Teks HTML
Properti text-align mendefinisikan pelurusan teks horizontal untuk elemen HTML:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Ringkasan Bab
- Gunakan atribut Style untuk menata elemen HTML
- Gunakan background-color untuk warna latar belakang
- Gunakan color untuk warna teks
- Gunakan font-family untuk font teks
- Gunakan font-size untuk ukuran teks
- Gunakan text-align untuk alignment teks
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2