Selectors

Selecting by Class

  <STYLE TYPE="text/css">
    H1.classname { ..... }
    .class2  {style information for all elements with class=class2}
  </STYLE>
.....
  <H1 CLASS=classname>This text will be affected by the above SYTLE info.</H1>
  <H2 CLASS=class2>So is this text</H1> 
 

Selecting by ID

 elementname#ID_Name { .... }

<STYLE> 
	#id1 { color:green}	
           (make the color green for all text in any element with ID=id1)

	H1#id2 { color:blue}
           (all H1 elements with ID=id2 are displayed in blue)
</STYLE>
.....
  <P ID=id1>green text</P>
  <H2 ID=id2>blue text</h2>

Contextual

  H1 EM { styleinfo };         /*all EM text within a H1 tag*/
  UL UL LI { styleinfo };      /*all LI items within two UL sets*/
  .classname H1 { styleinfo }; /*all H1 within elements with CLASS=classname*/
  #IDname H1 { styleinfo };     /*all H1 text within elements with ID=IDname*/
  DIV.IDname H1 { styleinfo };	/*all H1 text within DIV tags with ID=IDname*/

Pseudo-classes and pseudo-elements

Anchor pseudo-classes

  A:link { styleinfo }         /* unvisited link */
  A:visited {styleinfo }   /* visited links */
  A:active { styleinfo }    /* active links */
  A:link IMG { styleinfo } /* all IMGs that are part of an unvisited link */
 A.classname:visited { styleinfo } /* visited links with CLASS=classname */

The first-line pseudo-element

    P:first-line { styleinfo }  
        /* the first line of text for each instance of that element */

The first-letter pseudo-element

   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }