HTML Style

HTML Dasar: Mengenal Style di HTML

Apa Itu Style dalam HTML?

Dalam HTML, kita bisa mengatur tampilan (gaya visual) suatu elemen dengan menggunakan atribut style. Atribut ini memungkinkan kita untuk menambahkan CSS langsung di dalam tag HTML.

Dengan style, kita bisa mengatur:

warna teks,
ukuran huruf,
jenis font,
latar belakang,
tata letak (margin, padding),
dan masih banyak lagi.

Struktur Penulisan

<tag style="property: value;">Konten</tag>

property = nama properti CSS (misalnya color, font-size)
value = nilai dari properti tersebut

Contoh Penggunaan Style dalam HTML

1. Mengubah Warna Teks

<p style="color: blue;">Teks ini berwarna biru.</p>

2. Mengatur Ukuran Font

<h1 style="font-size: 36px;">Judul Besar</h1>

3. Mengatur Latar Belakang

<div style="background-color: yellow;">Latar belakang berwarna kuning.</div>

4. Kombinasi Beberapa Properti

<p style="color: white; background-color: black; padding: 10px;">
  Teks putih dengan latar belakang hitam dan jarak dalam 10px.
</p>

Properti CSS Umum yang Sering Digunakan

Properti	Fungsi	Contoh nilai
`color`	Warna teks	`red`, `blue`, `#333`
`background-color`	Warna latar belakang	`yellow`, `#f0f0f0`
`font-size`	Ukuran huruf	`14px`, `2em`
`font-family`	Jenis huruf	`Arial`, `Times New Roman`
`text-align`	Perataan teks	`left`, `center`, `right`
`padding`	Jarak dalam dari elemen	`10px`, `5px 10px`
`margin`	Jarak luar dari elemen	`10px`, `auto`
`border`	Garis tepi elemen	`1px solid black`

Kelebihan dan Kekurangan Penggunaan `style` Langsung

✅ Kelebihan:

Cepat dan langsung terlihat hasilnya.
Cocok untuk percobaan atau elemen tunggal.

❌ Kekurangan:

Tidak efisien untuk halaman yang besar.
Menyulitkan pemeliharaan jika banyak elemen yang harus diubah tampilannya.

Oleh karena itu, untuk proyek yang lebih besar, sebaiknya gunakan CSS eksternal (file .css terpisah).

Contoh Kode HTML Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Style HTML</title>
</head>
<body>

  <h1 style="color: darkgreen;">Selamat Datang!</h1>
  <p style="font-size: 18px; color: gray;">
    Ini adalah contoh paragraf dengan style langsung.
  </p>
  <div style="background-color: lightblue; padding: 20px;">
    Kotak dengan latar belakang biru muda dan padding.
  </div>

</body>
</html>

Kesimpulan

Atribut style digunakan untuk menambahkan gaya visual langsung pada elemen HTML.
Gunakan property: value untuk menetapkan tampilan.
Style cocok untuk penggunaan cepat, tetapi untuk proyek lebih besar disarankan menggunakan CSS eksternal.
Mengenal properti CSS umum sangat membantu dalam mempercantik tampilan website.