Adding CSS to a page
When using CSS, it is important to make sure that browsers use their most standards compliant response. You will need to ensure that your DOCTYPE triggers standards mode rendering for these browsers, or they will assume your code is relying on some mistakes of older browsers, and will try to replicate some them to various degrees, which can produce unpredictable results.
There are two ways to include CSS on a page. One is by loading it from an external file, and one is by embedding it directly in the source code of the page. One of the most useful features of CSS is the ability to share the same styles across many pages, so that all pages can be changed by modifying a single file. To do that, you will need to keep the CSS in a separate file. This also allows you to keep the clutter out of your document, and helps avoid several other problems, so even if you only intend to use the CSS on one page, you may want to include it in an external file anyway.
To use an external file, you would usually name the file something.css (choose an appropriate name), and then use the LINK tag to tell the page to use it. Inside the head of a document put this:
<link rel="stylesheet" type="text/css" href="something.css">To embed CSS directly into a web page, use the STYLE tag, and set the type to 'text/css':
<style type="text/css">
/* CSS goes here */
</style>Note that CSS should only ever be included in the head of your document, unless you use inline style attributes on individual elements.
Using comments
Comments allow you to leave notes to yourself and other people in your CSS, and are useful as a reminder of what the styles are being used for and why. CSS only supports block comments, and these can span multiple lines. The slash-asterisk indicates a comment start. Everything after it will be ignored by the CSS engine until an asterisk-slash is encountered.
p { color: green; }
/* This is a
block comment */
div { position: relative; }Commenting out your CSS
This is not needed any more. All current browsers are aware of style tags, and how to treat their contents, since they have been part of HTML since HTML 3. Browsers that do not understand HTML 3 or CSS (these are virtually never used now) will display the CSS as if it was the content of the page. You can hide the CSS from them by commenting out your CSS with standard HTML comments. Browsers that understand CSS will simply ignore these comments, and will just interpret the CSS within them:
<style type="text/css">
<!--
/* CSS goes here */
-->
</style>Dealing with XHTML
Note that when I talk about XHTML, I am talking about pages that are served using a content type of application/xhtml+xml - the majority of pages that use XHTML markup are actually served as text/html and as a result are correctly treated as HTML, not XHTML.
The rules in XHTML are different. Style tags are not treated as being special. Their contents are treated as any other part of XHTML, so various selectors can be misinterpreted as part of the markup. To avoid this, it is best to put all CSS in external CSS files so that they do not interfere with the page itself. If you feel the need to put something directly on the page, you can declare it as CDATA (the default for style contents in normal HTML):
<style type="text/css">
<![CDATA[
/* CSS goes here */
]]>
</style>If you feel the compulsion to comment out your CSS in XHTML, you must use a more ugly structure to contain your CSS. Again, this really is not needed, since browsers that do not understand CSS also do not understand XHTML, but in case you want to use it (maybe you are serving it as XHTML to some browsers, and HTML to others), this is what to use:
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
CSS goes in here
/*]]>*/-->
</style>Note: If you (correctly) serve the XHTML as application/xhtml+xml (which IE 8- and many minor browsers do not understand at all) some older Opera versions will ignore the CSS completely if you use these elaborate comments. If you are sending the document as application/xhtml+xml (if you use text/html, then there is no problem), you are already restricting yourself to modern browsers, so you can use the basic CDATA structure, as this will not cause problems in any of these browsers.
Last modified: 19 March 2011