Add an internal CSS stylesheet to an HTML or XHTML document
Content |
Tested with: |
| Chrome (9, 10, 11, 12, 13, 14) |
| Firefox (1.0, 1.5, 2.0, 3.0, 3.5, 3.6, 4, 5, 6, 7, 11) |
| IE (6, 7, 8, 9) |
| Opera (8, 9, 10, 11) |
| Safari (4, 5) |
Objective
To add an internal CSS stylesheet to an HTML or XHTML document
Scenario
Suppose you are developing a website where each page has deliberately been given a radically different style, to the extent that each one requires a separate stylesheet. Since duplication is not an issue you have chosen to implement these as internal stylesheets, meaning that they are embedded within and downloaded as part of the pages to which they refer.
Method
An internal stylesheet can be added to a document by embedding it within an HTML or XHTML style element. This should have a content type of ‘text/css’ and should be placed within the head of the document:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My Homepage</title> <style type="text/css"> body { font: 12pt normal serif; } </style> </head>
The example above is written as HTML, but the syntax used for the style element is equally acceptable as HTML or XHTML.
This form of the style element, with a required type attribute and CDATA content, was first standardised in HTML version 4. It had previously appeared with unspecified attribute syntax and CDATA content in HTML version 3.2, and with differing syntax and PCDATA content in the draft specification for HTML version 3.0. The syntax adopted by HTML version 4 is also described in early versions of the CSS specification.
On this basis, it would be reasonable to expect that:
- Browsers that provide a standard implementation of CSS should support the
styleelement as described above. - Browsers that support HTML version 3 or better, but not CSS, should ignore the content of the
styleelement. - Very old browsers that predate HTML version 3 are likely to render the stylesheet as part of the document text.
Variations
Enclosing the stylesheet within an SGML comment
As noted above, very old browsers that do not recognise the style element are likely to render an internal stylesheet as part of the document text. To avoid this, CSS allows the stylesheet to be enclosed within SGML comment delimeters:
<style type="text/css"> <!-- body { font: 12pt normal serif; } --> </style>
The expected behaviour is as follows:
- Browsers that recognise the
styleelement (as defined by HTML version 3.2 or greater) should interpret its content as CDATA (unparsed character data) and should not therefore act upon the SGML comment delimeters. Such browsers may or may not support CSS: - If CSS implemented then the CSS parser should ignore the comment delimeters, but not the sylesheet between them.
- If CSS is not supported then the browser should, at a minimum, refrain from rendering the stylesheet as content.
- Browsers that do not recognise the
styleelement, or which do but use the syntax given in the draft HTML 3.0 specification, should interpret its content as PCDATA (parsed character data). They should therefore act on the comment delimeters and ignore the stylesheet located between them.
Use of this technique was commonplace when CSS was first introduced, and it was considered essential for websites that needed to render well in a wide variety of browsers. On contemporary websites it is becoming increasingly rare, however there is no particular reason to avoid it if you wish to design defensively.
See also
Further reading
- Cascading Style Sheets, level 1, W3C, December 1996
- HTML 4.01 Specification, W3C, December 1999