What's the syntax for element, class, and ID selectors?
Author: Deron Eriksson
Description: This is a CSS example that demonstrates the syntax of element, class, and ID selectors.
Tutorial created using: Windows XP


Page:    1 2 >

In CSSW rules for HTMLW, an element selector (or 'type' selector) is an HTML element. As an example, the following rule will set the background color to yellow for the <p> element:

<style type="text/css">
p { background: yellow; }
</style>
...
<p>Element Selector Example</p>

This generates the following output:

Element Selector Example

A class selector begins with a period. A style can be applied to multiple elements using a class selector. The following 'testClass' class selector creates a background of orange. It is applied to two <p> elements that have their class attribute set to 'testClass'.

<style type="text/css">
.testClass { background: orange; }
</style>
...
<p class="testClass">Class Selector Example</p>
<p class="testClass">Class Selector Example 2</p>

This generates the following output:

Class Selector Example

An ID selector begins with a pound sign (#). On an HTML page, an element can have a unique ID, which can be assigned using the ID attribute. When using the ID attribute, an ID should be unique and should not be shared by multiple elements. The following

<style type="text/css">
#testId { background: aqua; }
</style>
...
<p id="testId">ID Selector Example</p>

This generates the following output:

ID Selector Example

(Continued on page 2)

Page:    1 2 >