HTML and CSS Reference
In-Depth Information
Chapter 1. Basic Concepts
Adding Styles to HTML and XHTML
Styles can be applied to documents in three distinct ways, as discussed in the following sec-
tions.
Inline Styles
In HTML and XHTML, style information can be specified for an individual element via the
<p style="color: red; background: yellow;">Look out!
This text is alarmingly presented!</p>
Note that, as of this writing, a full style sheet cannot be placed into a
style
attribute. Only
the content of a single declaration block can be used as a
style
attribute value. For example,
it is not possible to place hover styles (using
:hover
) in a
style
attribute, nor can one use
@import
in this context.
Although typical XML document languages (e.g., XHTML 1.0, XHTML 1.1, and SVG) sup-
port the
style
attribute, it is unlikely that all XML languages will support a similar capability.
Because of this and because it encourages poor authoring practices, authors are generally dis-
couraged from using the
style
attribute.
Embedded Style Sheets
A style sheet can be embedded at the top of an HTML or XHTML document using the
style
element, which must appear within the
head
element:
<html><head><title>Stylin'!</title>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
...
</html>
XML languages may or may not provide an equivalent capability; always check the language
DTD to be certain.
