Style di HTML merupakan atribut yang berfungsi untuk menambahkan Style pada sebuah elemen HTML, seperti merubah warna, font, ukuran, dan lain-lain.
Section Artikel
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
