Test of Inline CSS
About Test of Inline CSS

Inspect your webpage's HTML tags for inline CSS properties. These properties are embedded using the style attribute within specific HTML tags. Incorporating inline CSS unnecessarily inflates page size and can be transferred to an external CSS stylesheet. Eliminating inline CSS properties can enhance page loading speed and simplify site maintenance.

Adopting the practice of relocating all inline CSS rules to an external file is advisable to optimize your page's weight and reduce the code-to-text ratio.

  • Review your page's HTML code and pinpoint all style attributes.
  • For each style attribute identified, diligently relocate all declarations to the external CSS file and remove the style attribute.
<!-- HTML code with inline CSS rule: -->
<p style="color:red; font-size: 12px">some text here</p>

<!-- transforms into: -->
<p>some text here</p>

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