Remove Inline Styles from HTML

Inline styles are CSS declarations written directly on an element via the style="" attribute (and legacy alignment attributes like align, valign). They couple presentation to markup, making HTML harder to maintain, override, and reuse. Removing inline styles helps you produce clean, semantic HTML that's easier to theme with external stylesheets. 🧹

🎨If your markup relies more on utility classes than inline CSS, you may also want to remove classes and IDs or broadly strip tag attributes to simplify the DOM.

Clean CSS align valign style=""

What counts as an inline style?

style attributes (e.g:
<p style="🟥color:red">)
Legacy alignment attributes such as align and valign
Hard-coded spacing, colors, fonts, and sizes on individual elements
Presentation details copied from editors or documents

Why inline styles are a problem

Tight coupling: content and design are mixed together.
Hard overrides: inline styles beat most stylesheet rules.
Duplication: the same styles are repeated across many elements.
Poor reuse: exporting or re-theming content becomes painful.

Rule of thumb: Inline styles are fine for quick experiments, but production HTML should rely on external stylesheets.

Example: Before and After

Before (inline styles):

<h2 style="color:#3cab7f; margin-top:10px">Pretty HTML</h2>
<p align="center" style="font-size:14px; line-height:20px">
  Formatter, Editor and Cleaner
</p>

After (clean markup):

<h2>Pretty HTML</h2>
<p>Formatter, Editor and Cleaner</p>

Use external CSS to style headings and paragraphs globally, rather than inlining presentation on each element. Cleaning placeholder elements that contain a single non-breaking space can further redduce noise: see Remove tags with one space.

<link rel="stylesheet" href="/prettyhtml.css">

Why remove inline styles?

Maintainability: update styles in one place instead of editing too many elements.
Theming: switch themes without stripping old hard-coded styles.
Performance: smaller HTML payloads and faster caching strategies.
Accessibility & consistency: avoid conflicting in-element declarations.

How to use this page

Paste or drop your HTML in the drop-zone.
Ensure Inline styles cleaning option is selected (it is by default).
Click the big Pretty button to remove style, align, and valign attributes.
Download the cleaned HTML or DOCX if needed.

When this tool shines

Common scenarios

Pasted content from Word, Google Docs, emails, etc.
Legacy pages built with inline formatting
Preparing content for theming or redesign
Cleaning HTML before exporting to other formats

Things to double-check

Critical layout: some spacing may rely on inline styles.
Tables: alignment attributes might affect visual layout.
Emails: some email clients rely heavily on inline CSS.
Forms: visual cues might need replacement CSS.

Inline styles vs external CSS

Aspect	Inline styles	External CSS	Preferred
Maintainability	Low	High	External
Reusability	Poor	Excellent	External
Overrides	Hard	Flexible	External
Quick experiments	Convenient	Slower	Inline

Removing inline styles with JavaScript

If you need to clean an HTML string in your own code, parse it with DOMParser, remove the attributes, then serialize back. This approach is reliable and avoids brittle regular expressions. ⚙️

function stripInlineStyles(html) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(html, 'text/html');
  doc.querySelectorAll('[style]').forEach(function (el) {
    el.removeAttribute('style');
  });
  doc.querySelectorAll('[align]').forEach(function (el) {
    el.removeAttribute('align');
  });
  doc.querySelectorAll('[valign]').forEach(function (el) {
    el.removeAttribute('valign');
  });
  return doc.body.innerHTML;
}
// Example
var rawHtml = '<p style="color:red" align="center">Hello</p>';
var cleaned = stripInlineStyles(rawHtml);
// '<p>Hello</p>'

Tip: Prefer DOM methods over regular expressions for non-trivial HTML, since HTML is not a regular language and regex often misses edge cases. If you're tidying pasted AI content, normalize punctuation and hidden characters with Remove AI watermarks before styling. ✨

Workflow: Remove inline styles → strip classes and IDs → remove excess attributes → clean empty or placeholder tags → normalize spacing. This keeps content flexible and future-proof.