HTML and CSS Reference
In-Depth Information
Linked styles are the preferred method of specifying CSS rules because they cleanly
separate the style from the markup. However, do note that using linked styles does come
with the small penalty of an extra HTTP request.
Embedded Styles
Document-wide styles can be embedded in a document's
head
element using the
<style>
tag. Note that styles should be commented out to avoid interpretation by non-style-aware
browsers.
<style type="text/css">
<!--
p {font-size: 1.5em; font-family: Georgia, "Times New Roman", Times, serif;
color: blue; background-color: yellow;}
em {font-size: 2em; color: green;}
-->
</style>
However, be aware that comment masking is frowned upon in XHTML, and instead
you should use linked styles or use a CDATA section like so:
<style type="text/css">
<![CDATA[
p {font-size: 1.5em; font-family: Georgia, "Times New Roman", Times, serif;
color: blue; background-color: yellow;}
em {font-size: 2em; color: green;}
]]>
</style>
Given the support of this structure, particularly with the confusion of XHTML serving and
handling, it is best to avoid this commenting scheme or, better yet, simply stick to linked styles.
It is possible to set a
media
attribute on a
<style>
tag to define different types of rules
per output medium:
<style type="text/css" media="print">
/* Print rules here */
</style>
<style type="text/css" media ="screen">
/* Screen rules here */
</style>
Imported Styles—@import
Within embedded
<style>
blocks, properties can be imported from an external file and
expanded in place, similar to a macro. Importing can be used to include multiple style
sheets. An imported style is defined within a
<style>
tag using
@import
followed
optionally by a
type
value and a URL for the style sheet:
<style type="text/css">
@import url(newstyle.css);
@import print url(printstyle.css);
</style>
