HTML and CSS Reference
In-Depth Information
contain PCDATA, which prevents document authors from putting symbols such as
<ƒ
into
the element content.
The distinction between these two types of data also has an impact on embedded
style sheets. The content of an embedded style sheet is treated as PCDATA, meaning that
a parser attempts to process the information contained in the style sheet's characters. This
can cause problems if the style sheet contains a character that could be processed by the
parser. For example, the following embedded style sheet contains the
>
character, which
a parser would interpret as the end of an element tag:
<styleƒtype=”text/css”>
ƒƒƒpƒ>ƒimgƒ{
ƒƒƒƒƒƒfloat:ƒleft;
ƒƒƒ}
</style>
An XML parser encountering this code would invalidate the document (assuming that
the code didn't crash the page entirely). This problem also occurs with JavaScript (a topic
you'll cover in the next tutorial), in which the
<
,
>
, and
&
symbols are frequently used.
One way of dealing with this problem is to create a section called a
cDAtA section
,
which marks a block of text as CDATA so that parsers ignore any text within it. The syn-
tax of a CDATA section is
<![CDATA[
ƒƒƒ
text
]]>
where
text
is the content that you want treated as CDATA. To apply a CDATA section to
your style sheet, you could place the CDATA section within the style element as follows:
<styleƒtype=”text/css”>
ƒƒƒ<![CDATA[
ƒƒƒƒƒƒpƒ>ƒimgƒ{
ƒƒƒƒƒƒƒƒƒfloat:ƒleft;
ƒƒƒƒƒƒ}
ƒƒƒ]]>
</style>
The problem with this solution is that many browsers do not understand or recognize
CDATA sections, and this could cause problems in displaying your page. In the end, the
best solution is often to replace all embedded style sheets in XHTML documents with
external style sheets. This has the added advantage of completely removing style from
content because all the styles are placed in separate files. Note that this is not an issue
if an embedded style sheet doesn't contain any characters that can't be processed by an
XML parser.
