Div and Span Elements; Classes & Id Selectors

  • Class style rules are defined in the head element.
  • CSS rules are between the style element <style type="text/css"> </style>
  • Classes are created to individualize styles
  • Each class begins with a period followed by the unique class name.
  • Classes are applied to any xhtml element or text block using div and span selectors.
  • No programming terms can be use as class names.
  • When applying the classes, the period is not used and the name is quoted.

Using Block Level CSS Container Div

Div (division) , a container element, is used to apply styles without denoting a specific xhtml element(tag). Div is a block-level element which can contain any HTML tag or groups of tags and apply styles with additional spaces above and below the div tag. It can be assigned a CLASS or ID identified in the style sheet.

<div class="teal">The teal statement</div> The closed div stops the teal formatting therefore there is a line break before and after the text.

This teal style was applied using the div block element.

Using Inline CSS Container Span

Span is an inline element used to format a portion of text within a paragraph without additional spaces around the text. The text in the paragraph is red with no line breaks before or after.

<span class="red">Red Text</span>
Style Sheet Classes, IDs and Special Elements
. perioddefines classes
# defines IDs
divblock level container element
spaninline container element
<style type="text/css"> .mid {text-align:center} </style> In the body:
<div class="mid">Centered Text<div/>

CSS ID Selector -   #idname {property:value}

  • IDs are defined in the head between the style elements <style type="text/css"></style>
  • IDs begin with a pound sign (#) an a unique term.
  • IDs are used only once on a page.
  • Apply the ID term without the pound sign
  • Applied to any xhtml element, div or span elements
  • These special selectors allow JavaScript functions to manipulate objects defined with the pound sign.

  <style type="text/css"> #lively{font-family:Zapf Chancery}</style> In the body:<span id="lively">This is fancy text.</span>

Web Design with XHTML Part I Doris Cuffey, Instructor