Other Style Information

This lesson:  Class | DIV | SPAN 
Other lessons:  Style Syntax | Order of Precedence | Style Properties | Other Style Information
Intro. to Styles | Inline Styles | Embedded Style Sheets | Linked Style Sheets

Class

A class is used to create variations for a base tag (like the P tag).  In other words, the same type of element can have a different style.

• Don't use numbers in the class name.  (Numbered classes may not work with some browsers.)
• Classes are defined in a style sheet.  The tag and the class name are separated by a period.
  • Example:

  .
  .
  .
  <STYLE>
  <!--
  H1.redtext      { color: red }
  P.boldgreen     { font-weight: bold; color: green }
  -->
  </STYLE>
  .
  .
  . 
  <H1 CLASS="redtext">Example</H1>
  <P CLASS="boldgreen">This line is boldfaced and green.</P>
  <P>This text is unaffected by any styles.</P>
   

• A class can also be created which is not associated with any HTML tag.  This approach allows for greater flexibility.  You can use this type of class with any HTML tag in the document body.
  • Example:

  <STYLE>
  <!--
  .greentext { color: green }
  .book   { font-style: italic }
  -->
  </STYLE>
  
  <H1 CLASS="greentext">Book List</H1>
  <P CLASS="greentext">Charles Shultz</P>
  <P CLASS="book">Snoopy and Friends</P>
  <P>This is a story about Snoopy and his friends.</P>

DIV

If you want to change the look of a large block of text on a page, use the DIV tag. 

• The DIV tag is a block-level element.
• The DIV tag is used to define the style for an entire section of code.  It provides a way to group style properties for elements that may not have them in common.  The properties can be applied to the elements as a group rather than individually.
• The DIV tag creates a blank line above and below it (like the P tag).
• The DIV tag is used with inline styles.
  • Example:

  <DIV STYLE="font-size: 14pt; color: red">
  <P>The cicada has a lifecycle of 17 years.</P>
  <P>It is the subject of many myths dating back thousands of years.>/P>
  </DIV>
   

• The DIV tag may be used with the Class attribute to apply a style as defined in a style sheet.
  • Example:

  <DIV CLASS="definition">
  <H1>The Cicada</H1>
  <P>The cicada has a lifecycle of <B>17</B> years.  It is the subject of many myths dating back thousands of years.</P>
  </DIV>

SPAN

If you want to change the look for a small quantity of text, use the SPAN tag. 

• The SPAN tag is a text-level element.  This allows you to format text within a block element, such as the P tag.
• The opening and closing SPAN tags enclose the text you want to format.
• The SPAN tag does not create a blank line above or below the text.
• The SPAN tag is used with inline styles.
  • Example:

  The lifecycle of the <SPAN STYLE="background-color: yellow">cicada</SPAN> is unlike any other in the insect world.

  • This example would render the word, cicada, with a yellow background.

• The SPAN tag may be used with the Class attribute to apply a style as defined in a style sheet.
  • Example:

The lifecycle of the <SPAN CLASS="highlight">cicada</SPAN> is unlike any other in the insect world.

• This example would render the word, cicada, with a yellow background if .highlight {background-color: yellow } is defined in a style sheet.

• Example:  This web page has a class called .code which is defined in the embedded style sheet.  This class is designed to apply a Courier font of 12 points to text.  The bulleted line above uses the SPAN tags.  Use your browser to view the HTML for this web page.

Penn State Behrend Home | Computer Center Home

This page is maintained by Carolyn Dudas
Updated May 21, 2002