Pengenalan HTML 16
Styling CSS ke Tag HTML Langsung

oleh: Suryo Adhy Chandra, ST

Setelah belajar CSS dasar, sekarang kita bisa memberi style langsung ke nama tag HTML. Artinya, semua tag yang sama bisa otomatis memiliki warna, huruf, dan ukuran huruf yang seragam.

Contoh ini cocok dipakai ketika kita ingin semua body, p, div, dan span langsung memiliki tampilan tertentu tanpa harus menambahkan class satu per satu.

1. Styling CSS langsung ke tag body, p, div, dan span

Kita bisa menulis selector CSS langsung memakai nama tag. Dengan begitu, browser akan menerapkan style ke semua elemen dengan tag tersebut.

body p div span
<style> body { background-color: #f8fafc; color: #1e293b; font-family: Arial, sans-serif; font-size: 18px; } p { color: #2563eb; font-size: 20px; } div { background-color: #dbeafe; color: #1e3a8a; font-size: 22px; padding: 12px; } span { color: #dc2626; font-size: 16px; font-weight: bold; } </style>

Penjelasan singkat:

body mengatur warna dasar halaman, jenis huruf, dan ukuran huruf umum.

p mengatur warna dan ukuran teks khusus untuk paragraf.

div bisa diberi warna latar, warna tulisan, ukuran huruf, dan ruang dalam.

span cocok untuk menonjolkan bagian kecil teks di dalam kalimat.

2. Contoh penggunaan sederhana pada p, body, div, dan span

Berikut contoh kasus sederhana. Kita membuat satu halaman kecil berisi judul, paragraf, kotak informasi, dan teks penting yang diberi warna khusus.

<!DOCTYPE html> <html> <head> <title>Belajar CSS ke Tag Langsung</title> <style> body { background-color: #fff7ed; color: #444; font-family: Verdana, sans-serif; font-size: 18px; } p { color: #0f172a; font-size: 20px; } div { background-color: #fde68a; color: #92400e; font-size: 22px; padding: 14px; margin-top: 10px; } span { color: #b91c1c; font-size: 16px; font-weight: bold; } </style> </head> <body> <p>Ini adalah paragraf utama di halaman.</p> <div> Ini adalah kotak informasi sederhana. <span>Teks ini penting!</span> </div> </body> </html>

Preview hasil:

Ini adalah paragraf utama di halaman.

Ini adalah kotak informasi sederhana. Teks ini penting!

3. Kapan cara ini cocok digunakan?

Cocok dipakai untuk:

  • Latihan dasar memahami selector CSS
  • Mengatur tampilan umum semua tag sejenis
  • Project kecil dan sederhana

Perlu diingat:

  • Semua tag yang sama akan ikut berubah
  • Kurang fleksibel jika halaman semakin besar
  • Untuk desain lebih rapi, nanti biasanya memakai class
Jadi, styling langsung ke tag HTML adalah langkah awal yang bagus untuk memahami CSS. Setelah paham, kita bisa lanjut ke penggunaan class agar styling lebih teratur dan mudah diatur.
← Kembali Ke Daftar Pelajaran HTML