|
|||||||||||
|
Declarations are used to apply style to elements, for example to set an element to have a border.
The basic syntax of a declaration is a property (such as color) followed by a colon
(:) and a value. Thus color: red is a declaration. Declarations are directly used only
in inline style.
In order to specify several styles for an element, declarations may be separated by semi-colons. For example, <P style="color: red; font-size: 16px;">. It is optional to have a semi-colon after the final declaration - <P style="color: red; font-size: 16px"> is also valid.
Selectors are used to associate style declarations with an element or elements.
This is done by placing the declarations within a block (enclosed in {}) and preceding it with a
selector. For example, to associate the color: red declaration with all P elements,
you would place that declaration in a block and add a selector that matches P:
P {color: red}
The example below would make all 'DIV' elements red and 16 pixels high:
DIV {color: red;
font-size: 16px}
At its most basic, a selector consists of an element name (for example, <P>) (without the < and >). Selectors such as P or A:link are called simple.
One or more simple selectors can be combined using combinators. At CSS 1, the only combinator is white space ( ).
BODY
The CSS selector involves taking the HTML element, removing the < and >. It is used, as previously explained, in an example such as BODY {color: red}.
These allow you to give elements a particular name.
The HTML code for a class looks like this <TAG class="classname">. For example:
<P class="introductoryparagraph"> .... </P>
These are distinguished in the style sheet by the use of a period followed by the class name:
P.introductoryparagraph {color: blue}
This applies to P elements with a class of introductorypargraph.
.introductoryparagraph {color: blue}
This would apply to any element with a class of introductoryparagraph (the other one would only apply to P elements).
Class names should describe the content of the element - instead of class="italic" you should say why you want it to be italic, e.g. class="copyrightnotice". That way your style sheet will be self-documenting, and you can easily change appearance according to element content.
Classes may not start with a number or hyphen, and should be in lowercase (because some browsers distinguish between lower and upper case and some do not). They may not contain spaces in their names. They may contain any letter of the alphabet, as well as numbers, as well as hyphens. In CSS 1, there may only be one normal class plus one pseudo-class plus one pseudo-element per selector.
These are so called because they are as if the element was specially marked as that class.
These apply to unvisited, and visited links respectively. A link cannot be both link and visited. E.g.:
A:link {color: red} /* :link would be the same as A:link, because
there aren't any other elements to which :link applies */
A:visited {color: purple}
This applies to a link being activated. Note that links cannot be active as well as either link or visited.
The difference between these and pseudo-classes is that these select part of an element all of the time, whereas they select all of the element some of the time.
P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48pt;
float: left}
These apply to the first line and first letter of an element respectively. Thus this example would capitalize the first line of P elements, and the other would make the first letter of P elements 48 pixels high and red.
Note that the first-letter is 'inside' the first-line, and so therefore where there are conflicting properties, first-letter's take precedence.
First-line and first-letter apply only to block elements, and are only valid on the subject of the selector (i.e., the element that is being selected - DIV P:first-letter is valid, but P:first-letter SPAN is not).
Only the text-shadow, color, background, and font properties, as well as word-spacing, letter-spacing, text-decoration, text-transform, line-height and clear properties may be applied to :first-line.
Only the text-shadow, color, background, and font properties, as well as text-decoration, vertical-align (provided float: none), text-transform, line-height, margin, border, padding, float and clear properties may be applied to :first-letter.
If the first letter is a quote mark, then first-letter applies to the both the quote and the second letter, and if it is any other non-alphanumeric character, it does not apply at all.
IE 3 applies both first-line and first-letter to the entire element; Opera and Netscape 5 are the only browsers that support them.
IDs are identical to classes except there can only be one element with a given ID in a document. Like classes they should be in lowercase, may not start with a number or contain spaces.
They are marked in the HTML in the same way, except they use id instead of class. For example:
<BODY id="introduction">
They are marked in the style sheet with a #. E.g.:
BODY#introduction {font-size: 1.2em}
Or to match all elements with an ID equal to introduction:
#introduction {font-size: 1.2em}
These provide that if ELEMENT2 is a descendant of ELEMENT1, then the given properties apply to those ELEMENT2s. E.g.:
STRONG EM {text-transform: uppercase} /* EM inside STRONG will be uppercase */
In order to associate a block with several different selectors, one can separate the selectors by commas.
BODY P, H1 {color: red}
is the same as:
BODY P {color: red}
H1 {color: red}
The next section deals with lengths, how conflicts between style declarations are resolved, etc.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.