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
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: 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: 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: (Continued on page 2) |