Thoughts on Design

The first part of a style is the selector. A selector is that element of the style that defines where the style is applied in the document. There are several different types of selectors:

Type Selector: - Any HTML element can be used as a type selector. A selector in this context is just a defining or redefining of a particular HTML element.

Example: p { color: #000000 }

This use of the HTML paragraph element (p) as a CSS selector defines all uses of the paragraph element as having black #000000 text. All instances of the paragraph element in a document will be effected by this.

Class Selector - While the Type Selector targets every occurrence of an HTML element, the Class Selector allows you target a specific instance.

.blue { font-style: italic; color: #000099 }

This is a Class selector named blue (the period before the name identifies it as a class selector) which defines text as both italic and blue.

<p class=”blue”>hello</p>

<div class=”blue”>hello</div>

In both of these instances (if they were using the style blue defined above) the text would be italic and blue. Instances of those elements that did not contain class=”blue” would be unaffected.

ID Selector - ID Selectors are very much like Class Selectors, except that they can occur only once in a document. They are very helpful when used in CSS layout. By defining each major section of the layout (Header, Footer, Sidebar, etc.) and applying ID Selectors, you can more clearly define the contents of those sections.

#footer {width: 100%; clear: both; background-color: #000000;}
#footer a {color: #FFFFFF;}

<div id=”footer”><a href=”http://www.douglast.com”>home</a></div>

In this example the ID Selector could be used to define the size, margins, background color and positioning of our footer. Then, by using the Footer ID along with “a” the Type Selector we can make sure that any link inside the DIV containing the ID “footer” is white. All other links would be unaffected.

By using the different types of selectors, a designer is able to clearly define the elements of a CSS file. If properly defined, CSS will control the appearance of all elements the designer intended, and no others. If not defined clearly enough, these styles have the potential to both control unintended elements, and to leave intended elements uncontrolled.