CSS was created to have a fairly simple syntax and means of adding to a webpage. The latter uses either the link element explained in Comments, HTML, Head and its Children, Body or another element that is essentially the style attribute's big brother.
CSS is made up of a series of rules, which have a very simple syntax:
{marks the beginning of the list of declarations.
style attribute described in Attributes. However, I will give you a reminder: property:value;
If you forget the selector or braces, strange things will happen to your webpage. Luckily, the W3C has a CSS validator which will highlight errors. It can be found at http://jigsaw.w3.org/css-validator/.
A good example of a CSS rule is the one for caption elements:
Basically, this means that the dd element doesn't have any extra space around it. Now, you might be thinking that what's between {
and }
looks a lot like the contents of the style attribute. It certainly should: the style attribute by definition contains CSS.
As in (X)HTML, you can have comments in CSS.
For a stylesheet to have any effect on a webpage, the (X)HTML document must either include an internal style sheet or be linked to an external style sheet.
Element Name: style
An internal style sheet is a stylesheet contained in the (X)HTML document itself. Specifically, an internal style sheet is contained in the style element, itself a child of the head element.
You may have as many style elements as you like.
A major drawback of internal style sheets is they only affect the webpage in which they are included; they must be repeated for every (X)HTML document for which you want to use the style sheet.
style element. The value should always be text/css.
This contains a space-separated list of possible media. Possible media are:
iis exactly the same width as
m.)
Note that audio/speech and braille/embossed have absolutely nothing to do with visual appearance. By the way, if you omit the media attribute, it's the same as writing media="all": the sheet will apply (or try to apply) to all media types.
The language attributes may also be used with this element.
Note: I'm not going to explain CSS for tactile devices solely because I'm not aware if such CSS exists. Audio CSS does exist as of CSS version 2, and gets its own chapter.
The core attributes—aside from title, as mentioned above—may not be used with the style element.
style Element In XHTMLIn HTML, you can include the stylesheet as simple content of the style element.
XHTML, being an XML-based language, is a bit more complex: anything you don't want treated as markup has to be contained in a character data section. In any XML document, character data is read as raw text, not markup. Therefore, it will not try to interpret CSS as markup, which is a good thing, since CSS is a very different language—in fact, one old trick to keep older browsers from trying to interpret CSS as markup was to put it into an HTML comment.
A character data section starts with the character sequence
and ends with <![CDATA[
. Do note that these sections are not elements!]]>
Depending on how your XHTML document is read, you may want to use CSS comments to make sure that the starting and ending character sequences aren't read as CSS. If the document is an HTML document, then the character sequences, since they are inside the style element, will be read as CSS. If the document is an XHTML document, then character data sections are an integral part of them, and the character sequences will not be interpreted as CSS or anything other than the beginning and end of a character data section, so they don't need to be commented out.
style type="text/css">/*<![CDATA[*/style type="text/css"><![CDATA[One excellent way around any confusion arising from this is to use an external file for your CSS.
An external style sheet is the result of taking the contents of an (X)HTML document's style element and placing it in a separate text file. This file must use the extension .css. It is important not to include the style tags or character data section code in an external style sheet.
Unlike internal style sheets, an external style sheet will affect any (X)HTML document that refers to it, which means the style sheet only needs to be created once.
Creating a reference to an external style sheet requires the link element, which needs to use specific values for certain attributes for this purpose.
media attribute for the link element before since it normally has little effect. However, in this context, it works just like the media attribute for the style element.style element, should be text/css.
stylesheet, which lets the browser know that the reference is to a style sheet. If it's something else, your CSS won't apply.
link Element Referring To Generic External Style SheetIt's important to remember you may link to as many style sheets as you like, or even have external and internal style sheets for a single document. (This comes in very handy when creating stylesheets for separate media). Just remember: The stylesheets that come before are overridden by stylesheets that come afterwards.
Earlier in this book, I mentioned that you could set the default webpage language (text/html) through the meta element. You can do that with style, too. The code goes like this:
meta Element Setting Default Stylesheet LanguageThis tells your browser and your server what your style sheets are coded in.
Unlike an (X)HTML document, the contents of a style sheet don't need to be in any particular order to be valid CSS. For a style sheet to work properly, however, the order of rules is important. Remember that CSS stands for Cascading Style Sheets. Since a style sheet is read from top to bottom, what comes later in the page can override what was written earlier. Therefore, the best way to arrange the rules is to have the most general rules (which are, well, the rules) at the top and the most specific rules (which are the exceptions) nearer the bottom. It is important to note that exceptions only override what you tell them to. If you use CSS to set a standard height, width, colour, and border for an element, then create an exception because you want a different colour, you only need to specify colour. The rest has already been defined by the more general rule.