Belajar HTML Part 7 - Atribut Style pada HTML

Atribut Style pada HTML

Pengaturan styling pada elemen HTML dapat dilakukan dengan atribut style.

Atribut style pada HTML memiliki sintaks berikut:

Contoh

<!DOCTYPE html>
<html>
<body>

<p>teks normal</p>
<p style="color:red;">teks warna merah</p>
<p style="color:blue;">teks warna biru</p>
<p style="font-size:36px;">teks berukuran besar</p>

</body>
</html>

Hasilnya:

HTML Background-color

Properti background-color adalah untuk memberi warna pada latar belakang elemen HTML.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body style="background-color:orange;">

<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf</p>

</body>
</html>

Hasilnya:

HTML Text Color

Properti color digunakan untuk memberi warna teks pada elemen HTML:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<h1 style="color:blue;">Ini adalah sebuah heading</h1>
<p style="color:red;">Ini adalah sebuah paragraf</p>

</body>
</html>

Hasilnya:

HTML Fonts

Properti font-family digunakan untuk mengubah jenis font yang akan digunakan pada elemen HTML:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

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

</body>
</html>

Hasilnya:

HTML Ukuran Teks

Properti font-size digunakan untuk memberikan atau mengubah ukuran pada teks di elemen HTML:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<h1 style="font-size:300%;">Ini adalah heading</h1>
<p style="font-size:160%;">Ini adalah sebuah paragraf</p>

</body>
</html>

Hasilnya:

HTML Text-Align

Properti text-align digunakan untuk memberikan perataan teks horisontal untuk sebuah elemen HTML. Properti ini memiliki value left, center, right, dan justify.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<h1 style="text-align:center;">Posisi Heading di tengah</h1>
<p style="text-align:left;">Posisi paragraf di kiri.</p>
<p style="text-align:center;">Posisi paragraf di tengah.</p>
<p style="text-align:right;">Posisi paragraf di kanan.</p>
<p style="text-align:justify;">Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan. Posisi paragraf rata kiri kanan.</p>

</body>
</html>

Hasilnya: