Inline CSS: Quick Guide, Benefits, and Best Practice

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}
loading...