Gaya HTML

Atribut style digunakan untuk mengubah gaya elemen HTML.

Teks ini berada dalam Verdana dan merah
Teks ini berada dalam Times dan biru
Teks ini tinggi 30 pixel

Coba Sendiri

Atribut style HTML

Fungsi atribut style HTML:

Menyediakan metode umum untuk mengubah gaya semua elemen HTML.

Gaya diperkenalkan dalam HTML 4, ini adalah cara yang disarankan untuk mengubah gaya elemen HTML. Melalui gaya HTML, Anda dapat menambahkan gaya langsung ke elemen HTML menggunakan atribut style, atau secara langsung di dalam berkas gaya terpisah (file CSS).

Anda dapat menemukan di Tutorial CSSBelajar tentang gaya dan CSS di sini.

Dalam tutorial HTML kami, kami akan menggunakan atribut style untuk menjelaskan gaya HTML.

Tag dan atribut yang tidak disarankan

Dalam HTML 4, ada beberapa tag dan atribut yang usang.

Pesan yang disampaikan jelas: hindari penggunaan tag dan atribut yang usang ini!

Harus dihindari penggunaan tag dan atribut di bawah ini:

Tag Deskripsi
<center> Definisi Konten Tengah
<font> dan <basefont> Definisi Font HTML.
<s> dan <strike> Definisi Teks Dihapus
<u> Definisi Teks Berbawah
Atribut Deskripsi
align Definisi Penempatan Teks
bgcolor Definisi Warna Latar Belakang
color Definisi Warna Teks

Untuk tag dan atribut di atas: gunakan gaya untuk menggantinya!

Contoh Gaya HTML - Warna Latar Belakang

Atribut background-color menetapkan warna latar belakang bagi elemen:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">Ini adalah judul</h2>
<p style="background-color:green">Ini adalah paragraf.</p>
</body>
</html>

Coba Sendiri

Atribut style menggantikan atribut lama "bgcolor".

Coba Sendiri: Cara lama untuk menata warna latar belakang

Contoh Gaya HTML - Font, Warna, dan Ukuran

Atribut font-family, color, dan font-size masing-masing mendefinisikan seri font, warna, dan ukuran font teks elemen:

<html>
<body>
<h1 style="font-family:verdana">Judul</h1>
<p style="font-family:arial;color:red;font-size:20px;">Paragraf.</p>
</body>
</html>

Coba Sendiri

Atribut style menggantikan tag lama <font>.

Coba Sendiri: Cara lama untuk menata gaya teks

Contoh Gaya HTML - Penataan Teks

Atribut text-align menentukan cara penempatan horizontal teks elemen:

<html>
<body>
<h1 style="text-align:center">Ini adalah judul</h1>
<p>Judul di atas diatur rata tengah di halaman ini.</p>
</body>
</html>

Coba Sendiri

Atribut style menggantikan atribut lama "align".

Coba Sendiri: Cara lama untuk menata rata tengah