Introduction to CSS - HTML and CSS: The Complete Reference - page 459

depends on correct markup so make sure
you get that right too! </p>
</div>
</body>
</html>
O NLINE http://htmlref.com/ch4/importedstyle.html
In the preceding example, we could include rules for body and div in the file corestyles.
css, whereas the rules affecting the links are included via the document linkstyles.css. We
might imagine that these rules are used in other style sheets, and thus breaking them out for
reuse via embedding or linking makes sense. Rules for h1 and p elements are placed within
the style block because they may be specific to this particular page.
CSS Hacks with @import
Although imported style sheets might seem to provide a great advantage for organizing
style information, they provide much the same value as a <link> element. However, CSS
developers did discover that the limited support of @import in some browsers could
be used to their advantage. For example, some very old, partially CSS-aware browsers,
particularly Netscape 4. x , did not support the @import directive properly. Because of this,
you would see page authors write rules such as this:
<style type="text/css" media="all">
<!--
/* rules hidden from non-import supporting browsers */
@import url(hackingrules.css);
/* other rules here */
-->
</style>
Similar to the box-model hack discussed earlier in the chapter, this kind of rudimentary
selection statement approach, developed by understanding the likely behavior of a browser,
is really somewhat of a hack. Even worse, we see that the effect of using @import is an
annoying flashing of unstyled content in some older Internet Explorer versions. Because of
the potential problems with @import , Web page designers should consider well why they
need an outside inclusion scheme besides linked styles, until such quirks are ancient history.
Inline Styles
Instead of using a style sheet for a whole page, you can add style information directly within
a single element. Suppose you want to set one particular <h1> tag to render in extra-large,
green, Arial font. You could quickly apply the style to only the tag in question using its
style attribute, which is a core attribute common to nearly any HTML element. As an
example, the following markup shows an inline style applied to a heading:
<h1 style="font-size: xx-large; font-family: Arial; color: green;"> Inline
Style! </h1>
This sort of style information doesn't need to be hidden from a browser that isn't style
sheet−aware, because browsers ignore any attributes that they don't understand.