Selector (CSS1)

Specify the element by name.

<H1>Heading</H1>

H1 { font-weight: bold; }

Apply the style to any H1 element.

Specify the element based on 'class' attribute. (Class)

<H1 CLASS="special">Special Heading</H1>
  ...
<H1>Normal Heading</H1>
					

H1.special { font-weight: bold; }

Apply the style only to an 'H1' element with a CLASS attribute with a value of 'special'.

.special { font-weight: bold; }

Apply the style to any element with a CLASS attribute with a value of 'special'.

Specify the element based on 'class' attribute with multiple values. (Multiple Classes)

<H1 CLASS="special first">Special Heading</H1>
  ...
<H1 CLASS="special second">Normal Heading</H1>
					

H1.special { font-weight: bold; }

Apply the style only to an 'H1' element with a CLASS attribute with a value of 'special'.

H1.second { font-weight: bold; }

Apply the style only to an 'H1' element with a CLASS attribute with a value of 'second'.

H1.special.second { font-weight: bold; }

Apply the style only to an 'H1' element with a CLASS attribute with a value of 'special' and 'second'.

Specify a style for multiple elements. (Grouping)

<H1>Heading 1</H1>
<p>
  <H2>Heading 1</H2>
</p>
					

H1, H2 { font-weight: bold; }

Apply the style to both the H1 and H2 element.

Specify a style for an element based on its decendant. (Contextual)

<P>
  <H1>Heading</H1>
</P>
					

P H1 { font-weight: bold; }

Only apply the style if the H1 is a decendant of the P element.

Specify a style for an element based on its ID value. (ID)

<P>
  <H1 ID="2345t">Heading</H1>
  ...
  <H1>Another Heading</H1>
</P>
					

H1#2345t { font-weight: bold; }

Only apply the style if the H1 element has an ID attribute with a value of '2345t'.

#2345t { font-weight: bold; }

Only apply the style if any element has an ID attribute with a value of '2345t'.

Specify a style for any element using the '*' wildcard.

<P>
  <H1>Heading</H1>
</P>
					

* { font-weight: bold; }