selector {declaration 1; declaration 2; }
declaration = property : value
If value can consist of one or more terms, terms are separated by spaces.
* : asterisk matches all elements
Two or more selectors separated by a comma: declaration applies to both
A class name starts with a period and is followed by the name of the class. The class selector is used as an attribute in the element in the body: class="name_of_class". Two or more classes can be used with an element if their names are separated by a space: class="class1 class2" will apply both class1 and class2 to an element. The order of the class names is not important. Class names are case sensitive.
An element name followed by a class name limits the application of the class to that particular element.
ID selectors are similar to class selectors. They must start with the number sign (octothorpe, #) instead of a period. Each ID selector is used once and only once in an HTML document. ID selectors cannot be combined. ID names are case sensitive.
Document structure plays an important role in the application of styles. The parent-child relationships in the the document guide the style cascade. An element is said to be the parent of another element if it appears directly above that element in the document hierarchy. In the same way, an element is said to be the child of another element if it appears directly below that element in the document hierarchy. Parent and child are specific applications of the more general terms, ancestor and descendant. In human terms, a parent is the first level ancestor of a child. The body element is the ancestor to all elements in the viewable page; the html element is the ancestor to the whole document. The html element is also known as the root element. CSS allows descendant selectors to be defined. It gives us the power to set up styles that apply in some situations and not in others.
For example we can set up a style that will affect all of the descendant strong elements inside paragraph elements, but not strong elements inside other elements like headings for example. That is done simply by naming both elements in the appropriate order with a space between them.
p strong {font-size:120%; font-style:italic;}
Here is a sample paragraph with some strong text in it.
Or we could set a style for descendant list items in ordered lists without affecting list items in unordered (bulleted) lists.
ol li {color:#336633;}
We are not limited to a single pair. We can use as many element selectors as we wish. For example:
li ul li {list-style:none;}
Working from right to left: there will be no bullet on any list item in an unordered list which is the descendant of a list item.
As a design item this needs some adjustment, the #3 hangs in space with nothing attached to it. But I hope you are beginning to understand the possobilities that come from control of the styles in the document hierarchy.
Sometimes we might need to limit the style to a child element instead of a descendant element. For example, the "ol li" style we wrote will apply to all list items that are descendant from an ordered list, no matter how many "generations" or steps are between the ancestor ol and the descendant li. Limiting the application of the style to the child element, the first step (or generation) down the hierarchy is done using the greater than symbol between the parent and the child selector instead of the space we used above.
ol > li {color:#336633;}
Now only list items immediately below (children only, not descendants) ordered list selectors will take on this style.
We may wish to change the style of a particular element when it comes after another element. However these two elements may not be in a parent - child relationship. Elements at the same level in the hierarchy are called adjacent elements. The plus sign, +, is used to separate selectors that are adjacent elements. For example, suppose we wish to reduce the spacing between paragraphs and unordered lists without changing the spacing between unordered lists and any other element.
p + ul {margin-top: 0; }
This tells the browser to reduce the margin at the top of any unordered list that comes immediately after a paragraph to 0.
Note: These various tools can be used in combination if required.
There may be times when you wish to set up styles that will apply to a specific element. That is done by using a period between the element (i.e. selector) and the style. For example, set up a style called "pine" that can only be used with h3:
h3.pine {line-height: 130%; color: #009900; }