Belajar HTML : Penggunaan Atribut Style Di HTML (10) - Suka Code
Belajar HTML : Penggunaan Atribut Style Di HTML (10) - Hai sob pada dikesempatan kali ini kita akan belajar mengenai Penggunaan styling pada elemen HTML dapat dilakukan dengan atribut style.
Atribut style pada HTML memiliki sintaks berikut:
<namatag style="property:value;">
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</title> </head> <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>
Hasil setelah kita coba preview :
HTML Background-color
Properti background-color adalah untuk memberi warna pada latar belakang elemen HTML.
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</title> </head> <body> <body style="background-color:green;"> <h1>Ini adalah heading</h1> <p>Ini adalah paragraf</p> </body> </html>
Hasil :
HTML Text Color
Properti color digunakan untuk memberi warna teks pada elemen HTML.
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</title> </head> <body> <h1 style="color:blue;">Ini adalah sebuah heading</h1> <p style="color:red;">Ini adalah sebuah paragraf</p> </body> </html>
Hasil :
HTML Fonts
Properti font-family digunakan untuk mengubah jenis font yang akan digunakan pada elemen HTML.
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</title> </head> <body> <h1 style="font-family:serif;"> Font Family Serif</h1> <p style="font-family:courier;"> Font Family Courier</p> </body> </html>
Hasil :
HTML Ukuran Teks
Properti font-size digunakan untuk memberikan atau mengubah ukuran pada teks di elemen HTML.
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</title> </head> <body> <h1 style="font-size:300%;">Ini adalah heading</h1> <p style="font-size:160%;">Ini adalah sebuah paragraf</p> </body> </html>
Hasil :
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.
Sebagai contoh :
<!DOCTYPE html> <html> <head> <title>Belajar HTML Bersama Suka Code</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.</p> </body> </html>
Hasil :
Kesimpulan
- Atribut style untuk elemen styling pada HTML
- Background-color untuk warna latar belakang
- Color untuk mewarnai teks
- Font-family untuk jenis font pada teks
- Font-size untuk ukuran teks
- Text-align untuk perataan teks
Sekian tutorial Penggunaan Atribut Style Di HTML. Apa bila ada kritik dan saran , maka jangan sungkam untuk komentar.
Semogar bermanfaat.
Sumber : https://www.w3schools.com/
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Belajar HTML : Penggunaan Atribut Style Di HTML (10) - Suka Code"
Posting Komentar