Inline to Internal/External CSS Converter

Converts inline CSS declarations to internal or external CSS online.

Convert to Internal/External CSS

This Online CSS Converter tool removes the inline CSS declarations from your HTML and turns them into internal or external CSS.
It saves you from converting every inline style from your HTML code manually, which takes a significant amount of time.
Paste your code below and accelerate your web development process.

Load an example

Copy Output Download HTML
The external CSS option removes the inline styles and links a separate style.css file from the <head> .
The internal CSS option removes the inline styles and places the rules inside a <style> </style> tag in the <head> .
Copy CSS Download CSS
Ready to convert inline CSS from your HTML.

Overview:

Our free Inline to Internal/External CSS Converter finds every inline style attribute in your HTML, replaces it with a generated class, and collects the styles into a single place - either a <style> tag in the <head> (internal CSS) or a separate .css file linked from the head (external CSS). Everything runs in your browser; no code is sent to any server.

The tool does the heavy lifting for you: equivalent styles are reused as one class, empty style attributes are cleaned up, the <!DOCTYPE> and any comments are preserved, and in the external option the matching <link rel="stylesheet"> tag is added to your HTML automatically. It even warns you when a pasted snippet has been wrapped into a full HTML document.

For example, <div style="color: red; margin: 10px;"> becomes <div class="class-1"> plus the rule .class-1 { color: red; margin: 10px; } in your stylesheet.

How to Use

1. Enter your HTML: Paste it into the HTML Code textarea, click "Load an example", or upload a .html, .htm or .txt file from your device. Loading an example or uploading a file converts the code automatically.

2. Choose a target: Pick "External CSS" for a separate stylesheet or "Internal CSS" for a <style> tag. Optionally set the CSS file name and the class prefix.

3. Convert: Click the "Convert CSS Code" button to turn the inline styles into internal or external CSS. The cleaned HTML appears in the Output HTML box.

4. Save the result: Copy or download the output HTML. With the External CSS option, the generated rules are shown below in the CSS box, ready to copy or download as a separate file.

Features

Convert to External CSS: Removes the inline styles, adds a class to each element, and inserts a <link rel="stylesheet" href="style.css"> tag at the end of the <head>. The rules are shown in the CSS box, ready to copy or download. For example, the input

<button style="background-color: #3498db; color: white;">Save</button>

becomes

<button class="class-1">Save</button>

with the rule below saved in style.css and the link tag added inside the <head>:

.class-1 {
    background-color: #3498db;
    color: white;
}

Convert to Internal CSS: Puts the same rules into a <style> tag in the <head>. If your HTML already has a <style> tag, the new rules are added to it instead of creating a second one. Because the rules live inside the output HTML, the separate CSS box is hidden and you can simply copy or download the HTML.

One-click conversion: Click the "Convert CSS Code" button to move every inline style into internal or external CSS. Loading an example or uploading a file runs the conversion automatically, and switching between the External and Internal options updates the output and CSS box right away.

Smart class reuse: Elements with equivalent styles - even when the spacing or the declaration order differs - share a single class, so you never get duplicate rules. Two elements with style="margin: 0;" both become class="class-1".

Custom class prefix and file name: Set your own prefix (default "class") to get names like btn-1, and your own file name (default "style.css") for the external stylesheet. Generated names never clash with classes already used in your HTML.

Safe CSS parsing: Declarations are split correctly even when values contain semicolons inside url(...) data URIs, quoted strings or comments, so no rule is ever broken or lost.

Clean output: Empty style="" attributes are removed, existing classes are left untouched, and the <!DOCTYPE> plus any comments above the <html> tag are preserved.

Upload and convert in one step: Load a .html, .htm or .txt file and the tool converts it immediately, then copy or download the output HTML and the CSS file.

When to Use this Tool?

Use the converter whenever you want to clean up inline styles without rewriting your markup by hand. A single click of the Convert button is all it takes, so you can try it on any snippet you are unsure about and see the result right away. It is especially handy when you need to:

1. Refactor older pages: Move years of inline styles into a single stylesheet and declutter your HTML.

2. Prepare email templates: Convert between inline and internal styles when moving a template to a client with different CSS support.

3. Share clean code with a team: Centralizing styles makes projects easier to review, debug and maintain.

4. Speed up your pages: A separate, cacheable .css file shrinks the HTML and improves repeat-visit load times.

5. Reuse code from tutorials and templates: CSS snippets copied from blogs, frameworks or purchased themes often arrive with inline styles. A single pass turns them into tidy, reusable rules you can tweak in one place.

6. Comply with security policies: Some content security policies and strict environments restrict inline style attributes. Moving the styles to internal or external CSS keeps your markup compliant without changing its appearance.

7. Audit an unfamiliar codebase: Extracting every inline style produces a plain, readable list of rules - a fast way to see at a glance what styles a page really uses before you refactor or hand it over.

8. Keep formatting in editors that strip inline styles: Many rich-text editors and CMS fields remove or mangle inline styles when you paste content. Converting to classes first means the formatting survives the round trip.

In essence, the tool removes the manual, error-prone work of extracting inline styles so you can focus on the design itself. Whether you are tidying a single snippet or an entire legacy site, one click of the Convert button is all it takes and the result is ready to copy or download.

FAQs

FAQ 1: What is the difference between the External and Internal CSS options?
Answer: External CSS collects the rules into a separate .css file that is linked from the <head>. Internal CSS puts them inside a <style> tag in the <head> instead. The HTML cleanup is identical in both cases.

FAQ 2: Does the tool change how my page looks?
Answer: The style values are kept as they were, so the appearance is preserved in most cases. Because an inline style always won over stylesheet rules, moving it into a class can change the cascade if another stylesheet targets the same element - so review the converted page once.

FAQ 3: How do I get the CSS file?
Answer: With the External option, the generated rules appear in the CSS box and you can copy or download them as a .css file. With the Internal option, the rules are embedded in the output HTML inside the <style> tag.

FAQ 4: What happens to identical styles?
Answer: Equivalent styles - even with different spacing or declaration order - are merged into one class, keeping the output compact and free of duplicate rules.

FAQ 5: Does the tool keep the <!DOCTYPE> and my comments?
Answer: Yes. The document type and any comments above the <html> tag are preserved in the output HTML.

FAQ 6: Is my code sent to a server?
Answer: No. The conversion happens entirely in your browser, and nothing you paste is transmitted to or stored on any server.

FAQ 7: Can the tool handle complex styles such as data URIs?
Answer: Yes. Semicolons inside url(...) data URIs, quoted strings and comments are recognized correctly and never treated as rule separators.

TextToolz

The Ultimate Text Tools

TextToolz works seamlessly to let you convert and design your text. It is fast, reliable and secure. Trusted by thousands of users.