Help
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.
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.
