Inline CSS: Quick Guide, Benefits, and Best Practice

Quick Fixes: For small, specific style changes that need to be made quickly without altering the main stylesheet.
Email Design: Many email clients support inline CSS better than external stylesheets.
Testing: During debugging or testing, inline CSS can quickly apply styles to see how an element looks.

Inline CSS: A Quick Guide

Inline CSS is a method of styling individual HTML elements directly within an HTML document. Unlike external or internal CSS, where styles are written in a separate file or in the

How to Fix

It is a good practice to move all the inline CSS rules into an external file in order to make your page "lighter" in weight and decrease the code to text ratio.

check the HTML code of your page and identify all style attributes
for each style attribute found you must properly move all declarations in the external CSS file and remove the style attribute

For example:

< !--this HTML code with inline CSS rule:-- >
< p style="color:red; font-size: 12px" > some text here < /p >

< !--would became:-- >
< p > some text here < /p >

< !--and the rule added into your CSS file:-- >
p{color:red; font-size: 12px}