Inline styles

What we check

On the home page we count the elements with a style attribute, that is styling directly in the HTML such as:

<p style="color: #333; font-size: 18px; margin-top: 20px;">…</p>

• More than 10 elements: note.
• More than 50 elements: warning.

If we recognise a page builder, we name it in the report as the probable cause.

Why it matters

On cleanly built websites content and styling are kept apart: the HTML contains the text and its structure, a CSS file defines what it looks like. Inline styles mix the two.

• More code: the same style details appear again in the HTML for every element. The page gets bigger and loads more slowly.
• No caching: the browser loads a CSS file once and reuses it on all pages. Inline styles are transferred again with every page.
• Laborious changes: if the text colour is to be changed, it has to be changed on each element individually instead of in one place.
• Inconsistent design: if each element has its own values, small differences in spacing, sizes and colours easily arise.
• Hard to override: inline styles take precedence over the CSS file. Adjustments for smartphones or accessibility then do not take effect.

How to fix it

Page builders

Most inline styles come from page builders. Typical settings:

• Elementor: under "Settings › Performance" or "Advanced" set the "CSS Print Method" to "External File".
• Divi: in the theme options under "Performance" activate static CSS generation.
• WPBakery, Beaver Builder and others: similar options are usually found under "Performance".

Texts in the editor

Texts copied from Word or emails often bring inline styles with them. Remove the formatting and format again with the means of the editor. In future paste as plain text with Ctrl+Shift+V.

Own code

Move recurring style details into a class:

<p class="intro">…</p>

.intro { color: #333; font-size: 1.125rem; margin-top: 1.25rem; }

What may stay

Dynamic values, for example a background image chosen per section in the CMS, or the width of a progress bar, may stay inline.

How to check it yourself

Open the developer tools (F12), "Console" tab, and enter document.querySelectorAll('[style]').length. The number shows how many elements carry inline styles.

Frequently asked questions

Are inline styles wrong in principle?

No. A few, for example for a background image from the CMS, are normal. It becomes a problem when dozens or hundreds of elements carry all their styling in the HTML.

The page builder produces this automatically. Does it have to be replaced?

Usually not. The common builders have settings that write styles into a file of their own. Only if that is not enough is it worth looking at leaner alternatives.