CSS invoer

Inline stijlfragmenten

Wat is CSS naar inline conversie?

Moet je CSS-stylesheetregels converteren naar inline style-attributen? Deze tool doet precies dat. Het neemt je CSS-regels en converteert ze naar kant-en-klare inline stijlfragmenten die je direct in HTML-elementen kunt plakken.

Inline stijlen zijn essentieel bij het werken met HTML-e-mails, waar externe stylesheets worden verwijderd door e-mailclients zoals Gmail en Outlook. Ze zijn ook cruciaal voor e-mailtesttools, HTML-naar-afbeelding converters en verouderde HTML-generatiesystemen die geen gekoppeld CSS ondersteunen. Deze tool automatiseert wat anders vervelend handmatig werk zou zijn.

De convertor verwerkt alle CSS-eigenschappen, vendor-prefixen, de !important vlag, afkortingseigenschappen zoals font en margin, en media query bewustzijn. Alles gebeurt direct in je browser – geen server-uploads, geen gegevensopslag, volledig veilig.

Hoe de CSS naar Inline Stijlen Tool te gebruiken

Volg deze stappen om CSS-regels te converteren naar inline stijlfragmenten. Elke stap gebruikt de echte knoppen en panelen op deze pagina.

Plakken, uploaden of voorbeeld laden

Plak CSS in het linker CSS invoer paneel, of klik Uploaden om een .css-bestand te laden. Klik Voorbeeld om voorbeeldstijlen te zien. Voorbeeld:

.subscriber-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
}
.plan-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e3f2fd;
}

Inline stijlfragmenten bekijken

Het rechter Inline stijlfragmenten paneel toont elke selector met zijn style="property: value; ..." formaat. Kopieer fragmenten voor HTML-elementen, e-mailsjablonen of verouderde systemen die inline stijlen nodig hebben.

Kopiëren of downloaden

Klik Kopiëren om naar het klembord te kopiëren, of Downloaden om op te slaan. Gebruik Wissen om opnieuw te beginnen. Alle verwerking vindt plaats in je browser.

Wanneer je dit echt gebruikt

HTML-e-mailontwerp

E-mailclients verwijderen externe stylesheets. Bouw je e-mailontwerp in CSS en gebruik dan deze tool om het te converteren naar inline stijlen. Werkt perfect met e-mailplatforms zoals Campaign Monitor en Mailchimp.

HTML-naar-afbeelding conversie

Tools die HTML naar afbeeldingen of PDF's converteren hebben inline stijlen nodig omdat ze geen externe CSS-bestanden laden. Converteer je stylesheet naar inline stijlen voordat je HTML doorgeeft aan deze converters voor perfecte weergave.

Migratie van verouderde systemen

Migreer je van moderne webframeworks naar verouderde systemen die alleen inline stijlen ondersteunen? Deze tool maakt de conversie automatisch, wat uren van handmatig kopiëren en formatteren bespaart.

Dynamische HTML-generatie

Bouw je HTML-generators of sjabloonsystemen waarbij je inline stijlen nodig hebt voor elk element? Converteer je hoofd-CSS eenmalig en refereer dan naar de inline stijlfragmenten in je generatiecode.

Veelgestelde vragen

Waarom kan ik geen CSS-bestand koppelen in HTML-e-mails?

De meeste e-mailclients (Gmail, Outlook, Apple Mail) verwijderen <link> en <style> tags voor beveiliging. Inline stijlen zijn een van de weinige manieren om e-mail HTML betrouwbaar te stijlen. Zie de CSS-ondersteuningsgids van Campaign Monitor voor wat e-mailclients ondersteunen.

Worden complexe selectors geconverteerd?

De convertor verwerkt de meeste CSS-selectors. Eenvoudige selectors (elementen, klassen, ID's) worden direct geconverteerd. Voor pseudo-selectors zoals :hover die niet inline gezet kunnen worden, geeft de tool aan dat ze niet omgezet kunnen worden.

Kan ik media queries converteren naar inline stijlen?

Media queries kunnen niet worden uitgedrukt als inline stijlen – ze vereisen aparte <style> blokken. De convertor identificeert media query regels en scheidt ze van inlinebare stijlen, zodat je weet wat speciale behandeling nodig heeft.

Ondersteunt het afkortingseigenschappen?

Absoluut. Afkortingseigenschappen zoals margin: 10px 20px, padding: 5px en font: bold 12px Arial worden automatisch uitgebreid naar hun lange equivalenten voor maximale compatibiliteit met e-mailclients.

Wat met !important declaraties?

De !important vlag wordt bewaard in inline stijlen precies zoals geschreven. Het werkt op dezelfde manier – het forceren van hogere specificiteit en het overschrijven van conflicterende stijlen.

Worden mijn CSS-gegevens opgeslagen of geanalyseerd?

Nee. Alle conversie vindt plaats in je browser met JavaScript. Je CSS verlaat je computer nooit, en we slaan geen gegevens op, analyseren ze niet en loggen ze niet. Volledige privacy gegarandeerd.

CSS naar inline stijlen