Inline CSS adalah CSS yang ditulis di atribut style sebuah elemen, seperti . Deklarasinya hanya berlaku untuk satu elemen itu, tanpa selector.

Dokumentasi CSS interaktif: Inline CSS

Q: Apa saja 3 cara menambahkan CSS ke HTML?

Inline, dengan atribut style pada elemen; internal, dengan elemen di halaman; dan external, dengan file .css terpisah yang dihubungkan lewat di . File external adalah pilihan biasa untuk seluruh situs.

Q: Apakah inline CSS menimpa external CSS?

Ya, di sebagian besar kasus. Deklarasi di atribut style mengalahkan selector apa pun di stylesheet, berapa pun specificity-nya. Satu-satunya cara stylesheet bisa menang adalah dengan !important, dan !important inline juga mengalahkannya.

Q: Bisakah memakai hover di inline CSS?

Tidak. Atribut style hanya menerima deklarasi, jadi pseudo-class seperti :hover, pseudo-element seperti ::before, dan aturan @media tidak bisa ditulis di sana. Taruh di elemen atau di stylesheet.

Inline CSS: Atribut style dan 3 Cara Menambahkan CSS

Inline CSS menaruh deklarasi langsung pada sebuah elemen dengan atribut style. Pelajari sintaksnya, kapan inline style adalah pilihan yang tepat, bagaimana ia menang atas stylesheet, dan perbandingannya dengan internal dan external CSS.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Apa itu inline CSS

Inline CSS adalah CSS yang ditulis langsung pada elemen HTML dengan atribut style. Nilainya adalah daftar deklarasi, property: value;, dan deklarasi itu hanya berlaku untuk elemen tersebut.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Tidak ada selector dan tidak ada kurung kurawal: elemen tempat atribut itu berada adalah targetnya. Pisahkan deklarasi dengan titik koma. Titik koma terakhir boleh tidak ditulis, tetapi menuliskannya membuat penambahan deklarasi berikutnya jadi aman.

Sintaks

<element style="property: value; property: value;">

Bagian	Contoh	Catatan
Atribut	`style="..."`	Atribut global: boleh dipakai di setiap elemen HTML
Deklarasi	`color: #2563eb;`	Sintaksnya sama seperti di dalam aturan stylesheet
Beberapa deklarasi	`padding: 8px; border: 1px solid #e5e7eb;`	Dipisahkan dengan `;`
Tanda kutip di dalamnya	`style="font-family: 'Courier New', monospace;"`	Pakai tanda kutip tunggal di dalam atribut yang memakai tanda kutip ganda

Apa pun yang bukan deklarasi tidak diizinkan. :hover, ::before, @media, dan selector tidak punya tempat di atribut style.

3 cara menambahkan CSS ke HTML

CSS sampai ke halaman dengan tiga cara. Halaman ini membahas cara pertama; external dan internal CSS punya halamannya sendiri.

Metode	Lokasi CSS	Cakupan	Penggunaan umum
Inline	Atribut `style` pada satu elemen	Elemen itu	Nilai sekali pakai, nilai yang diatur JavaScript
Internal	Elemen `<style>` di halaman	Halaman itu	Demo satu halaman, template email, critical CSS
External	File `.css`, dihubungkan dengan `<link>`	Setiap halaman yang menghubungkannya	Memberi style pada seluruh situs

Paragraf yang sama diberi style dengan ketiga cara (file external ditampilkan sebagai komentar, karena pratinjaunya tidak punya file kedua untuk dimuat):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Paragraf ketiga tetap memakai padding dan radius dari aturan .note dan hanya mengganti background-nya, karena inline style hanya mengatur satu properti itu.

Kenapa inline style menang

Saat aturan stylesheet dan inline style mengatur properti yang sama, inline style yang menang. Tidak peduli seberapa spesifik selector-nya: ID selector pun tetap kalah.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

Satu-satunya pengecualian adalah !important. Deklarasi stylesheet yang ditandai !important mengalahkan deklarasi inline yang normal, dan !important inline mengalahkan keduanya. Itulah alasan inline style membuat situs sulit dirawat: untuk mengubahnya dari stylesheet kamu butuh !important, yang memicu eskalasi. Halaman !important membahas urutan lengkapnya.

Kapan inline CSS adalah alat yang tepat

Inline style cocok saat nilainya adalah data, bukan desain: nilainya berbeda di setiap elemen dan ditulis oleh template atau JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

Tampilannya (warna, tinggi, radius) ada di stylesheet. Hanya lebarnya, yang berbeda di setiap bar, yang ditulis inline. JavaScript menulis atribut yang sama lewat element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Setelah diklik, HTML paragrafnya menjadi style="color: rgb(245, 158, 11); font-weight: bold;". Nama properti dengan tanda hubung menjadi camelCase di JavaScript (font-weight menjadi fontWeight).

Variabel CSS sering menjadi jalan tengah yang paling rapi: atur hanya variabelnya secara inline, style="--progress: 35%", dan biarkan stylesheet memakainya. Lihat variabel CSS.

Kekurangan inline CSS

Tanpa state atau pseudo-element. Kamu tidak bisa menulis :hover, :focus, atau ::before di atribut style.
Tanpa media query. Lebar yang ditulis inline tidak bisa berubah di ponsel.
Pengulangan. Sepuluh tombol dengan inline style yang sama berarti sepuluh tempat yang harus diedit.
Sulit ditimpa. Hanya !important di stylesheet yang bisa mengalahkannya.
Content Security Policy. CSP yang ketat tanpa 'unsafe-inline' di style-src memblokir atribut style yang ditulis di HTML.

Kesalahan umum

Menulis selector atau kurung kurawal di dalam style. style="p { color: red }" diabaikan. Hanya deklarasi yang boleh ditulis di sana.
Memakai = alih-alih :. Yang benar color: red, bukan color=red.
Tanda kutip ganda bersarang. style="font-family: "Arial"" mengakhiri atribut terlalu cepat. Pakai tanda kutip tunggal di dalamnya.
Lupa satuan. style="width: 200" diabaikan; tulis 200px. Hanya panjang 0 yang boleh ditulis tanpa satuan.
Memberi style pada seluruh situs secara inline. Pindahkan style yang berulang ke sebuah class di stylesheet dan simpan inline style untuk nilai per elemen.

Pertanyaan yang sering diajukan

Apa itu inline CSS?

Inline CSS adalah CSS yang ditulis di atribut style sebuah elemen, seperti <p style="color: red;">. Deklarasinya hanya berlaku untuk satu elemen itu, tanpa selector.

Apa saja 3 cara menambahkan CSS ke HTML?

Inline, dengan atribut style pada elemen; internal, dengan elemen <style> di halaman; dan external, dengan file .css terpisah yang dihubungkan lewat <link rel="stylesheet" href="styles.css"> di <head>. File external adalah pilihan biasa untuk seluruh situs.

Apakah inline CSS menimpa external CSS?

Ya, di sebagian besar kasus. Deklarasi di atribut style mengalahkan selector apa pun di stylesheet, berapa pun specificity-nya. Satu-satunya cara stylesheet bisa menang adalah dengan !important, dan !important inline juga mengalahkannya.

Apakah inline CSS kebiasaan buruk?

Untuk memberi style pada seluruh situs, ya: kodenya berulang, tidak bisa memakai :hover atau media query, dan sulit ditimpa. Inline CSS tidak masalah untuk nilai sekali pakai yang diatur oleh JavaScript atau template, seperti lebar progress bar atau warna pilihan pengguna.

Bisakah memakai hover di inline CSS?

Tidak. Atribut style hanya menerima deklarasi, jadi pseudo-class seperti :hover, pseudo-element seperti ::before, dan aturan @media tidak bisa ditulis di sana. Taruh di elemen <style> atau di stylesheet.

Konsep terkait