Jump to content

Replace Inline Style with CSS Rules to Speed Up Web Pages

+ 1
  simonstl's Photo
Posted Oct 29 2009 05:07 PM

Replacing table layout with CSS layout certainly saves you bandwidth and reduces maintenance headaches. Stripping down your markup to bare structure and replacing any inline style with CSS rules will help fully optimize your HTML.

Inline style includes the deprecated font tag, inline style blocks, and nonbreaking spaces. Inline style such as:

<p style="font-size:12px;color:black;">Hardcoded text here.</p>

<p style="font-size:12px;color:black;">Inline style redux</p>


bulks up your code and makes it harder to make style changes. It is more efficient to abstract multiple duplicate styles into CSS rules, like so:

<style type="text/css">
p{font-size:12px;color:#000;}
</style></head></body>
<p>Unencumbered text here</p>
<p>Free and easy</p>


Replacing inline style, font tags, and nonbreaking spacing with CSS rules can reduce your HTML footprint significantly (by 15% to 20% or more), depending on the amount of embedded style. The key to this type of code cleanup is to plan ahead for targeting content elements with CSS.

CSS architecture uses structural HTML markup (p, ul, dt, etc.) and labeled containers (#main, #nav, #footer) that allow simple type and descendant selectors to target noncontiguous content. Once your CSS architecture is in place, targeting similar content is only a matter of creating targeted CSS rules using selectors to style the same type of elements and declarations to apply your styles. To learn more about optimizing your HTML with CSS, as well as shrinking your style sheets, read Chapter 7, CSS Optimization, of Website Optimization.

Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn


1 Reply

0
  bmclaugh's Photo
Posted Nov 16 2009 05:58 PM

I'm confident this would be addressed later in the book, but while inline styles are worse than consolidation of CSS, external stylesheets are much better than either.

This is okay:

<style type="text/css">
p{font-size:12px;color:#000;}
</style></head></body>
<p>Unencumbered text here</p>
<p>Free and easy</p>


Much better, though, is to move the CSS into an external file, called (for example) default.css:

p {
  font-size:12px;color:#000;
}


Then, reference your CSS in your HTML head:

<head>
  <link rel="stylesheet" type="text/css" href="default.css" />
  <!-- etc. -->
</head>


The HTML can stay the same; the external stylesheet will do the rest of the work.

-Brett
---
Brett McLaughlin
O'Reilly Media, Inc.
"I teach"

email: brett@oreilly.com
phone: 214.771.8758
twitter: @oreillybrett