Note
Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.
With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.
OReilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from OReilly and other publishers, sign up for free at http://my.safaribooksonline.com.
How to Contact Us
Visit Eric A. Meyers website at http://meyerweb.com/ or follow @meyerweb on Twitter.
Please address comments and questions concerning this book to the publisher:
OReilly Media, Inc. |
1005 Gravenstein Highway North |
Sebastopol, CA 95472 |
800-998-9938 (in the United States or Canada) |
707-829-0515 (international or local) |
707-829-0104 (fax) |
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:
http://oreilly.com/catalog/9781449399030/ |
To comment or ask technical questions about this book, send email to:
For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
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 sections.
Inline Styles
In HTML and XHTML, ) without the curly braces:
Look out!This text is alarmingly presented!
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) support 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 discouraged 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:
Stylin'!h1 {color: purple;}p {font-size: smaller; color: gray;}...
XML languages may or may not provide an equivalent capability; always check the language DTD to be certain.
External Style Sheets
Styles can be listed in a separate file. The primary advantage to a separate file is that by collecting commonly used styles in a single file, all pages using that style sheet can be updated by editing a single style sheet. Another key advantage is that external style sheets are cached, which can help reduce bandwidth usage. An external style sheet can be referenced in one of the following three ways:
@import directive
One or more @import
directives can be placed at the beginning of any style sheet. For HTML and XHTML documents, this would be done within an embedded style sheet:
My Document@import url(site.css);@import url(navbar.css);@import url(footer.css);body {background: yellow;}
Note that @import
directives can appear at the top (and, according to the specification, only at the top) of any style sheet. Thus, one style sheet could import another, which in turn would import a third.
link element
In HTML and XHTML documents, the