CSS Syntax
Each style consists of three parts:
| Selector | Property | Value | ||
|---|---|---|---|---|
| p | { | font-family: | times; | } |
A list of properties and values can be found in the W3Schools CSS2 Reference.
Element selectors
Element selectors (also known as type or simple selectors) are used to target a particular type of element.
p
{font-size: large; }
h1,h2,h3 {color: blue; }
li { font-style: italic; }
Note that you can have a comma-delimited list of elements as a selector. The style will apply to each element type in the list.
Descendant selectors
You can target a style on descendants of a particular element type by listing the parent element and the descendants separated by spaces only (no commas). For example:
ol li {color: orange; }
The above style would result in all list items in ordered lists (ol) having orange text. List items in unordered lists (ul) would not be affected by this style.
ID and class selectors
Giving an (X)HTML element an ID or class gives you a way to target styles at specific elements or sets of elements. Only one element in a (X)HTML file can have a specific ID. Any number of elements in a (X)HTML) file can have the same class.
In a selector, you indicate IDs with a pound side (#) immediately followed by the ID. You indicate classes with a period immediately followed by the class name. You can combine the element and class selectors to limit the style to specific elements. For example:
#content { background: pink; margin-left: 1em; }
p.intro { margin: 5px; background: beige;
border: solid black 1px; }
In the above example, the element with the ID of "content" will have a pink background and a 1 m-space left margin. The paragraph with the class of "intro" will have margins on all sides of 5px, a beige background, and a black border.
Pseudo classes
(X)HTML has a special type of selector called a "pseudo class" which works based on the state of a form or link element, such as whether a link has been visited or not.
Link pseudo classes
Anchor elements can have link pseudo classes applied to them. Whether the style is applied depends upon the state of the anchored link.
/*
unvisited links are dark blue */
a:link { color: darkblue; }
/* visited links are light blue */
a:visited { color: lightblue; }
Dynamic pseudo classes
The active, hover, and focus pseudo classes in theory can be used with any element, but in practice only FireFox and Opera work like the theory says. IE6 and below do not understand the focus pseudo class and only respond to active and hover if they are for links.
/*
link text is tourquoise when link is active */
a:active { color: tourquoise; }
/* link text changes color to green when cursor hovers
over it */
a:hover { color: green; }
/* when link has focus link text is lime green */
a:focus { color: limegreen; }
More information
The above are the most commonly used selectors and work on most browsers. Other selectors are available. More information about selectors can be found on the following sites: