Page 119 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

<p STYLE=”font: 12pt/14pt sans-serif; margin: 5px 0px 2px 25px; border: Notes
medium dashed #ff0000; background: white url (http://www.foo.com/image.gif)
repeat-x fixed top right}”>
<span STYLE=”font: 36pt/40pt courier; font-variant: small-caps; border:
thick dashed blue}”> ADVERTISEMENT:</span>
Buy Navel Lint Contemplator! It’s a browser and it’s a sandwich
spread! Go to our <a HREF=”http://www.navellint.com”>home page</a> without
delay! Why? Because shelf life is only 8 hours unless refrigerated. We know
that makes it hard to browse, but it promotes frequent upgrading to the
latest and greatest version. </p>
<h6 STYLE=”font-size: xx-small! important; color: red! important”>All
standard disclaimers apply. Your life depends on NOT copying this document
in any way. This tape will
<a HREF=”http://www.mysite.com/selfdestruct.html”>self destruct</a> in
10 seconds...</h6>
</body>
</html>

Inline Styles are not Best Practice

Inline styles, while they have a purpose, are not the best way to maintain your Web site. They go
against every one of the above benefits:

 Inline styles don’t separate content from design: In fact, inline styles are exactly the same
as embedded font tags and other design tags that we’re trying to stop using. The styles
only affect the exact tag they are applied to, and while that might give you more control,
it makes other aspects of your design and development more difficult.
 Inline styles cause more maintenance headaches: When you’re working with style sheets,
it can sometimes be very difficult to figure out where a style is being set. When you add a
mixture of inline, embedded, Linked CSS and Importing CSS and you have even more
locations to look. Again, if you work on a Web design team or have to redesign or
maintain a site built by someone else, then you’re going to have even more trouble. Then,
once you find the style and get rid of it, you’ll have to get rid of it on every element on
every page where it’s been placed, which can increase your maintenance work
astronomically.
 Inline styles are not as accessible: While a screen reader or other assistive device might be
able to handle the attributes and tags effectively, some of the older devices don’t and can
result in some strange Web pages.

!
Caution In addition, the extra characters and text can affect how your page is viewed by a
robot such as a search engine, so your page optimization would not do as well as a page
with external style sheets.
 Inline styles make your pages bigger: If you set a style on every paragraph on your site,
you can do it once with like 6 lines of code and an external style sheet. However, if you do
it with an inline style, you’ll have to add those styles to every paragraph of your site. If
you have, 5 lines of CSS that’s 5 lines are multiplied by every paragraph on your site. That
bandwidth can add up in a hurry.

LOVELY PROFESSIONAL UNIVERSITY 113