HTML and CSS Reference
In-Depth Information
style sheet language in the
head
element of the document by using the
<meta>
tag, as
shown here,
<meta http-equiv="Content-Style-Type" content="text/css">
or by outputting this value in the HTTP headers delivered to a site. Interestingly, many sites
set the
<meta>
tag and use the
type
attribute, which is particularly appropriate as of this
edition's publication as the specification dictates that the
type
attribute must be set and
thus the W3C validator will complain if the attribute is not set regardless of the appearance
of the
<meta>
tag. Check the current situation by validating the file http://htmlref.com/
ch4/metacsscheck.html using the W3 validator service. Depending on the result, you may
notice that specifications or the tools that check them aren't always perfect.
Embedding Style Sheets
The second way to include a style sheet is to embed it. When you embed a style sheet, you
generally write the style rules directly within the document with a
<style>
tag found
within the
head
of the document. The basic syntax of the
<style>
tag is as follows:
<style type="text/css" media="all | print | screen" >
* style rules here *
</style>
Here, the
type
attribute is again used to indicate the MIME type of the enclosed style
sheet. However, this is quite often omitted because browsers generally infer CSS. The
media
attribute indicates the media for which the style sheet applies. By default, the style sheet is
applied to all media, so most developers omit this attribute as well. However, as mentioned
before, it is possible to define style sheets that are applied only to a particular output
medium. The most common values are
"
print
"
and
"
screen
,
"
which indicates that rules
are applied to the page only when it is printed or correspondingly shown onscreen. Other
values are possible for the
media
attribute but generally not supported. Within the style
block, style sheet rules are included. It is important to note that once within the
<style>
tag, the rules of (X)HTML do not necessarily apply. The
<style>
tag defines an island of
CSS within an ocean of markup. The two technologies are intertwined, but have their
own distinct characteristics.
One concern when including style sheets within a markup document is that not all user
agents, particularly older ones or certain indexing systems like simplistic bots, may
understand style sheets. Given the possibility that the content of a style sheet is treated as
regular text, it is desirable to mask the rules. To avoid such a problem, comment out the
style information by using an (X)HTML comment, such as
<!-- -->
:
<style type="text/css" media="all">
<!--
h1 { color: red; font-size: 48px; }
-->
</style>
