Penggabung CSS Email Gabungkan gaya CSS ke dalam elemen HTML untuk kompatibilitas templat email.

🎨

Penggabung CSS Email

Gabungkan gaya CSS ke dalam elemen HTML untuk kompatibilitas templat email.

Tempelkan kode HTML Anda

Masukkan markup HTML untuk template email Anda.

Tempelkan kode CSS Anda

Masukkan gaya CSS yang harus diterapkan secara inline.

Salin HTML dengan gaya inline

Pratinjau hasilnya dan salin kode HTML dengan semua gaya yang diterapkan secara inline.

Loading tool...

What Is Penggabung CSS Email?

Alat Email CSS Inliner mengubah aturan CSS eksternal menjadi atribut gaya internal pada elemen HTML, membuat templat email Anda kompatibel dengan klien email utama. Sebagian besar klien email (Gmail, Outlook, Yahoo Mail) menghapus tag <style> dan mengabaikan stylesheet eksternal, sehingga memerlukan CSS diterapkan langsung sebagai atribut gaya internal pada setiap elemen. Alat ini mengambil markup HTML dan aturan CSS Anda, mencocokkan selektor dengan elemen, dan menyisipkan gaya yang sesuai sebagai atribut gaya internal. Ini menangani selektor tag dan selektor kelas, membuat proses konversi cepat dan otomatis. Pratinjau menampilkan hasil gaya sehingga Anda dapat memverifikasi hasil sebelum menyalin. Ini adalah langkah penting dalam pengembangan templat email.

Why Use Penggabung CSS Email?

Konversi otomatis aturan CSS ke atribut gaya inline
Menghandle selector tag dan kelas CSS
Pratinjau langsung dari output HTML yang telah dioptimalkan
Penting untuk kompatibilitas klien email (Gmail, Outlook, Yahoo)

Common Use Cases

Pengembangan Template Email

Gaya inline untuk template email pemasaran dan transaksional.

Desain Newsletter

Siapkan kode HTML newsletter dengan gaya inline untuk dukungan klien yang luas.

Email Otomatis

Proses CSS untuk template email notifikasi dan selamat datang otomatis.

Pengujian Email

Konversi dan uji kode HTML email di berbagai klien email.

Technical Guide

HTML Email memiliki keterbatasan CSS yang signifikan dibandingkan dengan HTML web. Sebagian besar klien email hanya mendukung gaya internal (melalui atribut gaya), properti CSS dasar, dan tata letak berbasis tabel. Gmail menghapus tag <style> di <head>. Outlook menggunakan mesin rendering Word dengan dukungan CSS terbatas. Proses inlining menganalisis aturan CSS, mencocokkan selektor dengan elemen HTML, dan menambahkan deklarasi yang sesuai sebagai atribut gaya. Selektor tag sederhana (h1, p, a) dan selektor kelas (.button, .container) adalah yang paling dapat diandalkan. Selektor kompleks (kombinator, pseudo-kelas, pseudo-elemen) memiliki dukungan terbatas di klien email anyway. Setelah inlining, uji dengan alat seperti Litmus atau Email on Acid di beberapa klien. Pertahankan HTML email sederhana: gunakan tabel untuk tata letak, gaya internal untuk semua penampilan, dan sertakan versi HTML dan teks polos. Hindari fitur CSS seperti flexbox, grid, posisi, dan float dalam email.

Tips & Best Practices

1
Gunakan tata letak berbasis tabel untuk kompatibilitas klien email maksimum
2
Uji kode HTML yang diterapkan secara inline di Gmail, Outlook, dan Apple Mail minimal
3
Jaga CSS sederhana-hindari selector yang tidak dapat diterapkan secara inline (pseudo-elemen)
4
Sertakan atribut lebar pada tabel dan gambar untuk kompatibilitas Outlook

Related Tools

Pembuat Tombol CSS

Desain tombol CSS kustom dengan warna, padding, border, bayangan, dan efek hover.

🎨 CSS & Design

Pembuat Tabel CSS

Buat tabel HTML yang cantik dengan warna, garis-garis, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Pembuat Lembar Gaya Cetak

Buat lembar gaya @media cetak dengan opsi untuk menyembunyikan elemen, mengatur gaya teks, dan mengontrol pemutusan halaman.

🎨 CSS & Design

Frequently Asked Questions

Q Mengapa email memerlukan CSS inline?

Kebanyakan klien email menghapus tag <style> dan mengabaikan stylesheet eksternal, hanya mendukung CSS dalam atribut gaya.

Q Apakah alat ini menangani semua selector CSS?

Alat ini menangani selector tag dan kelas. Selector kompleks (pseudo-kelas, kombinasi) memiliki dukungan email yang terbatas juga.

Q Klien email mana yang memerlukan CSS inline?

Gmail, Yahoo Mail, Outlook, dan banyak lainnya. Hanya beberapa klien modern yang mendukung tag <style>.

Q Bisakah saya menggunakan flexbox atau grid di email?

Tidak, kebanyakan klien email tidak mendukung tata letak CSS modern. Gunakan tata letak berbasis tabel untuk email.

Q Apakah saya harus menguji kode HTML yang diterapkan secara inline?

Tentu saja. Selalu uji di beberapa klien email. Gunakan layanan seperti Litmus atau Email on Acid untuk pengujian komprehensif.

About This Tool

Penggabung CSS Email is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.