HTML

Style di HTML: Contoh – Cara dan Sintaknya

Style di HTML merupakan atribut yang berfungsi untuk menambahkan Style pada sebuah elemen HTML, seperti merubah warna, font, ukuran, dan lain-lain.

Contoh:
<!DOCTYPE html>
<html>
<body>

<p>Aku normal</p>
<p style="color:blue;"> Aku adalah biru</p>
<p style="color:purple;">Aku adalah Ungu</p>
<p style="font-size:50px;">Aku berukuran besar</p>

</body>
</html>

Atribut Style pada HTML

Mengatur style pada sebuah elemen HTML, dapat dilakukan dengan menggunakan atribut style.

Atribut Style pada elemen HTML memiliki sintaks seperti berikut:

<tagname style="property:value;">

Property adalah properti pada CSS yang berisi parameter desain yang dapat dirubah dalam sebuah elemen dan value adalah adalah nilai yang ingin di kita berikan pada CSS.

Catatan: Anda akan belajar lebih lanjut nanti tentang CSS pada tutorial ini.

Warna Background

Properti CSS “background-color” digunakan unruk menentukan warna latar belakang pada sebuah elemen HTML.

Contoh:

Mengatur warna latar belakang halaman menjadi powderblue.

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>Ini Heading</h1>
<p>Ini Paragraf.</p>

</body>
</html>
Contoh:

Mengatur warna latar belakang untuk dua elemen yang berbeda

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">Ini Heading</h1>
<p style="background-color:tomato;">Ini Paragraf.</p>

</body>
</html>

Warna Teks

Properti CSS “color” (CSS Color) digunakan untuk menentukan warna teks pada elemen HTML.

Contoh:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ini Biru</h1>
<p style="color:red;">Ini paragraf.</p>

</body>
</html>

Fonts

Properti CSS “font-family” di gunakan untuk mendefinisikan jenis font yang akan digunakan pada elemen HTML.

Contoh:
<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">Ini Heading</h1>
<p style="font-family:courier;">Ini Paragraf.</p>

</body>
</html>

Ukuran Text

Properti CSS “font size” digunakan untuk mendefinisikan ukuran teks pada elemen HTML.

Contoh:
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">Ini Heading</h1>
<p style="font-size:160%;">Ini Paragraf.</p>

</body>
</html>

Perataan Teks

Properti CSS “text-align” (text alignment di CSS) digunakan untuk mendefinisikan perataan teks horizontal pada elemen HTML.

Contoh:
<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Heading rata tengah</h1>
<p style="text-align:center;">Paragraf rata tengah.</p>

</body>
</html>

Ringkasan Bab

  • Gunakan atribut style digunakan untuk menata elemen HTML
  • Gunakan background-color untuk mengatur warna latar belakang elemen HTML
  • Gunakan color untuk mengatur warna teks pada elemen HTML (Text Color di CSS)
  • Gunakan font-family untuk mengatur jenis font pada elemen HTML (Font Family)
  • Gunakan font-size untuk mengatur ukuran teks pada elemen HTML (Font Size)
  • Gunakan text-align teks untuk mengatur perataan teks pada elemen HTML


Catur Kurnia Sari

Share
Tags: atribut styleCSShtmlhtml dan cssstyle html