Call (877) SITE-OPT (748-3678)

Code: Replace Inline Style with Type Selectors

From Chapter 7: CSS Optimization

Web pages that use inline style pepper HTML code with unnecessary font and style tags. This effectively hardcodes the presentation directly within the HTML. Unless the style is used only once, it is more efficient to create a CSS rule and target all elements of a certain kind with type selectors (i.e., p, ul, h2, etc.). For example, this:

<h2 style="font-size:1.2em;color:red;">Little red Corvette</h2>
<h2 style="font-size:1.2em;color:red;">Baby you're much too fast to embed</h2>
<h2 style="font-size:1.2em;color:red;">Little red Corvette</h2>
<h2 style="font-size:1.2em;color:red;">You need a love that's gonna last</h2>

becomes this, by abstracting the inline style to a block style:

<style type="text/css"><!--
    #main h2{font-size:1.2em;color:red;}
--></style>

The corresponding HTML cleans up to this:

<div id="main">
    <h2>Little red Corvette</h2>
    <h2>Baby you're much too fast</h2>
    <h2>Little red Corvette</h2>
    <h2>You need a love that's gonna last</h2>
</div>

Note how clean the code becomes after you remove the inline styles.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In