CSS Quick Start - Selectors

CSS Selectors come in many forms and are used to call items from your HTML document in your stylesheet. When you are developing the structure of your HTML document it is impossible to do so without having some idea of how you will be laying out the page. Thus, you will have knowledge of what goes where and what the container names should be etc. It is a good idea to name your selectors in a descriptive but somewhat generic manner. For example, say I have a login container that will be floated to the right and positioned relatively. You would not want to name this container so specifically that you call it id="LoginContainerFloatRightPositionRelative" but, rather just id="LoginContainer." This allows for enough specificty without causing confusion if the design is later changed and the login container is no loger floated or positioned relatively.

The Universal Selector "*" is the most general of the selector types. If you were to specify * {padding: 0; margin: 0;} this would set every item in the page to have padding and margin of 0px. The universal selector is handy if you would like to apply certain styles to many elements.

HTML tag elements can also be used as selectors and are the second most generic of the selector types. If you were to specify div {border: solid 1px Black;} in your style sheet you would see that all div containers in your HTML document would render with a black border.

Classes are a more specific form of the selector types. In general classes are used when you are planning to use the object in a page multiple times but would like to have a consistent style. For example <h3 class="CommonHeader">My Header</h1> could have  the following added in the stylesheet h1.CommonHeader {font-weight: bold; padding: 10px; color: Red;} and then could be used in many places throughout the same page to make all headings render similarly.

ID's are the most specific selector type and should only be applied to items that are going to be found once in a page. A common use for an ID would be on a div tag that represents the structural column of a page layout such as <div id="LeftColumn"></div>. The left column container is likely to be found only once in a page.

You can also increase the specificity of items by calling nested page elements with a space character from your stylesheet. For example if you had:

you could call the inner div by using the syntax .NestedContainer div  to select the inner div thereby increasing the specificity of the selector for the div that is nested.

It is also possible to give multiple items the same rule set simply by adding comma seperation. For example, if you wanted multiple items to be floated to the left you could call them from the stylesheet like this: h1, h2, h3, .FloatLeft, img {float: left;}. All h1's, h2's, h3's, class="FloatLeft" items, and img tags would all be floated to the left.

One last point to note is that the casing of your selectors is important. If your classes or id's contain uppercase or lowercase characters in your HTML then the must also do so in your stylesheets.